{"_id":"@material/segmented-button","_rev":"1206-b88fda2460b1151efe2da24c41206d73","name":"@material/segmented-button","description":"The Material Components for the web segmented button component","dist-tags":{"nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"8.0.0-canary.d5618602a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@8.0.0-canary.d5618602a.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":"e0ffa412d51ea70f099fd69e811a2044b7a8be3d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d5618602a.0.tgz","fileCount":10,"integrity":"sha512-zf2ZGTkhoUq59N7P2zNCJh45pnKoD9VPuTdCV7lkdDbJFadvUOZK9vdcABB2FPw8t/9V3xkgHjqniMFBK/sNzw==","signatures":[{"sig":"MEQCIHzifUjLWlM392ca98rlJQ30LYnOUuyG8IMnOrfyXL7PAiBwL/58f/4XnP4O8O5F4fHTvfZwJmYJ0FbpLid9n9FAHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9mz5CRA9TVsSAnZWagAASkQP/1uWG4RUFCHUOLMFqckF\n3B9nCk8NxNhc+ux5HVtigtJplffr/U8/zLH/e8mgVUwAqxdUG6MoQJC7z7n9\npX00g1FxusbYxj2YCyhy+FnWdK0nYC+HR1iOkNOxBrinuSf8J5/4cg2bofVF\nhTzbJ3ti5TXxeMmEQPRy81sMI4GewmLo7aDUXKDXaLMaMJkn6CvqLzeRztGn\nkwyojJ1LgrnEBE6e25Q2VYXrABiaL/X30xqdInwbmjLWCi1aNb+msZB4DsdK\nkNd+znfyMoadpe4qFLuMspCNd+GU8ixGylIiF2fGlwqG3rE+eGHLigeh/hn2\nDbpYzcdVUCx0qQF1hdW/Zu2CXKQXGIkdeGd+RiTl2+P0fDO+LolKteuRId5f\nsfkS2qrdsZ14plSGNrAKbxZ6L2xTnEb9Bcj2Hsb6isWks7x35spi8/6rH3VS\noEm+KKwtfWvAAM3jnW5Vmdjpgds5Syd0Sz3xevuSsBjYIe1oz0ZpD6f050Ng\nGd5/CFryfWwf3b8tU0tkmcFifX9GAuJS+Hp/EJeI3UKu2YI05InpRcNtp9X1\n5bYzxVmtsQkJoRGhdUT2IPnZSlH0FOmZXXPVmfzy4A+fz4pFURu66EcuJJZ/\nLB5DfjwdxUaJyN+rTFUH/XMfC1DTYgt6PnihMfw71eteSs7ScqerJ1Aa9Obp\n8vSD\r\n=V1WP\r\n-----END PGP SIGNATURE-----\r\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d5618602a.0_1593208056962_0.8591715985562394","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8c02cdb53801665dc79f0ca0266fcd3dd26986fe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e590b376b.0.tgz","fileCount":9,"integrity":"sha512-TgIZYyaizfMeHV1TgUvjzZJMYIpFhshmUdIsYN2R/k2p4Hr/zoUffACyh92tcsVFgD+fo2fRuTbovy3aVGkBQA==","signatures":[{"sig":"MEUCIANarfPubTjeAyy/Kmjfco/RNOxy5FmjQxi3bSS7i/H9AiEA5OlMzV7JmMospk40IzBXtEaphkHIByMmRlLG8U/XM6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNPCRA9TVsSAnZWagAAZZYP/RyInvFU3GndC5RB7XSC\nXbq45o8aZ0iF3s/DNwy0OwqwJRQh4l51whjRygnCd69e5eQh98CagMh74qgK\nHWNA7JYXaC2w2t6S6yjoms0FdcqxZ7DDlmLyAVeV1IMW3BNds6Fmg3xzv7U6\nvN679n0JtRmgpFHzXS+a84eI5pAuig1Y1xJK8IDzVQ+8sxiWa7lseeBBXkjJ\nd9rqYX/sXKLrP5mhWSPgxR4o3NvWlg7gpsaR1BFzsXtp05xcmUO2bGbFCvzX\nPe0G+7LvxCVVQN+KULv+eYakTL/9T6PcP6Hh5Y1Sfv+johYq1bPTeI5KXHsu\njlx3hczLdqJPwif8wK4kaiyaGjUOg2pcvQHw/VjxBn/Ky9K15UiklS4NxtYv\njJ3ALVlMPDNmiF3LimacGC4ubpedWHxB6XVunWiqABe+7/7FBHI6+sFMaZCT\n8CMP9TiLoPWlaD2GYENobu5/7Ew8KcipsNspn+EN6SC/8ygaETUB6QwcVZFh\n1gUIi3i4+0Rde5AeP3RTgKoKwihckeV833Uj7E1hr4paIgsSidtsDyM+PRsO\n7Rr8EkDxXRCLndTrjOdbDayB3ZvZZJhuhNG8WL78KIMxHSNqCxwlBFpc+MtA\nKB0/PyYGRDl/pGfT2ivJ+F4OmyTn0kOe2EU3aheRtNY96U85q8hCoTAhNRkJ\nrLMm\r\n=4SlQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e590b376b.0_1593213775100_0.6847205481637428","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1747242746d83c2c450148ad48ae84804677e0b1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":9,"integrity":"sha512-iG6HWqvxUUCtNy8JqPwTsUww8+2f3jWUWAwFJ+wabDNoi1djXEqkUsJ+wmOpTC1apC5ULyOejmMijJ/KTmZFjA==","signatures":[{"sig":"MEQCIGFlFhdS7NJQGPu8IWeuQ2BJwbMVROHnx08WVU4T1FNdAiB4kcc6KWz/pOnla+gqESWLokTykic6K7yOQqwS0k9LDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iF/CRA9TVsSAnZWagAAFpcP/jz0JDS7zcOk7P+t53nU\n8EMDNoxdYw+E+JLINg8r6xW6HP61FDxJogJy4Md2X/jF2JDvo5+sWcmapLJa\nfPVX9f9JWMWGl8inMMsLXyJlsxTUT4ny8Q/Ar2piLB8jDjJ2jsybks/xO46T\nQan2I3Ogt7wxUiakWWSRB6wo68iJTIRrL0ejf/9atH3OVR6VD4i2UfdnZG93\n5javKKaVpJD0TB47XcKcUS/w4wque7GesFmYwvtFwXU6vWTciqmC0uhp2YWI\nulyMq+86aTn4Y6JygatQQEVX/KboU1dBhFR6LriKjFlT/HpxBJEjM6cMRRkx\nDVeou3BMKCGbVrzmRO98LUSghfGbvMsQIW9la6kH0kkT3APZRzVnbc+wlB74\nlDKhh0KdS9VYqiyNpC/uTdpUtx+/0dvQ8J4pUcfZL5+zRdUa0BMskgoF1gBc\nbjOUtXJbKQKNXLHbRihQg/NVoL0DqOZwsuGlrjPCdqEWFoopUOUZFR1Qba6q\nt9SzTiCSrf2xV/lnkNGq6WQ2M/pin7ZM2v957IR56tpGt4PIUd16Ze/D72o5\nEB5ruMrzjZT7b17/DkIkJOz2iKfflS5FAgXg26oODq3PhdnN6966saxxutsm\n/MKNdLKTlI6JFTkn9X/Dmin60ByUoGVWy/Xe1YNB9YEks7mojeVDoX3izn5Y\nj2iP\r\n=Q/aa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.0c9d6bd2d.0_1593450878923_0.16753031700523624","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"26ddaa174e2ae0e3898c20cd2d33e19015a9de5c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c1fec4246.0.tgz","fileCount":9,"integrity":"sha512-0kbAz3mgqi+9qXT2VTjNY6BSrN1zXO74Xul4F43O2NyDOfUs9JmtGFXRVAAXnlvsv/N12+VTyhxfv7oh9AAV5Q==","signatures":[{"sig":"MEUCIQDpaNmBKqacnPaChrlOR6tgVzQKFRflHRaT3xTM40LQmQIgYqPYyL/gdF+FvZO1fP4baTtRcOmpLElfOWu38+7+Q2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUKCRA9TVsSAnZWagAAB6YP+weLaqMWKfsr7/4wLzUE\n0UB7ZJHSSrInWg8FUaHoLf13aik9leWa7Ym2sXohS0ZBSJ+NRyet1iICS917\ntjGCjeKLccDb1qRtTUa6ukvAj/FTtckB2Hjb+vEyglCs+MPA+LIF5nzgesCc\ny+KT7eBVfXBL1OuM9qWQKylQre4MuQX90EVk+NVmxEa74JCU6uEGgNt52CNP\nIr5ftPk7Q9LcgZwySyoOhXWP+GwrNRdI0aRFnMgevx8fBaQD4pKr6dwMmzui\nTww0GdWUW0ashMWRII+wkYYgZ6phA/mM7tx3ijMPTaEf88zC/xyNBx1htGDz\ndLzNFBejh6vYnRyk8NcAwa7VLwn7uzO79lmyg89pFPg2K4yAXy3yo8WQpiwf\n1su4VC772c88RFtWcMoPiC5Y0QsRC2iZODRz6HM508X2oMPjuSUpmMJHKZ4b\nPl4n5C0wJEJ+hTWC2NQ3+E1CibR97ZGBiovd9i2aitM9dqhnZRoT2LYhHfY4\nqP5LeZZm+PMuly/YxOXT57o5Bjj1jEXKQRJHRYVp3AviyfjPO6UtV/OOYhGj\n92fOUl6qHRssdNoshdkwzpDLA0XUGGHhEY1Dw7D7H6MNwvh0eXx/3AIB/+2O\niqGvqaoaQQNkSJuI2kktMEhFKNUzYxpLT63Bvvr8LvdgPCIc9RoUl+TwGqtf\n44/L\r\n=z343\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.c1fec4246.0_1593451786616_0.5921607843307588","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e09aed351defa7a43a8f32391d2d8b51a6f29d5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c678a9d34.0.tgz","fileCount":9,"integrity":"sha512-OaT453iUWfPgv5p3nBLE3N7NdV8bqA0e5zKb2eFXfsTT4k48zdyP9uHNZsjXd0aehR6h2jWSeXqGd8WpjwMtjw==","signatures":[{"sig":"MEUCIBr+BQbW9dOasecbUYu0bGpCWwDkK32XM4ydKA746xkGAiEAvYRIwh1Aw73xSmn5XuhF8rSCAVDhG+R95dFpzSqGJcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ioHCRA9TVsSAnZWagAAOJsP+wdouJ++Vgh1NgNq7gSv\nKyh02fwMQ1u/x2cZxMy6FxnnbKnZcaS5K00Sg3NmShjlCoDbVLhSO1qoyITx\nceQfKM1/a6+n9rcPLi97g/4454TIu9LZ733XEgvmBOR1D+nu3nbW6c8LvMjQ\n2gY9eKU7wbGhFkoAW4Xwi7Jn4YBBLSSL8zAke+zYusgm4PhBtj0ymSdE+ebi\nAKQ1tOd0afXNSGJu3bx+N81QvAlaPHpMquFSi5daMg6LMo1/mex02Ag/5W59\nJmGQ3lpRBVcVnWxVAoGvSZD+qMG1s6v1aDo07WpCyySgl2LxypjLh7dEte+F\nlDJUEXryVuiSSuc+gnSRikK13Tizvd7uZLLRfT1ESinrgeaI3Oqb3xw4F0nq\nO4ozqJlGfn1LyebToya7cSZa40Z2jsu15dSNpLeR3o9OkHOGXUyxX0F8uYjq\nGuI60gGwxgqxHnHfE3F9lUk9+grJtZqvGxFwGMCBjRgcN9W7R0uQG8HJi7KP\nCT25VhTNT3yiG5NJMS+20IZ9BgPDbksmIRmqK3ae8VcG9WLKisuVPUSq0pzJ\n0wH3OohHE3TPiowElETzRrKmJFrohBZK5qVagv0KtT1AHtiD7lfGqUQObZ9X\nNq1OyoCTJDyDMW+14aygGLbK/hwKSGUijbmGUCDu73GwCSHNASeCq+kv4VT6\n3J8V\r\n=UBFd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.c678a9d34.0_1593453063045_0.23173079149387354","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db83d33729cfe1f46e2decae0771628ce6f64ceb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.521afaf6e.0.tgz","fileCount":9,"integrity":"sha512-S/WL9bn2rnHm/JU44MZYR46ALuE7fBehgkwgPVWmvtLqqjNVA76r7tdkOGrqLWP29XqIlDQ08G868jOG2sSOHQ==","signatures":[{"sig":"MEUCIA0F46fxtaUFrQ4h98mzG17adhm92bjCWpA/YZPEQ6/rAiEAhPzPCJgwfULxh5rg3ahMX3PDXmjGZzR/AGEIOtbQAa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SLCRA9TVsSAnZWagAAhmkP/0YAPnPK2jswyxBF0Al6\nhEe0ZuuMcS2aByYY33FlNCsd66+nC3x0j0xu+URM4MyxQiGYVC61ulVOrDbn\nhQFn1DJdqI0bnABfh6FAuLJXNuq1tlF8SS61cSFZqdS3Hx5QlhwWVDXO4yCQ\nFoq0LksNdZ7UScRMmNIjccHoeAAHRkcUwD9/atlFFmUdNxV/QK38Kec2E5G7\naFyNt98s5/QxaffM9441t3lYsd/tIWYpX6l2JzUg2jur8aNKfnLmhUN1lC05\nCacLqB2dXvGS8fbVvEtJHo4fGk+/ji9oefEbeK2gR7W5/5XN+vWjy89k41jW\nXUGe8tRxJmFAuExPXoV69T77zN6Q4/RwNvnmoX4LhzohfLIMuTBXoT4qK8SP\n6q9HfBpph5bb97v8c805kCLe8W486e4w0BaF5DkFyTXbnEPCiT1EEOrqIm29\n6RAswBUCZBhJb/n0a0i/6USI4yob/s3sckWmgYZg+sbXUiN0VmRRAoW3frGM\nOz/k7HH6zEjNoroXwqr4NXDrMpMcSQVGmyNZg/fEnUrPmJn90OQDBdi1kPuE\nT1eC9APsdIia7qDpP3N4WWRg6UKinz5YOfH6miWcSMudzbIr4LIdgF5ESJSi\nY3AV6MDtweYe4cfvxOisn2W86CEOEtZQ9etU9OCBAGeUbcBc++ygtcf4gRRF\n833H\r\n=7LFj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.521afaf6e.0_1593529483244_0.26640740725008394","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"923d53bafe76dc797b2285390b0e894c7f74ca8b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a2ad48839.0.tgz","fileCount":9,"integrity":"sha512-SiCCpfAYOOMe2M/zDxPuT+9Wj4wXrOT9/9ilke3SKUQyDsofr2GJZ53L1jyWfCmLUUwXBBJfM5G/Ezffb4u1yQ==","signatures":[{"sig":"MEUCIFerCNjmEDv1IAVkuN/ljjpHw4yrx16Fxnnib/Cke+JXAiEAt1N3wn8oPdk84H+AJcT+7+Z7osXGWkteAavTHgclmKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+47jCRA9TVsSAnZWagAAxV0QAKD/Irf2xWeTxaCFdonR\nev3j7793mloSG0YsRvUWnhFphfHxhenXtDzY7+4sSq84WJts/fUSb6czD7z1\nQbo/GSjZYT+x36yL0gnma56HsCDbs4CvhYw3VWVf1stQmHz/j45ZnWXI/nLP\n4Aji+jW4Iy30NjyRqspfu6/2SN8lpTfZ4Ip3fxa5g/FPrP3S8RI3fTNUiaFm\nCrTPxyngDYOnky1my327pSFiKDPYin2pDJZso0J2j8koMN5QBsHKvTlch+Kz\nX3mjlURYfjkDWFFvVaRf8RJPwWq1Wn1sO+5DY6f7lnapqPN4UoJoY4WxDhC4\nlcv5EdGT31C8EpEQPgVbkOEXBrPP67E8TlnYpQXYGWwYo7GLHzhfWdBnAmqE\nWY0zXXimHXJrrdm8Szc2/2Pw7MJaqP2fnn84mSlHWU/32pbTrspMd3nl7uKm\nkCzDQXKtzxHuxxjZMqQM4ugRuiMKS6w3LD2U77JsJK/q1kPBAsT+DQXpahet\nQwutciB/ZoF1SFAD9ZEpM+DDNEGzgsyqAdre1oKmI18k/PrVa5LYAr0W4bB+\nZpMFWpRBn9V48y7sbbxOn6JTEDjk4Gu2dcWfphrH2oE6oz3o7F6aH6Bjj6Ua\n33M2ih49z1FRR+qmwQPzQHZ6q+MTDlguF7fZ6RqiUP78gQSNSCJMIcQqjKCY\n2IYU\r\n=EmXw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a2ad48839.0_1593544419071_0.8498394722145068","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"05e244286db76ef98af24b4480b1fea300f619de","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ec2385881.0.tgz","fileCount":9,"integrity":"sha512-GMOl77jol3f8FoJjtQcOD2X9EefzRjhH9QdBPNRKN2++o5aw048cTIpf/o74mcPJA3LTqXKzZWUqjwBacq+B7A==","signatures":[{"sig":"MEUCIQCZwW2reXNAvR3r6mOeTthli4dq1/D6+RJbqfjtPFElqwIgdsLLIIieWscbzYVsiyQUI726vzP2QRG/9uoikeKdz5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7KnCRA9TVsSAnZWagAAZNkP/jhnolBsepKAvxDNznHp\nHpRyJKGlla+2f9WFW8Bjtnt8HIorMI+FjTqLMfVTYGLLURaN3YKnUk6GIHGu\n+8cP+LY+URPgQM56MmiN8zqDE5HYQBeR4JPVaxMlRGfPyKPxMyBU8LCE909+\nm3FN4W8ldMkwKFOT+mak4/1RBaEao83Of3Bm5P5IFasZ6cL74QJP6ZggK/Ii\nBMTuoh41ZIWQsuCZ2wZSocA3nqcZeHO5xe6jO2/9NhFf8Dn7r14uhhdbRCQH\nrLoSwG+xBX+cvIjCoEOmz4WuellZaJy9Q2nYpfR/Hjaj7f7TiioYfN020zNw\nBPv6OMmjRWDM/yej1+sgsqmGwiF0mHBy7uZasF3juKcN9s4nwgOemA5GX2ge\n9lJ8TeJJCpzj865gDOH6ycTuMolpOl9ZlxG44IfYqdO6t+XTj1eJHV1vAuVY\n2SdjrWr2foZ3TlhU1/AIwgjhJac5yq/MuzAgYrTQssqXOdpwG+Lcoavt2DZt\nt2zkZJ8+YGYGtbxbzRb7M3R52SheAR4ClXUS60biNb3RDXNPTDP2aH0iN02t\n1yjc9T6MCrvY44Kjs+Dj19+eQ1U7T3IZwSyEI/btIEQZqV+Kziz8sHA9/Q5K\nVAxMFASQjFRIXCREDOvJ2W8y0HHb7U9mTIQQn4om0dUfV+8c2EpddUM+cfzn\nQQIu\r\n=Xbvk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ec2385881.0_1593553575174_0.9217093184269558","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"48bb3909a4f426d2d8665583bf8c6fac7f525f1a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.610c26c4a.0.tgz","fileCount":9,"integrity":"sha512-O2JKqL4Mxqf3y8qvf2pC10ZL5a5NAjW+uETY9QLdVzdNfuEUCc8L++ViHMstMLdh9L+PMyB45lHMkOUMK1+c7A==","signatures":[{"sig":"MEYCIQDyXjmQEzZ06NNq2ewQjloqk+VAdYOBSGb5MJKJquhhnwIhANPh46MQ59q7P/33iVBRMjZ4c/j0CfEEcYW5VoIR4v02","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KPeCRA9TVsSAnZWagAAPEUP/3cxZu1Z6VZmmYSFIyrf\nsGAeeXCTECl+vNOlYZvFjYCbrbX1keNs3eEGLseFE2BBsgtoliYkHfK/a27t\npTAEdlR0c2gljs10f8HHJJC/bKWdT26h5fRqzPalJrevNKwDCX/D4hd9Pq3U\nW7rQ31Kkt2exUTn2ZsCZgukOH2RGYwJmaPomQkx2ULcChm+1HcymezIWGPAl\nItr4VIk5W1WV2Jdxr2S2Vg1EJbV2YjheONc2wtB+Fe40z1TBOz6sfuMWUdbu\nyZPJuQkPB2mMIWCvpVz7jKWYpii+QnoskD/bt3uzupRweGKgIadpIxVejrZS\nBgbKGjAy9J0flBX3Ucuxu0CfY0jNIOF2qxwvVg8ptxgUcVmJbs8cB7dbSmfO\ncLLOjKDcU4XNORnyJgBlXPO9pvwI1+7QxvwEKBWWksjb02s0eh0AIzWo33+S\nuVG+vbiyblbAk+ofk0v1MJ8fjwzLNutpRxsy8pwE0WThSEB/oH2KlAuFvM1R\naOohP9pLIFcV9Lil2zoOexSzUrob4Xu8C885G17lXIJiA9BiixL9EdcRGSXN\nByUplf239/5Hy9+h4PM4I+cGcTPZtpSp13Ds5TmEJTKQb4MTVaAVgPEHGBCt\ngvjW/1DDmreYscQBJr33i9msfyJKBAHCypBTb3EsadUXysNHxcZtlBDBlKLW\n7nhl\r\n=/Elw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.610c26c4a.0_1593615325685_0.03133348693725879","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1cf6e08d01769605b28e9e49d6cd2af12a1556ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":9,"integrity":"sha512-C3B+Xzy4z6fJXTppBUGgAWIMtMZ8fjDGXHsAsr/EBUgOwksMRBztjDfhaVOB7+WovV9L54hGbKIShhBsappvQw==","signatures":[{"sig":"MEUCIB4CivrlloPahw0ENf3l5ssG53e6tRCEQFY+E4tElPvqAiEAyAbBfhegQ3CAtBrLJ0IEGK2IObJXIh/HajFo6rR02WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/ONjCRA9TVsSAnZWagAAxNYP/3M8OG37Y8HOtIuu7Lma\n0p6pSBRAatjfI6ePAyEl1ZlNHI5YiLCo7syLu+2duy2tQY617So9KgxqlSAV\ndRWtIFBx5tkZ8VwyMhzPC8JtfPoMgPjfiBsoOnHqQjQ66P1LY7ZgLpHtDVxI\nVIhpGUPkr813VURhtcUi2yj5NulfDUO/xQ8sC4pDZ9DMZq89LRKwscP5uG6e\naKNPVCwwYfWxhQ1igON39xWnJRcMa+jFnPg9V43DsHnVW/tzPQr2s02w4Ezj\niLon1c5fBiQfkR9PHxeeJO8QDMNIKmPe0zO0WlfPmStfySaWzM/NG4F4+4fE\n/SNhi26wMfBqDCidV2b2LZarc11bnPnXY5nGJIjLjr56rQ0SKN7kQIjuvhkn\nb6R1ehimUT+KdMIn8LBfDmJEiuwB0ZKdAIDgX6LdNMS2PhzYBn8yr2pIpDa6\nECHFMIIamrW4khrKPl4Xwa32PKJKhEa3EuHoeMjC8Vug/5S7H7ARj5c9nsC9\niST4TncjpembQ2WC4xBhZOZMcmCD4WJmKLynscr0bkgfhXUUFpCh+3UfWfX8\nkLOc+0vmtiXxDWaakFPytdqLdkBZkWJ97aMcrvQHtaHdGikzdgQdIwwJMboY\nKhQrWKRAhUf1NbSXNLWFlY3qUyOkfZ7ZfJIjgC0J2xIk/aEKGD4wXXy3CKYu\n9IrT\r\n=Zcdx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e2ea4a99e.0_1593631587215_0.9912468218971706","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fcb36babc39465d03016686f93ff6989fb8081bc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a78ceb112.0.tgz","fileCount":9,"integrity":"sha512-MXU7ci8Lk5gty9cnSNwkQOVd2IirrXDM4rHBOnObvhIW+q/OmdetlKe8VIqQxHWWjMLY7nSHtIplUR2sZD5TwA==","signatures":[{"sig":"MEUCIQCQpv1UW/90n/zSlmE6Q9Ck/iRxCYjgeX3mJzvX/J1LOwIgVeTbNchHdF/doDOylUcqCrpB10kyCbLHUSRHCwvtap8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OYnCRA9TVsSAnZWagAAVycP/RQKsllN+MSAgRGCRrsd\nAjXZ+Pp0H7nY4ZWtnlQ+KTJkK/qAW7RYL/pShp9MPTC8kxoLiF/2YKGugXqy\nI7qMl92qQOxzRjW9uM7KRpPyWca+LohZTJtCIWIyjhCaydqcs+swAg2lx//U\nEWLTNm+Njw1a4OLdyKVvUx40cTo9f3X7W70tPP/s405V5h9+Pm7kRgFLS18U\ncbttioIiwvcrLCN5euXixaaKWjbHCCzknRmrcrSymYV6fgjIlZvKi4UomSEZ\nP9wKkDT0rMo2AijbIMJ5kQbkcJuPjMvuOU1SZHQqMkZTqd8dKoXWNMBVkf8g\n4t3imqJ+NgjhSk7HP3FP/AFUrHpe2vcc88XXVEvkmHJ/+erM9hptQMHjlfpG\nXrerT+LZJIb1HlPTAXl4ttb9Lgllg1CZ6U7OievMtwILE4QKELaLAH403Gg2\nDytskV9wCwyZFA5iWs8Au8KkfqrdHsM9MlKC5AHix53MCXCa3sDVUcI3jXKQ\nyfKMMZi2LXU5bDjLxoupHIEZp7iHKgwJjuPVhRpaENvOv5Rc01ajoWDGqc5D\nmVJ94c52a1QEhYOmcq8x6iDCYsKKIQ8jAtPJ9rRSjr43JOgG69OFoBT2g1nF\nRPrbzHsseAS+0hwmVCRFU6xdVTJU00AXsht0PhRr6o5WS3snreFBcgx7hqS2\njIlg\r\n=ZzIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a78ceb112.0_1593632295062_0.8404610204323051","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4f5e1f24607d8e8dfb5ad303800b84b24d205064","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b0c456d33.0.tgz","fileCount":9,"integrity":"sha512-Do+Mu+R7IwZtCglwCcJ8/ZaupIXVlOXoXuLktMPgc5aa49E721/tE3Xy++3sdHeoleU+7CkjVrVEn/muMRWoxg==","signatures":[{"sig":"MEUCIQCY+Vn2YsbfxkicVSuvvp/z2k2oEwY+kOdhv6JvLaTdzAIgO4m6FLiTmUa5Nd9fTJqx0FuwD4KfnA3+RwIvpg9CXGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6hbCRA9TVsSAnZWagAA6FIP/1B40uTivfS9S0hWF/0f\nO3OK5EmRie9z5TUEiIO7nwotq6VPU2Lg9i8NTzXDOMrqEjy9pcriD6FCbwfR\n7c55x4yqlSP7u89GKu3fke0/I92Mziccfuwwww+TytuF0FRvWUwSf+YrPUHW\n07vlc7q63jerKtjipOwLTJkIx+EV/AjobtzZ4oHh989yje6xGiRp787llTuj\nOyio2BFbAWSO481p7rLcpFvC7V4yWuHj7UnIsvhSOWeQoQrUGAjdKT+uZcFa\n73+yJMU1lY6pfJLtRqFl+ma36J6JVK8hkTvIaa7kJAUlTX6DDXL0aPLZ4Nma\nSllnHhf66kQ2di7h5ncNPX7w73cB8WFNTubfRwd49GB4daQIOX4lpj5Kvb6q\ni+KblXg9JlG19Xl3yj5mZ3MKz7lqxp5u5QYLOehV/Egvi/29TT5fg/PCoJhX\nwMQaDixAkMxT+L8GYXiLLe9/f4jz8KpgaRQGj0dvi+DTn4WvNwO+bIsz+KfP\n82GBNdsKVLl/79BELRhpw0oERYX8nxqZWxqRVIF/MidB3cXXL9Jq0qs54Hkk\ndsJtInz8K6B3mbkstLK1eQfM/8qUEdQR0+L5LFCziLMr+UNbq5C+bVBMabLM\ngPeU1e2UVm9GGFIvypPFxeOWhxLWIowJpdup6Dr3dUSHsjFw+zUiY2NXazuR\nnn+F\r\n=796n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b0c456d33.0_1594075227000_0.7818993479815421","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ce436333b62a2074e877aeafae09791c7a1ee87","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2e5711e04.0.tgz","fileCount":9,"integrity":"sha512-webNLoiIaCE+opk9k/KSzfRwakAcO/oYcjeGuG9FjG91U9R+rXV7is3CeTCMmLjyhXOxz46jlMEbQ6ghAhXuZg==","signatures":[{"sig":"MEUCICR/8Y1TchuDaKzWrFZYvwCcMzjjR4MQNek4IGYFjsXKAiEAshLcFmGE2tljjn3b28qwP2fVkGvP0abBujvSqH823Uw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfiTCRA9TVsSAnZWagAAH3wP/1BsNpHEvbxfm4Jw23cR\nYILhSWJSrqhDg/1u7X99Y4WVz1QlHJMznDguNZJOnFId2QhIjPgUoixO9QlV\nVv0n1hOuDseiMwGdMIfysSu9k/+C0GxfKu507HHbMSgUXNMsiTa0JUozXy5q\nTMlSymxTM7pSwQ+EBAb95Lv/wf5KWIy4BK7c6R1IgdkQUfgEUGPBS+Tkvt2d\no0GAtYm5s1Zh9Q4PIOnvl0oYWBIIkKOpBul8xx/Un8GeXCj+6u5v7RMYueqG\nd237FxQfO5YPV+fs08IQWQCzLSo4FBwm52t+2EcftkABwSwk294v+dqzxflg\n+dZZ5zR9UKzjNa0VfFTFDckGPFz9XzIdXteSeZzCdyeGxOS26fjCTaqSQ6QE\nustojfiF5Uq60GczBTW20NCszARuwhuyVfLjou/YM2com6Qt+yd0+tU9cPPf\nnCUcovLjkMumARMCe5zn5jvKZ+ozOmbi3A46XyUnTocqvKggSR07kEa37qg1\n/HNHlruWBSZ9TA/UNIjk3NbVXqAtneYdZrt816LjQCJaghxaa4EXI0v7szkp\n/y+9/mtxuuCOVht1xesWCbEkRd3zxxKckrO/pmKM1f8CNmugyLVmzlL2mHeJ\n5/EONw/qNDQo8Pc+yYsX1pE1bTZ5yL0HBpbo41I6eklyOF/cOkkgWQ9z1axP\ngHf8\r\n=syns\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2e5711e04.0_1594226835090_0.6402015416862061","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/segmented-button","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2629538f92d32aaeae86566a24e0015fc5fb37e8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.811fc5d24.0.tgz","fileCount":9,"integrity":"sha512-UvkzoLcG0pMhyR80JshZkCgi4pTTjkCbN5H1g6LyjK9CgO7xCPiWLuB9bEos9iyB3Pz9dXxibnuGfL077/MF7Q==","signatures":[{"sig":"MEYCIQDhsGkpk3yi8elnUmZj8Nul2XUCCowWFfCThf1Bqad5fwIhAPTM6H8Xi7EIARvO6QGnHL/hCCVR/0EaC8vmZxbld1gJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf8cCRA9TVsSAnZWagAAKo4P/jxn7+UOHWaB8ZRnZJAu\nycPlFuQFyXTly8YsDgIBKTxHBfpjbNh7O6raS4Hg3YomSE0u7yaG08CSi65M\nDRiBSs/0nIpoIwlpiOB/DXCz7NnGyyC2yKJ0um4fqBlB1tLcUEwhEM27v2tF\nwRnCiiL8Sve0qP1K1dbRBLqMxYTNYVrMxQsw9izhhPQwREh5Ok4u+ykemRZl\nlKg7iFYZXz7LHINYbl+iDTsfVmbOBD9bv+6ODka5bz4bZzjLz/TMCdEJd8tD\ngPHbetWmX2AqRh3ND/VkV7IDr9Dgr4HlWXD90LXQmc6KBbHviDQ67DElq8Vv\nKHa3EKGbYycajULGK8RMl44sutvSAlLg1f6DnJkHpLAfunR5JWbhHHYWz1IQ\nIlxjHTZUH87nF0se71z3cDpcfFxtadwoEEGxpnRROAWFaRexU3qAlg9YhXNk\nLO25Yy8/xSnuKKeQsnWOV0ioidfrJruq/XDtXLtQfS0/GxV6DKlZz4F7SnFA\nuWAJyeF7IGlAzEklS97f4Fn1yPafi/s+degE3mp+8p0sqsevpVcUU65LX5NA\nd9lpOOlUWh2BO+b1bb6zYTIA+M9/vuKyM/Zj1AkNmkovbHukB0P+qcqrlxnc\n08qCQfT1bUAUkgUroIXi4f0ga28jaLpEraUHDx5L3nc8SNaYtduRHaR7lml3\nXBt9\r\n=6ovE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.811fc5d24.0_1594228508027_0.18495432022837788","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/segmented-button","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e808a834cadf2c94c9105f19ebe391059cb20f1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.6ed717ddd.0.tgz","fileCount":42,"integrity":"sha512-jolinizTD76Xwa34y4x5+zB1/AQmUrZbAWcOB0jfYnvub9fWtovPsGP2po/r37IbzQcqOYPlH43lTKjAnq2iYg==","signatures":[{"sig":"MEUCIBrzrgzuJaJB1e2FcygfqmnimWx9QMUGWjlGyO4GtBnEAiEAkinWjg8h/GLyiiitH7Vj1dk7h2NGNyMilVFYIm3PKvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiHbCRA9TVsSAnZWagAAsoQP/1C2dG9VkeIao7WV0CWl\nfenf+BHu/PkW1pYf4sWkhdy9wT6wWHqhB0J5M4EtjD6n9BFBpL33xPFvTU4S\nx/Trlk+KgYQ06PeyLBYn3kj8bt+QOEmHoUaNh8HI7IgAqwaw65RgodS3ynbQ\nHsuGsWqfOdWUEnVxw+cAhN5PUaSawxoxHS6mFZVM4cBAiT/xa1pY5KBvRgp8\nfz3yQuGsrXGotxn+/bCGwCSJpOwlFVgerfM6bHAgZjd0KedU7J0v32Rggw8z\nxnid8cwetO+jSTXLlJKKMCxfqvhtmwNigAHu8mEQYcTIpt0catE9VgIoAEUJ\ntYiYX2iMVdizPiUy4POOPY4y6PTCs6TsG11mXpiE0PEUelyuuZ9As615JAWL\naggVWSFsPsarvBhfHj0uj/dQvCDB7XDImHRUHYicBSKlihRx+67Ru48zGZkp\nza0Nai6dYFTlDbs2TFOpryEi3OU8iBpTMEdx08qzQNVlCuW4jY8WlsEJW2wy\nZJO+FAlOdU1v/kg5Y8zXPJo2pVBYBg3lQ+adGQxNy+0VP4615T/RKSrxMJA9\nyxemRtlYals6bfJNJw+/QIeOvu5Xe9SKEQgOE+pvCKkiJ6W6Z1ohMtgaqChL\n8vmVgSRcH44CYphcr0Ljn3cp/n8ESw4SpeayEEgcs/bRnVMoMo3jiGlpSYOJ\n+PRx\r\n=paS0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.6ed717ddd.0_1594237402922_0.6199645572989101","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"603e4d84fc3c44b09b146c43d9abdc48ba31da43","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d850de590.0.tgz","fileCount":42,"integrity":"sha512-0koOh9ZdSQtt90GJNG0HUpIXMHT9XzjYJaY/wLyXrq4iZzNDNe6KmBe/Hc979JmOcrK7t8bCWU60r8CHumyPPw==","signatures":[{"sig":"MEYCIQDoAd2V+sLnDymYG00fLwzafFhFl5yucbDlTZHq44z9KAIhALpasf7YZyRnd3xuECnWYxHRslfvS4dE4x5CiamNq+7i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xBCRA9TVsSAnZWagAAdIgP/RBfzIouDHH6Ks2CbW8M\nYXZPkPbQTYM8A+aXj+/DVBi1YXk8QQvhtbdgH19P4l8HVFM94axIiGbQctID\nq1LrT7dARt7DYSbwDszkhoN9MvaXT03bJrMM+Fj5eNwF+SfUs4/7H8m1Q9Bx\nqPbl69Ym/KOrRnWLQvANH53A1o5/NaatZXdr2ZTpAGIv2xRn4f9o4HghW3wZ\nguSqZVSe6Ak7LYjQI5GMfUBM75kfnmiZ+U/p+jE5ou2pwmVsZuql8DXGOHKK\n0xvqELL8V/GmcAF2olpHx9OJnYigN5k1R8N9vpJXT86d6SRO2O7zC1O4Aorx\nO1UDiotbcqf4atO1yHqYfISM98Vn2U8OrfMVoU6hfvRMQ9wfqphsTc2FII9S\n0tjOiq+dlqorKWFJgslLNrQMcDdRQ/yWrjnhAtWJxqmG+qTBH4pLR6LINglz\nDMpqig/pxXgcjWTHUvDJAAAHQ2Lvqoh/bOqvkO0RvMZbvKXC8xjXqZp5fgHr\n7zZYota2m554GZZ7kheBAahI5pX/U5K5+c1pcqD6uPLWzMrrbsiwKgN3ekFg\nOKX/G9t1qcR27jPPv4WIbFHbIiwVsxWqw3s3V7bkvaC5DPIikDSjnnd22cZL\nrrHe53g55f+0uVynNyjmFLP3K4+yXiFS5IwBdkVNm4m9LCeEiQdAyHPn97kc\n/xJp\r\n=GT+D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d850de590.0_1594317888618_0.9624053468722777","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0bdaa99d12117fa7010dab788ed611fd397d6b54","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e07a70841.0.tgz","fileCount":42,"integrity":"sha512-jubUludas5NcqNvclrc2VysTMVyvPKOWzCjVzhrGowgcmT27SPZioqjPoYdjwyU6tnAisB5+eUtFSsbAkHaTYQ==","signatures":[{"sig":"MEYCIQCUH6O68Z6hyoa81yFSrNcDwVoEUh8MpV/UHBjbekF+hwIhAIS/6b16iap3GjE0ORo8hWtkdBqiCejBB5FmxDmsZbEB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NACRA9TVsSAnZWagAAzxAP/2WR2VeNuvbIdbcXVedL\n+l2WPPsrEQuytSv0c5KMVvI4ool6d4tyRGkJEBBqpfBz58Sl228MmW2zXSHt\nR/IAJuCCBXS0zVHUJB4x6CxNImtuxhP3rmhadmeCfXyfFyaFTjxA/QpuS59D\nsgOud+4ZllyoRCq7575IdzxtB/s0fFNkAcaUkuDKpH9VJ36DzPYtl2Km541p\nYySPRKglHDcKM32sH5a0Xb7gIwmfUkNMYEvmrfGpBItNFG1wvrKxA7kZLJbE\nrHgRk0BFV0XYEtBrKA7GJqzPeispRjqZ5b4XSc+gavvpJGkFVGGPOkWd3GAT\n2qYs7GblfkOHIdX+39YkfkEX2hWdtSQ+RYvwlClOxlptowuqD22v4tZI+ObM\nrONVhQJBk/o2uKlgaS4y2J+0I5w3HU/5aepenKcNJAcLqk53ENVl1QsOuQJC\nXXBOCoxajxHqRY+FNb4CzD7Zjk01pNCiAcEYew7hGS8ARkjz89jE7YDSR2ch\ngXZLI5iVoQKpXnm2S69BrYHnUCUTxjCGqJAFi+TxmD3yO3RPK1YqiT4sZYUq\njp6DAaTx5/OVDw2+HUOXZY3WeywVfyxrI0dm5lRQmdDd2aY1amYlL8S6LqMF\nuJ5FcJNevZdFyOOy15ZgbWc8gU+GoUP/opru7VTEwkF5CQGLfM/tIV0wkxAl\nOV6x\r\n=5o65\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e07a70841.0_1594319680215_0.7005396568756042","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9f17680a68d3b94fb47e2da75af5b87c7991ccf7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.37947ed6c.0.tgz","fileCount":42,"integrity":"sha512-WXj6gQkwML5MsG7p9Po2bVt6QeaqRHKFdTW3jYeZEGoH3Bz0Ns3v23XbBoLtLNKZ0grXqWXGYGyooRzAAPM9qA==","signatures":[{"sig":"MEQCIAGqH3iw8k5hd3LNcKspXbJTtPaML7aAkthCj7X8+V9oAiBh0eDI+zOIy0RuYpFyj/Eh03sSiPvrYPI+Rf2g0l8bUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+ECRA9TVsSAnZWagAAQvwP/jLJ/IPk1kJqNi8VuKwY\n+2IMxH+u2c+nbCAFOD8yEk4mWTfo/EjLbdteJVM0zYXw3YnEv41omh/Bcvhh\nEtw3zonrsjPuS7ONp2YpZ9B3ocFraALsrzupEJ1JOn44MxgAl99jc+A01j23\nnvRBJOXCeEj15/fOnzfA+mtYUjuYvNutSRJxLiewfWfCZaCNPYSTWTQyxe6b\naz8PONX1iPN/RdYiCclJsPuevO3/FVbbrlWWvAR8PitfFSeQFWlrwUglU8kJ\nRwt8dE+R8t6/UXS1Y3B+IlDgMcEBUzWj55CgQPnL+3yiKtK/H6g4gszKBOQR\nadQy7A1Hkd7SJLvQDd4PUks6rB9RAbe3wna/Y54E6xqA8+MJsvmTm/4HPqeX\nMYhPNkTxth3y2T/WjGwaIOYjVsKZNaAKBmjgT6Iim585eNtM/JuasUqbQsnp\nw4Kf2eQNfWQdPKeuOzNx4IrT9IiNghSdo8t1zSG+iDl48O/i0AJNKzbOUFXX\nVLx/JkwzKUZEmxmMEQM4BOj00WVGGcQ9u+YPv3gjM/xPmH3wBpqUWR1zuV+Y\nkqqvW8E0BCXcQFW/NskrrDcMrTnwaEgQkV9FvEtGbkG6AS3zdg+EV234zMhn\nBmP6D66Ai24CcHR+9DdkvAUx793H+Zxq+NFnR0dK65bTLRHPeoSZ7uC7pXdW\ny/7Y\r\n=VmS2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.37947ed6c.0_1594326916534_0.7213993703681258","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e3813a149aa4e15626841e6687062af8533ea7fc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5d443afec.0.tgz","fileCount":42,"integrity":"sha512-6TdxgNwbHJHd50t1Oe1Gxxrd5RQRr0P2GOVmaLI8qwkbeceHmx69rezZzRJUZxGSHNWVxJ9jZVlVczcHucHzwA==","signatures":[{"sig":"MEQCIHDWghI341/+5JbPaPepnqpbr6DlXKS9iydwOxkIMDneAiA+I/7FizrzwAcBYQHgvCgnVhddn7NqS6ztV1Iux2F1tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4M8CRA9TVsSAnZWagAANSMP/RzT9bw0JOL2CCYAVcs0\ntFgXfWoEifGi2HSW6zQkeyUWhl9FtExeCzXGz1uZHGW8ylu5e4xn0g2+MPlh\nmjgTuZTm5YTX8cB2IfqeczW4HQzr/4kpVhf59eGuEvcdOuxdx/NFhc7/NoJB\nEwD8aIeLnR0haEgcQhiVn0eyXET/TiRWfAv3uq63R2atxdXSzZBYdjINz123\naVUn8kD/GPvKu9QDM6chlALNXB6o4XCXK2TvTMTeOg7bXL1PH+tTqb/nBfMg\nxivedogg9FyGMygLEK+1OpZqZEK6BxFt/E4gtoZfueU5V3PTg/0NcY7iaSa1\nTesomUvvPtjQX0jFFJrSIHEHwkjofN9T6UA/bhMn8OEN06+UOvScb4jDB45Q\n72CfO8+sfCaAmDBl7sf4M4b0itJV0aUvVgZROhSWL3ZSLL61xQMrZ9iqhBiz\nu1Vf/6WJydu2cCUM3e+N5Caz0nMS88b9J9nXQ7u0WTxrbHUJoTXmxCTO4xxm\na2vVx6UlAJ4H32pZLOBr6e8NjkNa6deSFfIxv7+VuDOFiXQ+c3qv3XgBDuPa\nMwZKmxOjuJsgdio7fLJ3hGOMiyFtBLfUiy9ghO/FTBNxQLs8k0J+Byj9VIIJ\nmmCCpySDlnCJA4qVQ4hZPx5wWMbYdTwuhChvtGU/KikiwEE56B3ivIm88158\nhN8P\r\n=0PnI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5d443afec.0_1594327867893_0.14326282241506605","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/segmented-button","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"858b15ba6c3b29252c00ef993b755029d02a141a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.9ac1ed914.0.tgz","fileCount":42,"integrity":"sha512-t+bHnGQQftTBPB6zhBw+Kxg930Z1jcdsqw9ZigAUSTw5+9YVUo3UaWx+nJB10Q6JhzVSKi7MZ9oEQL7OSnzw/w==","signatures":[{"sig":"MEYCIQDziXIfHUnqP9RLUi5gOMXevsUaj/QptIyT5bwnfe/eQwIhALAxS4zqoLeOhi2F0r+FkJi0OM1iarTt0t9xyIi/F21i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oCCRA9TVsSAnZWagAATuAP/R4zr9NoPqwKg94BD8ck\nrXEQ2IOWcRv0zj/NugLHq07TLz7SE0VbXrAZULDW62BJOrNt9GyyBllU8RhP\n3E13k3BEeHOhkxr8K1mibQgKezgg1F6BZ+IPpODx0p3zyytRgXl+8gkUhD5a\n/62v1BOKSTfFgv5aFOmLkoOxqbq2QkdzOXk1c5w+nJHsWb64ow2x+tq1lld7\nNNT3cqHU4OXJhGMhrCSTQyXdx8XsvfJuFIJfBjgJms6glHzkBVl3VyMoRxTH\nddGhPq/6tcZq9JmdUO9xX1ozjhE9rEyVYJQbbmPL+X++YFV3za0NDgpo+A2X\nSTGcO3DIoYcBvHQWSbJ7AHaHWJ3De6C8V4MzT+fGgNncD236NtD/PjVIo0PW\nTmOUwjryiNCxuN1gEj5DV3/fXIjnQp9tyMMwRoHwPPpiaJuqPdOcHi1dCf4T\neUX83ii9q4WxSXCzBkpAgcMQC1i4vqlGKTPCEmLHJYbSMnCT18ZAMHwVcXY4\nG5gYWqlkGJgH3MIkGQCVyv9x96QRfDS1tuPkCEaKJ0FdP6pxmtP0SjbeYUGY\n9rmejUZv7WXGd1D75aNpWJUt98bpGzngpVXY4gFizqPhjO47NlDe8O/acHd/\n/N61zdIudcD+YGYMRgKRJLm3KHl6ornVsYWf1c5Gyj85fvjszZuoka/slWj8\nB/o4\r\n=RC5c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.9ac1ed914.0_1594329601842_0.43440273023818077","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/segmented-button","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1a7ae827562d740a0e7381a5fcbcf6b4640de8cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.1e7cb6198.0.tgz","fileCount":42,"integrity":"sha512-w4XdAEDe4VuBVfEU1iprWJAMPnlqtrFW5hkaRPJyo2CSU8XUmU69ixRHD9orPHUwswjp3ExaYG5N7mkVoOcBoQ==","signatures":[{"sig":"MEUCIQC6kLu9DlKTaQzPgPcg3L57EB6FMrlgS7LvUEob3IK37QIgUUzYD+QQ6EFNMReqF4aAe8a5mYazngEAAGQAC22siNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5YaCRA9TVsSAnZWagAA60AP/15JtZvI5SgzIlARlSbB\nK9S17K4dR9Np2N8BlY2m3XvKpeW74ZplwYmpuRmIHd3Y8U7HgMRxqidP9Ru0\njwDfNJtW31GtAzo21NyiOrdLzNLex/qeuulvFxwpuF/uGaKb4p5xXU95j17q\nwTja5JgiVx19YbheqCoAKXIQa8Je8wX06JSKYiIM91c54tOf7GaCi5JNh+3e\n52mQN0+/1XFUapawu3xao01+sdZNcGZfrhlz02J7mub1h3UYth6jiVZBBvv3\nPtYrZp606S4s4K8lcJKS9LHGN0989wWLMkB30XEj3LPS7OXRb/A3UAlMnHL8\nBPJhXPG7xYy0DRPSrCdSo2JG09tNzs4kvWV3dB4paq90zWddBhhudHbpwb5D\nQCCeVSf1iGPrBVnYJRtsBNskPbI5K00UtJE3s71MqYI3HhVvY0dmPQlgF1aY\nmbACLLq/G3qIA4U3KFv2pg0lQSNXrZdEHnn1gcPzHJr3AJzakztX0BFh83Ld\nvUO/Ta9tTpjCgvDVwBYYUYnT7bLGDqgwQnOWPsa5CPCIhKhTS548AXS/zdTD\n41GrzAFbJX0xebjntpCwI/3OjVLZarZzf/f75ycmMqZmMDKvSm8LzUwWDiu+\nK/kHpEixTtB2+rWkMP1XculfEaf17xzupzRR5OvLlnPwGWgMqiF62Ignk5dy\ntRMN\r\n=TFFK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.1e7cb6198.0_1594332697632_0.13326412328548032","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/segmented-button","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8793191a7f10cd16a1698aa2b2090cf2b39f94a1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.843f636c0.0.tgz","fileCount":42,"integrity":"sha512-14GGC+s9S5nsNYaaSNX7j/Z9tOrqfAjhIlmvTNtLCeQeGuZ92yqCD02aF4icD60s4QGo+uajAtsr4spprifQig==","signatures":[{"sig":"MEQCIGQzbokTPAsAsgmJHtEd5UrDf88wcLs6BJVYtOa1FCnnAiB7RnlSAsnMyyFUY/AZQsnbjagJ7SSU/Oppe1yo4Uzr9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKhtCRA9TVsSAnZWagAAzBwP/289jp3zYp2qro6PqiUk\nPv/UyrzIw8JI4vuVP9wsP0s2vXvNZ1wp50e4bAY/Vc1Pi5IhP6XfaKM7oPLQ\nzbCvyJxfDSG63ObR/X21w9FY0KqNC2wGtcc4sCHLa1OVLBTkdWQv42b64IK9\nSLXk5NOsWhlLIrw3cWvJ9w5cWZF+QMmZItaIuV+VDBVZzag6EpP11gNXkogS\nbjkl2kHmcJCF5mCDUmV5OEHMj5GwylJVy3Rj33Xa3JqujRa7Bq+HtJO3j0G/\nDHXIZsA+a3vI7txu8F7Adp1Mqx0FzjV8/h8wQP1FQ6p/CV3QFusOPaMmCB8L\n3KsZLc/l+Q3KmK/oP1/ciWLBW/0UwMOfl+kv1XfKOGR2ntWmGq47f2AfDD/8\nAWK07yNNzh0cKY+I7kQgLo1fTJKgzoXBKW0ThtxTZRlQuPtQT8cUbjUF0zbx\n2hMv79TQaIRNiLb+eli3HHdRwRGRTidXZ5PlKwzw8x8DVS4IGdrIDp38U2mL\nNuulD7SnZdZd9H7xDSpPsBuBOZclwmXTXO+Cv2bJCdm8I/IQlBtZVBQT1RWb\nAoqK7RmX4LYppgzOJAy2TInuBQfZ+Dw5t3lJoE8Nl+JrYJmvusJATHjAftn6\nNzhdRjywrErriR5aJUQ2B0jL1W8lHO6131ydQtm9FuH853H7ku54ccaCJpGa\nW14g\r\n=2NBp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.843f636c0.0_1594402925443_0.49796924019863","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f2bd7ef696c6a6e34d4e11c162e57d5ec80f4810","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b2edaeead.0.tgz","fileCount":42,"integrity":"sha512-0XLbdG8rvSnyeLqRgiyzEZcJqhitbmg82GHTwq4eAtkBP/3AfDCCu8AuZk9JCIP+ZakyjiiK16S2agxn0yClcw==","signatures":[{"sig":"MEUCIQDWcuxAjj3qwRnyR5tGzlnkFsByRaAbabOYgyDUfgSdgQIgTUcay667ySfk7Ti3ck+HDaBAIP6uvBc5cx2ZQNc/fkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK4pCRA9TVsSAnZWagAAGSoP/A9EJH3Hz0Rq8o1U57Ju\nLYnoceQU9E/oVyJpgbCP08GnzAqQPPW8U/7y+/DEldYyCL/sjI5dpAeFKzSv\nyGpjwn3bCBpjL2VnYYo4AJwDABAZABCZaka56e38bPV07Hi1TNLwNnYH8j+V\ne61tf0F9cgppcE4niFjy/b/HlXJjHZzFgvC5MDu+lBuVjxLw+Ni8x+UutocY\nprW4zvsVO2CkQAlCiXd4pYRcp8bQ0BxHscAS9IZJirTGFSaQ3A4M6rQTxWzG\nr1bKcuXDH7npcxrjjaPu6RaXEGyX10K2n/NO+5DUVOMp4BhFH1NJXSC31vsa\nYOtHk8kxtEvoV2KruRXdSC0ZfoYDdjdHXMX+7WW4HKw0Phl3BnEE9VT7OkC8\npFsNvur0IBFn2DEQSuEHvEgpoAtN9nmHW3KpviLUmWRF8uBnmiMxUpKH1ZG2\nP4h335NzvhTmDKpyq3hsxfQbYZ/sgJSitRs2VnAKhlx4fua5FUN7WI05ZZV+\nbKWJGM+Nd2pyDU+k+SuVPj2b2egWpPMb0jcSpqn9TxmjB1PvM8L9vLtJDTKU\n6v/sSuOH4I3yFazkIZ7cTi0+nReF8tidwWhhlG69XhqZV1jWQR6VKwvScVh3\n/V5G8kRMkzg6e5ZK7IYcI7vmtme6pz2OpbRdoddqMn7ShZ8fFzWp4y/Tpjob\n3eis\r\n=/BIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b2edaeead.0_1594404392913_0.7531021904243413","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"70060092592899653d0edf290e9bfa16b17df27a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5dac1f624.0.tgz","fileCount":42,"integrity":"sha512-rBfCj4/JNjowggLzL2AmX7XHU+7Sz+2G0zhVlUSKXpwo7B2yiEuGjwzALaJQoIRQLJG6Mcpmz+OlRJUkLufMaw==","signatures":[{"sig":"MEYCIQDaEukg7WDXXenQ1EG8ygJ9jrGq23nO/Y7QtsUEQhbRcQIhAMnX2o3OQSD8gB/MfCPgjsz/SgAjLQNpI5enVoOXY7Za","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDIzjCRA9TVsSAnZWagAAB1sQAILpDrVQI9Ipw+HkQOsY\naVLppR3RA0LNBWFr7VaG69Jk9ge1syv1Jd15Ju3FPtmsymiuhnfJqm0NvX8w\n2Po0t0ndE/jbpBUQuBrjTCNmlpF+Xnj07ELGcb63XaWfoZeBhl0qTqeLcW+u\ntwOnZZx4/U8mYD0iCbBjSee1layz8/eUiyhxE00tdYKmYWB3dEZyK8bxtQEV\nqxhajHNqSBdUExHIqQ7AINWr9CMWWtnpanZLjwdVo571/3e+8WruD3ay+ffU\nTnU9LE1JbfSK51TNlgG7M4ypMBi8jDKMEkMdoJJUnzn0T4LhjPu+rPKlULLO\nF6Yh/xMTGlpg5MBpVxzqX8p2FNtWOD14CfNva066rkYrAImVGMIkM3xS87To\n7dWBzzewGYLZg8VzzyeYFOEXRx88zlwJufPvQ6sp19fZhUILLewnO6neQRvo\n2jg/xvMWSk/EM41A4FCCjMn7uCfg1Jlm8+DTwaxQeRHfwx1bKd+olPXpPOWz\nWVmFFJvagX5yGtuVmyOdQhJHiXdgQkjSXUeBOHeWJHQqPnANpf1FiG0uTlfq\nALJiqf3tqV3Lph5RVD8dabo3oz/ExRsKB9Xd/riQgCWtlXqY3Sfp2Vz7I7eM\nxNZCby/u16kfmFqMQawNAEbyiDtjbVcblJB/BJMUZW6Rlxh7S0IpUek1z2Xs\n5TTA\r\n=HuzR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5dac1f624.0_1594658019295_0.813311554336478","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1d9c5797620629e1b3fd0d1bb35530cde1a02d1f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4497acef8.0.tgz","fileCount":42,"integrity":"sha512-kihJca+hxQRfgGSAPtuB2b6H4tjWSgrrejut5m8Yqomzu8Y41pO4Sy3xQmm4IxfEIZp/S34+1/OCD6jVo3eOGQ==","signatures":[{"sig":"MEUCIQCZ4NdF+dCz+ml2dgqVHWlG6T2ZvxYLNQ6UuM7kYCtbcAIgFUsly6GaytkLwFam8930mjosqMG1cgX2Nhf1q1hezuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb7nCRA9TVsSAnZWagAAnSAP/RD6dDUbE67CnnjiMl1h\nsw1OpqMOfysCSHpHnqikswjeOytgSEwa3yKNx2qcRQ6ZanqbNcZpHo/bUVkD\nRyrCBA/JJZmlxAgOSjidioKvfkO7czU77REO3AwnrevJ0PuGYtsDjMQ24oHc\nj0sgEScphohWAxUuujYYVaRGmhQ/I1QhQKnprTDRVYGNy0Fsc/5PnjK+Fd0e\ngR6VNJaaXyQw99SFB5iaROekUzPc5yo5oztYE5SDaf3ylIRc1C0W6QfhY6fg\nJemdURzAaYraEqrNxq6huHnRiv1iHpkMRnselTR6Tv/Xw99X1gsOhsCFh043\nogU5ZIWJuocWZIBbouJHDnvlgt+4jj5OpFMz5smu80h5/81ImMUmBcG5uCwk\n05K+GyNCmX+NzEKCtSNPv1fCVHCKfIjY8uhg+dRpPDdK8YdT66XM6VmeUamb\nLcg8zxywV/sUpopb+p4iiQ2Ni0xB43bFHOmuQzV6L/2aWRE07Q3Ygzj/gYKS\nACZhvKf1w6LYHNfIcRSesimPQCLOZhg6vwo+w7niBVVbrFG+VXoJEUMagU4h\nVyawE6yUF5g0vo0o7raw5LcuGe3FqnmVl2WyQnQywrzgKkWLfzma4rV6BHxh\nD7SgbYSVEpu0eyfjtnNjYFO0ku1W35b1HsU56fKqCfsy8qo1dMkQe0mzqjYL\nhD5T\r\n=sh5Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.4497acef8.0_1594736358944_0.39741725705172515","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5a666a5d504ba82ffc7b27c44d8cded5ec5736f6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e6e23019d.0.tgz","fileCount":53,"integrity":"sha512-Pyzhm0Z7trYIns1QjBLyEbj+WXggybBOKPHtvvG+XV8AMAUFz+M4aWvvhWvB9wbncZh1R1xk4E4OgMqolvHnXw==","signatures":[{"sig":"MEUCIQD9TI9AJ9Wh15XcoVw2VEaTpZIJM4UONpGvgsJSvWlVXwIgNxxC+QjqlN33wsZye1j5XiZXm7TQ13dDYQ0R96A7GSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhELCRA9TVsSAnZWagAAru0QAIipHKaVq/6z7kMFB1T8\n5xnQWrLKFo1Y8dsXttxk9AXKjPdgQNZEIb/fOChk37FktbuPzvRDwj4/SUuS\n/cAO10T9cqw7eevIK7P8XjTIVCGQXSeZZ/QL9htqltNfW6ZHBPQt2yCqcNb2\ne2uwxkinvy/zAjEHOiKO5IXWQ59OiytxKCaX2db1ogy+nSLaPeISBHZaygag\nBDf8qwkDS6s/I08gkCN5DPeV9DR/Y/ZK8bXA9AIhDzYlin8G2RnmzQgnnB/O\nRyjvODGgKPXvyo24BtMGBNownUWogswvkj8o38/jeBbiKOtOtPMZx30UvJHz\n4hLZnRIa1l380rtbL8ZENn9dTNg8Xywbs/WN23z5XwFv7gJ4mCbwNTp2AVLn\nUi+roa2oVKxuRwP5qjWOvDe4ipkyiKm6VZTKCpXUOcmUpGXTySSPc2sO5qwn\ndKcas1vcMwTRixDXfT8iHVzoaVxRLKYr0IO6S1vL+cfGlSkROFgYqBi/NnRz\nU090UelzLuZaJjEclQ6bodP0PI3t3XUH4Vb89p/0QZJa0Ewc1iQegqJZvV6b\nG7tUfFaKMTPIZZYWNo5XSZ4oJgEj/rO91IUVCAQ8uFaBfz0zPDTPrR1L3whV\nX7TebILZxvNxuI6/O5l2ib5si70pyZGo5Zlapx6ArWxsFyhf0ktcvHOXnWoi\n0zFl\r\n=uC9a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e6e23019d.0_1594757386670_0.32906148157621185","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"039cc8beadddce06d5e5afa463a62f51d593f57d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d548d7a92.0.tgz","fileCount":53,"integrity":"sha512-dReinFI5LbKGVHet3bbvzCJKQpyJcHgu8u//Bdb9n0sYkhvzKotFuJhUiXV59dqC0gUvR3Zc45nAIv7L8xgeYw==","signatures":[{"sig":"MEUCIFx2cGj3f0m5HdFV1DtBADgA1hu7yW5y4W7WF3MSMtDEAiEAkDgFnAFJnMGGt2mUF1rBpzw9AG+Pr/12VkX1S5W2c1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh+5CRA9TVsSAnZWagAAja8P/2AscaQND28Y7jDLxUUh\nSpqQXChEPB33bL5+A9kuGKr/75QjIgDdk1QD1Bo7LG2cfqtRJ6C015kNOuYU\nXXQnaA8HgALCRGOqWsBHO5nrhtNIGLJK9NaTeJlWiZpjoCrHUNqtSlUA//9u\ngg3vTggdV3OjPu7UMmZjBpIbSSRn8ZUfJBEJU9mvc2Sh6cWiWhiVHWpFA/ii\nK9H4eaDDoe0xUNkVE/lZ0xLsb+JzpAwB8PE3flOvCxeXnMr+cD8w5g+7sFDS\nzrqKHHa7kgRo02PcoXL7LVNhykr/Pba3/9uGdhnlk0hF8FMyb9n7YwaOLvlQ\nwZJH8xcsV9mZ9Q3Rw9HHhCa0mqBTuHth8xHy2RRftWk1yLdZpBt/lozibzxS\nLSusNFq+GISFX2j8rLo7/DYpQad5fg1o682I0sS2qF1JZrJu6Ffxub5J0IQn\ntz5ws77nxwqOHBkybnjvbWA+XbTQ5ABTzkoK0/Zilx6jFNmV9yXFvM02WOFj\nSuEsnSt74lxwhebXyxCJkV+uf5kgdyb1Mr1bPCXM+zH8HMPjK42Uw+IGY8SD\n98b/+VpY5GWAfO/VzZUC/rG9pElUrY0xBtLJOhYNZ2MJm9jZ4hBKL1MyDaNF\nTsGQXCuf2u79GGuAaRwQoDiCRnqGhjHjm+5f0oBiCk7ND4T/lGGB0Tok1LmR\nIuB/\r\n=wSaE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d548d7a92.0_1594761145141_0.0735545065778187","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/segmented-button","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9b8d26b4e58c1a1428ad400cf0760e1f2803f064","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.58ce529cc.0.tgz","fileCount":53,"integrity":"sha512-Cs4BR2dPJY4VQyZLYgxa0OyJYlPxhQs7B5P+mx0ocxNgpCGPJJ3vnLvt/NTkSON6gat36bRGTxwhIrOdxlJ2JA==","signatures":[{"sig":"MEQCIEBftAcCuSKBXERXeP3xLAMWWa2qkVu4LQ+9vmArNvJ7AiAtzfUtH2BdZTJemyslhrb/0zB+d2DzaLGXHgYG6elfVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":90933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAwCRA9TVsSAnZWagAA0tYP/jBxBpjpngX/ivzg6c+R\n3b6Z3Ednf85WMkOtF7Ya5XDenrQItPapIpN5sGQ8oGNwZJIFaQVsWW+7N1I+\nkCh4JTxaQN1SdyB3GN4086m4nfMJNDl5pqtLdrJ4XYIxeItYMQiHHAZ7mrK5\n0JKMGiih53mQuHKW/NyPfLnzETqdNcgDBN5SNUc6GaAAYP57Qe5dDQh53YmN\nSBWywF+WKeYKPeZguXt06+eVBkIlnyfhOXCBfbzRwOU+MOkSJ9xJcsHVdjHQ\ni2yl1PPXkcM0TiAhnDGiJH+sPwbVpAUC/NnZwOZrVw7Rsx2lupGSAPSv92FE\ni3SvQHMeopyG4HgzCDHnHnU93U0K4cqlAjWcGv/zlEEJSbcOrU2hrvaqMHs8\nJi/ZVf3xN8YXK1dmnyLeEPHquokn9IqsZT41lsPsTbREEW1oMpt+j5/V0DPG\nFb68c9QC7MCQ+NX9F+V5Buy2f/isi+A6Qep9SeLHnlOAgjimLMseB9A9WzQs\nWWXDgPVWFLYbbB0oHR2bYvimYJFNSb53TYeuRnsgPTPgBjaoR8GlIH/1kvQN\nCoizYru5AtEFoE4WSz0Lets45YjDR4hSDsLH3okTkW2nNzRp3ulrximkfDxg\nAI4r2gM+cNSuCW2dI8ShN+9pJ6xpme99pWUvsc9qgA0jdWAXNFiI3SW/4Ujn\nPtWj\r\n=Lmwu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.58ce529cc.0_1594761264155_0.7468731590752948","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cc566faaf38f2e8f350d22702e025126a6bc36a2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a0f1202dc.0.tgz","fileCount":61,"integrity":"sha512-+StbGJonatX2N2vgJBc4ax1Jz5qgzvHUce/WOs/s3Oc1f0HMuvcJCV2cRgXuvt966+OqlzSrfTpd1x9sHVFRUQ==","signatures":[{"sig":"MEYCIQCtiSnNiGtHBuH8WRdn6fsPxfKvbiDQVqFWkzXFdn/fgwIhAJITNpLBG6/h+x1b/QMuZyLpxfdwES0IECVnfpfK6uBp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiSrCRA9TVsSAnZWagAAe3sP/ihcOWFUy3vYkUSp56OC\n/kPyI7bIvhiqhSuktOGa6P2adSOzjvQw5kwA2lwo9zPGsp5mUJRxQZfW++vY\nqNdkWtUBgoOb1AilQEQZEJsAWN5P6YNj8jmfQsti6vMB+c6TsQjoDWLwZNaa\nbGa1E8/1fRyqL9TszzOt2TKo+VMJdkhqV8zkTr7+pFbU5ElGmqXeXJYzfuB+\nNhHnN+wvyXZLDX0pKm54DEqQbiNpd6NR5rzHe3w5dt75TOCHw8xKm7GKkCAe\n8xx/R1XWAKY+6MGCckJ/B9Yy9t4/9xvTNth1SoNgdFo0slJhhrmLSJaWOYCM\n8zvJWW5Bn1RWU465SrTOCQ+lKSvXbfwbezueaAJJdGp26QBLItlN7zsnWRjq\nSF2x63LlwzSsfxeyqfY9vUqhqsAFMqGw1EBQyVlUa9ZH5/wZW2PXwU3XqzGp\nWc803aNQZQaLXZbGg5t6LDK+aCdVGd0xE6dKvZlGTdn/WaOCRrGNKwjwLeMV\n20tXuX93CbshrY9UdlECcSLAifjNu+Mbac6Vx1x+s4sFmy+udRxvXZK99q3F\n2Q590uQs6iTEJyWqy0ivgTbD3rTkAUsPi90pEivvcz/gthxA30OAqxkYhgAd\nW8oMgcsmOvJFIuL1HO7R1Jryngackzrw6et9HwUFmNzYG5soFSYTeEXRQnzN\n7Zvk\r\n=gnqP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a0f1202dc.0_1594762411457_0.481812775382215","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"67d27a9913ed8d7f8b4b150a692d432fba38fea7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ad4df58c1.0.tgz","fileCount":61,"integrity":"sha512-/42TiFKC9Qis96PJFos/2g21eqSMhD8FaV2dZWJdPIboPv2kuoOPTs7OIfEC68MklR0Tq58Coh/4456rMpi2qA==","signatures":[{"sig":"MEYCIQDNaX6DeHej5dL5wZYMt1ZO6x6PuAirGO6U/G9dNN5YtgIhAJMFOC+kevks1vpsg2RKnhnDSMlf2lN4W1HSWDSuq+AB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkNCRA9TVsSAnZWagAAuBkP/AqnpUVubF3/iFQC2L/I\nwg8nHavZa8QouabtRicrutcgTGw4yfo8UYQIuutnAMVTBKXr3Lw5wOtpH8Ks\nuZuso1XJZgAUPCdQ1sju0nWreiaVK1arqULfOduGmCbNzCNLuw61n8/5uDGh\nGW5V1tChe/EgH//R6FzyVzE/5MlJ9Ey7WeK0Q1Haz8i/iJIAJyN29xWv/u3l\nJ+ajYNFXe6jYcSp9gGnFnbBjsalbqrADwgcrWAPH7wuC6fMY5d8P12ETwvEj\nesaz7xkllp+1Qh9SFoNhEZzYvHwCY7GTxEgFAb0GXFbvL+ukV11zgEmzTP+t\n9IVVh7j5HrAmM495LHjIEpXuGLjr20fWvaAapk4101+5vzQ0CSwuoobeMWOP\nUmFQZqc1Hor9f55B0rv2bT1iF4LocKD1pjN0gCEAl1Zh2GW0Cvy5gnpXryXY\nrBm+P5+f/4Pu2YoX7hosjYXAiWPDIQoQvE/bgLJKtkP3KhUHQz+lLUBg/dqs\nP3p9npf8PLSmlcGj7n4RMk5YHW3Vep0P7V4KdVL2dLFz1tpKZm4X+ahaOtqH\nU5MTtGTSBA+7gyMP7+lPvBiFu9XsgPFyqLC8CrfeKyvtckKfJm0aTzKmx6Sm\nK1UxwD6axlS2f9300HC4ywKck4MefwwE25f1yQmNP5nZANM3GzrtUADGmU3Q\n5PHK\r\n=lPSv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ad4df58c1.0_1594771725337_0.9965747119157224","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/segmented-button","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aa7e14dc6c14dabb16ac32ee6bd3dedae7756e83","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.01db89053.0.tgz","fileCount":61,"integrity":"sha512-gdlHhJHUsoMwJsQln4od2mk73D+TY43fdvl+91PwkrrdtVsTf1LmqRelhjaGT07NzE7CtVKswe421VirBU3EbQ==","signatures":[{"sig":"MEUCIQD9fTj6vXXlDCg4cixDiIJcUjKtoGvcI7PejKBL4g6FYwIgASOpWNPYXohOJynMMX4Sh4c9ATSKX2LNrOzbqHylcWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKACRA9TVsSAnZWagAAux8P/iOxd4p1HXwnIuEHTRjq\npnL9BKHn8+WTPgaabVtc8f976sP9YQM1Z85tKt0aSzZA2GwdAvx9alORtkLR\nqZOd6Hez/kiXStVU3rRiIO6++BupE1MaqAkATRt/JX9J2L89G707Pl+b9OVm\niSieUKLB1VJ5Osj/WrhuDO7r7r+0NaBpph9QJhGBpSrhOHNh9SrJAyq9Nxbm\nqYV1PwQVF36YFZTrGtODtDluSy7pedBE4UVT6ZA+puBp5cF6OhxvfRxvVr7C\n9jHQ9o7sQG6Gx+oCT9Va3Fh2V9hb+WZ/liT4xFrrFUJEmOyiq/7dscDAfLjQ\nxGR5GkXATzGUXuj16Se13x9oKhe1/RDz2uSx2xN5vetlKsLhrgwW7UFj900E\nvbAs5+wvzRB4Lmt4Fx9u99JNNjW+LU6ajta9iySIZVUA561ds/L/+FbU4GIe\nr6y3iQpVLwkaSwttmSYGSGvs7HRHqMUciVSlhvxS9dq4ZbOAjP+0S9+wkNZO\nzhSs8mvUBEYmsIRFdissupPKhXJdFyeIdMH5QtsZ2VKxqvNMYtH2XetHu1D1\nnoriFWpBSjvEdvKVYu/0CYP6jmS2L7kZC+DBQn/or/pIKl7ZNbdSJuZ80zmv\nv+iQ+AJdM31PsxpKPzboTpqWp2Md74E9YiaQ5pXGmqp+QYT007g+08S38T1C\n8QAc\r\n=Pl1V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.01db89053.0_1594917503979_0.6507832068921013","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6f0d7320556bab5592a63d5a8095d9053898e1d4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":61,"integrity":"sha512-Rzu6k2NqOzpu6NGLli4ucRlljWZQDNKZz/hTImVkq1zdjyszTVyStbt8pzCcNPj7SVGZARfTRZN4uolXDEhqzw==","signatures":[{"sig":"MEQCIHr5ecQI3t2JiA9Fx+/VvVSN1ozd9WT7jl+ipx7oPp/NAiA8r7R3M3i9MK6LAic9cTS+OCrVA40LzYMPVgObaFn+Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe46CRA9TVsSAnZWagAAxUYP/2/UFzU92urb6YeXF5X/\n3ooHTWn3uU627zgMrxOWWRBtMsoKmRhrk1esK1AGN1azS41ji4W2D+KiJfcV\nKIMz3VtU8kuA9C+LK82vIrCYFnQD7RyOLAWXoZ7cHkX1eAYPeR1vi8A3dDGG\nH7FruSMxvbNKmDo4cU4x/5nmyr85R1U64pRSHi+jh51XlgScj4Hcmg73HSyh\ndBFwftydkxCLkJ9Dyj0xjnFH2d0ydQW/8ovf2NLpslzAhj2eXiVyaT8qGwzO\ns/u70yf4zruitzgtNRQOeWjcpf8CFcZRCPDUohZjBhzKHqzSTBJkwA6S2zIm\nYxAPZxX4ychXlwIu2lpQP9SHd5VuRZduErRJdAjl2QR7txRGjM28oA28uwJm\n22dZRnhTbdv3LQCkM3ki20lE/3tX1nS/gJN52AeKHZbsSgzq78qaQp5YWL//\n1aby4gMh0P1MDN29zdm2TO7otpBwF+JfdJlgXLCAfb82Uef2+YNWD/kgLjsr\nyL5Uzg8V5Tasbo0q12pPBL/FQDUt7A+IWpMHqaLB3WQ+dcPz6bZCG/XtrNbK\nwhakQv4jf2aGhAK18hSUe7Zvvi6zJ6ZniTIhuApZcl+gQ/UqyEaOML2bIVhu\nujQodfo88lA+YmTBgHLEwX0vDQ505zOEXOfCSsMrz36Q2+0qMTgoz4N5wxce\nyhAo\r\n=kc7a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fb5a4cdeb.0_1595272762267_0.567348695721136","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cf4aada55a3225bc2e644116147d2c46f6cc607d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.8df0f517c.0.tgz","fileCount":61,"integrity":"sha512-+XmfZ1WhRdLVJbYxLhx86pNfHA+OocJbagNoPBRvQH4ALidCHSnca3hvt96CsT2gK2eculGnMfoOiJnwdHsjCA==","signatures":[{"sig":"MEUCIQD4UFLl/Ig66Hr8d+NulSc39u2E2N+jtISQZHHUrn4fVwIgcSJbfF53pZSEFeaHCoutRuUIb5LQ2n0j6PUbyIjXkho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7VCRA9TVsSAnZWagAA3/8P/ibsxePMbh5noguL2nKL\nXP/lYfly53qQTpUDXVIyMfGy4sK1ZexclX7WH54fPtGBDcX0qFK+XKQcleEa\nfkSVi87EEdIGwVW0Yrc1wBYRWC8YRg14ikpoRBk4Dizs0AyMJuGbcmvn0s4A\nR4XAF3U5nEvM8A+tuUUGS/yme6wwgoL9vGV6HioQ16fk7PJhJ8+FZphUbEd1\nnArvsMPhnfJ0F+p1T/tmfrvBLPvmhb9USA/1cpQdGXd8RCfoyCTVl9BCyOdE\nzzMY84TaKtrRZd54Lw+zuaM6TZv8RTKzfWyRVKqYk0legJxBO347CsVMmVKm\nXXpQgsjsgTZVawqv2tABdFRHbup+lRaYvoeUASwg8MP9gYM/8gYtDUShQEol\nTLasvfL6BG32mXaRubJzT78xhiFnMUJdJ5zwntliJFPZqOPL119Z+hEK39WL\n4Mkk3ZI1ROtPA4592bPiE1zVXUjnLW71bwEPbYwCfrRkyY2WIuzvjM7N6zUZ\nETYd0VbpsI6VeAfAG7e1IL+ayPC4Zkodl9KziG44Od1zA4Lz7tGQ45yfrIZm\n+2uhEJ91JQsgQ/Yp6lovm3m3TTIDWRNu/NeMFk2cDkTdqPbKCnPqXvpNEQu1\numi/jgFa4Nr8XucMC2qFR3IewCHB0Xu4jVttPsg6KoD9uBpAa76oiY8wJIb9\nXG+o\r\n=cTAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.8df0f517c.0_1595289300614_0.6654263443016084","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dda81799c6bc8b2b880ebefb74eb8c4ae6d8b242","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":61,"integrity":"sha512-FA7oYZPv3NqNHkHPsdw6UHSNUm4NaigScMZCJy3C4IEZ/BkSSha2qETXCgyf4/a3tQ8Z/iYJmivyT43VnhTfVA==","signatures":[{"sig":"MEUCIQD7NdZw4U/miAguyrP633lMYxzbjEXwVgwV0rbx3O4jOgIgJqiwtTOF7KJ5L1Xe/yUTlzSO1GK/w/n/91+Zqi9uHbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjubCRA9TVsSAnZWagAArI4P/ioaD7Ow+S2orXstZUP3\nXpiE9oWoOc3tbudsdKoLZCxnqJNsY27w7+/JZi2omjDOP2MQEvtmLkIvc2s3\nif9tFtHqlYCHhY83/eVeioEMWi3RlmveEQpwaDXlyipRvHh4iwx0Pq/iiCsM\noxsRvkN54vaS9R85JSKnb4BlaOj+NOQ4qMrXGF9VTcZfc1nstJB54RGFfqlk\nreCtLkiBT4qmQyZaKqxaXuMqKNeZiqzmBy1+5KidLjh2zb0tNmrCF72FzjqU\nZDe+IxsTIhV7JPZNOtgN5gw7DcYevjjpSbEhSyStY01LO1RR3yEjrSa4MZ9x\njrHiuCuXjM8U2baw4YA9ptS+oC3vYPuqeKOG6ob945K4QdMEcM1zSgdpfIjE\nbdZO9eElxM7uGls025OoKIdGYdc9buxgmUnIodybtFsh+4gouMDY2/OKCGLd\ntgwgxGk0dAif7R8t6lQnSpREG254sWZS8/xAk6sJ3BxKHIR615AU3hkl+Hop\nNHz9beo3+0aIc7ZH+WmpMR4K99rKxcEYdVXSujYU++H/gEK95m0x9FOgjm1m\nV7cSBHiR2m2GgXu/h9FbXWdiQJ+8IwycNROY/9FRAY1dEbrm1pXtOZj4qfq8\nfn85tHgfP/0D7/LKpBWAfK9Y9WoYPMLX2VsGnym1LhF0f9TioVGuXV/g8CTz\nu8wC\r\n=QFZX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.abcdbcfeb.0_1595292570975_0.20745712130108318","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/segmented-button","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f77ff6adbb72c9b9f6b795eba54f66e5a0aecd09","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.7bd5075de.0.tgz","fileCount":61,"integrity":"sha512-xjZuBTrtCYDg3g0OhpeN4kcSR1vReg0s/wASrk1hThRMYFUlv9P0abmbqvEzpPwd4JXNi3r3VD/b+g/nrnggRw==","signatures":[{"sig":"MEUCIF7/XB0qSG7srF9urG8nclMru2AvyeQG83lKPZmltqtZAiEA5RKeM8aoQ6USflZpmWtgmFfH5E/ka3qEtebpb33VGPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgGCRA9TVsSAnZWagAA/7QP/iRIgzJ9nxyA8BwcJFAq\nbZAtKzUXkX0zjhw74tGf1xNz1WQyivUbdQduOue+tmFKd+StP5N76NQOsKu8\nbZywlwUB4glReyT9/FNdBXC5khyEzG5FmR4J1ry+iEYBIiauF4ETS1LZ6nMD\nOSHS/82AAPnyaPPqC9mKqiya4UPfWko/PObpCrFgo5ZfDoSQJ0eyb6qQFBM2\nuk94weRErNYysLTP7BTpRBZreQucX7Sl2gOjyDZ+OYmR2Xj/26kwAutavsVH\nIu/gKSoitl1HTi9Hcdau0xj+Lbj7wxC21XGJF2Yypxv2g6n7MiMt5NKwJzKZ\nFO7a+qvsK35wVfcGJoiAI9oCH7NeaFSQmm00JLafrvbQdq5uuN0TXPH1XD7N\nvFrvjaHuAZxfoThHMg2IWAU7gM4vaf5zmOlBXYRrpW5M3apMFYbMd79PDr5o\n2DR0PgEt9pmIXdCQ4KkE33CYEKuglS/yC/b8rNlBK2EHKEOb87g4H4zzMyGi\n4MJ7DXBnsI1yV4KY5fZ7qZWm+49SAyS6T+JLAkYA/Pb6f9ifnlag3boNKkF9\njkrx5UNBTwq+yzgG/0x2u/fYK9OsvIP+4sku2vvu/eVoxl6w9XpkJjj+MPnt\nbLlHKdwT/h5pcDVXQJVamLiazev2os0X4b44B1phCHy4S3OCfAanmgwbw+Ls\nFcXL\r\n=q1F3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.7bd5075de.0_1595357190423_0.9728303956018864","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/segmented-button","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d7eb703ed0bea3aa0f3e76f285eb640101b81d21","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.405a29a20.0.tgz","fileCount":61,"integrity":"sha512-+2Vzv2SDQB502PLCVzg94onaFD/UAdrKh68HW9s7RbqsGmBhssF+zi4hCpVeZrmYMpZDJ5abmSeRbaip39m3Rg==","signatures":[{"sig":"MEYCIQC8ZBLbMbGl9SRzh7t1BPre9FIq7PtqAihco5cQndbr6QIhAOS1rHbqA4NbbHqASvZjqe3+l/xAYdfVZjjWzrcGgA5P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLwuCRA9TVsSAnZWagAAtCgP/iOB2yvgnaVRmRpIOA0N\niz9AXiKbFhSx1MdNKvIO/qurdY6lj1NfzXYwIHNGmB9bHorpHFcveTNxaLa5\n8nCqe8mSxOEZnIxn68YYwbnQwWHbG+gV2TDalEvSX+QyoEpaC4POXDQJmE9R\nJ52zh+X5XAnFqlPeUFVfaHug5j8OseR9P+eAzkshuPN1HavPVVd8RZV9oF6c\ndV24p5hco5fVMLiMtfkYxXe0UKUqmOVPvzC0dpcF3KEQ9FFIdL5IrUj9coWC\nTabW054NmdpLoXEJrDzxtk1P0iIm9QjHOHWY3oSogoaaMWsOyncFeI3OpBRR\nbBM6StClu7+ayw+G7EMYvWCqqfsvOKg+fT7OmUkglfJzHllTVgizD6JYlQuK\n/atfPE8wJ53d5Y1j/LJb0PA4xzw7QibAV6NdMvB2eqlN6G4y2MgsEeSXfnPJ\nfu6650R8puTIJUSkG3w9p71GFJE+TCrxy2o0PRhpw1SOQIofA+KFAmiY5kSn\ny5QUvzyLnvguq7UhbjodVc+0WioR/B30BewqrFtbPaW6DC4CISLmOz64yO5q\nHmYGUBHcDrUXuq3KHH01IA1vrY2PGCVjZ3tg8tl72i4IwKo8vhpG7Ul7eAID\n/aj0wW2GC/JFQrlTOE5/vaVj4k1INo4Cke1r/EsP1UVBH7xZ3my/+xSL3iIl\nGWwK\r\n=domH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.405a29a20.0_1595456557545_0.4360173772776619","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5c7c3b243203a5df15f0ec9b1de6369e3b72015","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f3693ac4c.0.tgz","fileCount":61,"integrity":"sha512-ny1VV0pm2Oq7fK8Da4PofQJ0JnOKT+ggIcg2R3ybBTR02S+2zH3d3nsIyMjZwarcW+GMyjz3r1qQ/Vd4HzuICg==","signatures":[{"sig":"MEQCIDEsRTQRW3o/OrxN2EPnJM3FcjkPNIM5Fo9eDnLtcRYpAiBAX4lwchHeQV5/uLk+6ZAlvmUOXb1KTWhLiXclkyat1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL6aCRA9TVsSAnZWagAATYsP/0abLS9pGeUXiaiveIzL\nbeTEk07aPme84bdGcOR1ChfS4Pz/6wTrHe98VQhvZuCrQkJ1JCiE8KCBAGbZ\nfczTDmFbD1SJoknQhW4SOkJyg3VCENqhK9J7OdcHAUWXdrA7yyleRqtxNsnM\npRUkVX0HZnIZ2ekUoUefUs/dWzJeyL45S6v2nnFhHrbRAYDEcNhAbyL8GvgQ\nlYYgN9dT8ZPzc93i/KZ7Ht/RwHm7bkxz9liWDs04i/Na5FG6QoZ0J1kEzic4\nLGe0siLYh0JapROWKcny3eKLJqIIr/M9ciMlEqiLrRR06loOZs+t8S427aGG\noho6Hl3YxJ1FydkUU74xOhP0gLb1nscmBmjfESGHBfupL82wRJPxctesS9t3\newEuQd/hj6a/dhm0/iiNov8ZqK5OOk/pr6GxS1EZUOeUQ9mvxVjJq2B7XT4F\nrXtih7+uEGHh5UPnMZE6Wu1ocGR6bnPCR58Le5poeCXCk+ufNnObAvVILt/J\n+wF9khHi9OKuegfTIRPhOQHyhy3snnETQrW4LSPW3X52ElF3YdC9ce4tIdFO\noK6Uc5XdYpXHkl2gwY1glP5Zb0DNQ8WehskQPLHmm5LBruc+QlEFqu0+0Yts\n/vS8JLZJJmcy97OsW+1gg5OON+FhwSp6XFBZJBQBx8DLxw1RQeSr31SvULhH\nT1hG\r\n=IP0z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f3693ac4c.0_1595457178045_0.5638527621203859","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/segmented-button","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1ad5adb2d103d7781cff64961321d1bd20581aeb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.12a109680.0.tgz","fileCount":61,"integrity":"sha512-ta6JbvflunPXZWzcmmFMr4G0Z5KN8zlQhSrZDvsFPeOddhUJuh7duxfP2Cc+5hx5/ExrQxVPjuHtUg24Ss0fmQ==","signatures":[{"sig":"MEUCICjxRDE5XsIt6zYuGjtTOQGYNMXonyyj4wueH1V/SKyuAiEA2imxYRxvZGm/wIQkZRN+zPNAF7QV4vZUvH9zzBQOmEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMWaCRA9TVsSAnZWagAAo8IP/2Gug722WmyC7TBEdXB2\nT2sE5tMiDxUPNXmA/Te/kUdJPsO97jxCvJpzaclJxnr0IjG5133ai9bAnEtQ\na3ArVWhIsFQVn4JcP5cN2ZwFEoDUR0xSuk0HCBQV0Q9yp2s7ItkjAnd8ZjCa\nI0Pzr0teihsfgNfeDkM8NaZSRc3Y+2umobzgf5BHKSBxHq3geqZMpgj2yLtR\nE0TwwFQ7Z1HHj9LKaGJzqrGURLDB3f8pbxe29/77eFwQJRGzL0ca+GBc5ss9\nm8wiiJXH+o+DtqIMbQannjqsRDCMNUnXmhvQASaov4Yd8skQygyTAbf/nCK6\n5F0t0AaNBSw7i5ygpsNl1nTIeyMRvQF1+lGlhUY9rCCdzlRiqbd9zkw4jHj2\nxmYds6+FUwHob1YmPPuGJbMpUtEX66wAPgVnfQo3zd3A/nFM+woU5wgzvYpR\nUImX0Um9wevgwM3IEoNplq/vCMOqQW/64OEL/vf/MA5uaTkmN2hfvJvTC3X7\nPFvjcECh6CeJWhYQwLzN95Jl3fRye0nSVdcQerTbp4RBCUDZLxE+O7tbStAh\nDw0gQtqhEhWp69KQpScBgnEtsdHaAVySt+8zqg/Rdy+lWmoH94yUG2Gh5JUL\nFEttNup99u9WQnKb5Vv13+Nz4ubef/UowT/HYk0ahtSneoM2etEnAY2QFRd6\nDl61\r\n=t8Pa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.12a109680.0_1595458969834_0.6293856030471803","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8c41e94e6c2f5fe7c602c77ccbb4df5e611d575","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.bbd06696e.0.tgz","fileCount":61,"integrity":"sha512-vLG+eRbGVDGGftj/awaGkPOAu8lLZNvSbO9fLzfJmOGEZig+Dj299PSuIs9wMxI2NmXKaLmvlM3zZZC98BzsXQ==","signatures":[{"sig":"MEUCIFsM6UbbccHdelvTzseGA+cWzs10kRp70LUR7hqk5ezYAiEAjz9uLDcjScQb1z7ssY9+qH9KKima7SxqnrfHwx2Md5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNEvCRA9TVsSAnZWagAAtA0P+wU3M2jwv29hkrWl9GCD\neKIJCEbxiuT9XSD3bBIMYZu5IH+rHUb14OW3ltghwF3EnNeWZgQK/T0W3Afs\nSsZC3ZN2uAIJjginek8MnqgIdvr9ze0p+pnKVoVDrlCKr6g6ZLF4FOUW3cMk\nuWawa12B+jhCN4dCK1dr9LhHw2pXjqndR5/+uSgSDgd8S+iUVLzHOJO+v1Op\nOSs7AvCc/e7w3Iww0zXhGn+Xapb4OOpG2KPuLEW73GlBju0iT1vS5FM7/Pm5\nY/qf8hHNRhZN0zCzNnwhZPd4leWe5/z1Y7Uw/WwPkIcWLO9pQ5dJ5VP4waGJ\nLuLRmNpSfdjuERn5HX/uwh9+hA7E1KQaYrm6jDZH7yI+TPaa/2u/1aa4EEN7\nabiyJ8uTUxug+BeemfH9bpr7Q7mitp32vUpqIr92IclzxKZg+3c7xCUnZpXw\nSRVTDvZArjh67nk4WQSLZp/yAK6kaygIikiFCaHPx7TG+aHD9hovbn36nDWN\n1tJvvFvieZ6nhc3fJNfi4mJlDGllTLEyQKSgpgBU+Ng7bEzpTkS8gKLweuG9\nS8r68ZKT/6fl3+Z8QRqxHmWbL/tlr9qqOlN7pYGXDTC9+V3HF/AiQw3Wyvxs\nrhu4B2It2iYPWStbylun7NkKbGm0DebJrQUgiR5CRFgAFjsL556gWdA4V3Ti\nvGb0\r\n=VQzR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.bbd06696e.0_1595461935463_0.5465521871884762","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad66e5b1f3c3a0dad3861cf90b81db5acec75755","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4951e7651.0.tgz","fileCount":61,"integrity":"sha512-L/jnkhuWZxoYArTHVjF164NxBoMQvDPXVnHO5b0fzLyLaKHO0A4vPBnTUaHps+p7VldnMRpWL9tbaumgzgw/JA==","signatures":[{"sig":"MEYCIQCMivaqHmDhUK69vwwFSRfRP35gZfRJR884qaqDTQ2IJgIhAK15ctEIIPczem1OvxsI4GZI3/cmrob1S4DPfham/9gJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyDCRA9TVsSAnZWagAAlRcP/2N4HJ9DoaMEF2gzUoXJ\n4ft/xTwPMVBVdvnnbSFC5k6JPBXiHj3T1XsEIqYEgOIFv5mHSB7DuXTuP4kz\n9JKHL89d6sT4BRHphR01SNmaPtW0tRpAZ5ARhwxfypa0UfgFeDf42bMHmqBl\nvLnpdkia3bwBpMwN5PePqQHjev02pTQvepg5zQTn/Rfgc/FrUA82F7VaXHEn\n6kUoE/eVkK4fDYPjelwPrQUFGv+uoI0i5kTVRbJ3p7FTVFAnNbSJdIZ4UcrY\n8kAVXD8ApMvpzjhxloQt5T382KhxIVz54mXTcj2mfKlh7j+AMjWik9zifFrF\nUplBTTGPPMY0C2JLXvS4gxbuWcK4iZjCXmos8FqWqMD0tuByihE3E3DeXTW8\n8ka6YrjtnAQNnTpSATMsvsdxNy+f5pDbJQBEjCPSVGuwqcYmx8jq67MVGVQg\n2aDdhoIciC5HtO9ryrOn1e/ULeVHkGD1ipKn13maRXrBK3SJ8xERIyYMe2jf\niVI/qJ6LKZpPKe4OGcEU0RhNQKRI7sgD/0DNO6aKXq+iybzYKVKFzinxAG1l\nISCi5HWzMc72POAw3gojx3lQGD+k3ar0h1tQS/MODf/8CicXDHkHLwc95BmO\n069p1O+LbJrO1B1d8zIKB2vhGwEOCG7mxBZWiXcOMtgikcnAItq8lb/oZXk3\nN9MW\r\n=u8kD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.4951e7651.0_1595468930994_0.42750792725826736","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/segmented-button","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f05ce889b72b683ec281728be16b54cfeab0ae5b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.75deebbef.0.tgz","fileCount":61,"integrity":"sha512-XaoQvJmlD4K3h5I8RfWgv6v1uQ5TKoau1AZb1CMU6Lc2tscCyWJJ5gkPgb1trMci+zQ5HdcWmalVOYCAmed6cw==","signatures":[{"sig":"MEUCIETbKWqtSWczJ1fMHPOuMuwyWGNEHQXpn0LAcopiWHbRAiEAxWjFfwloFm89xQA+Jg2X2Hb9Rf2m0Uc0vPZceqIuFIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGcynCRA9TVsSAnZWagAAKHkP/A0dhtT+ADrnihn3lM3y\n32e9NPcIAqIpn6b2dlz35QNbIkj7Wlu/nEDH2sQZEALKFOo/DpxCzBOHVCli\ni9bGz57FT1d7eW7r0sERIfcdNCaon6JkiqVehyFF+azbrmeDRTtwaTpe0GoN\n+whJq6DWIMhY7dp8ZxVUsxU0vjcNbT2tzZKzev19eLOHA67lia2CKb9TVd8i\nP9Lti9FBE44NFsnfQrbXVFFfteFIkB4AiVvpumNzK594Ej6QYD43/gGlTU4I\nmY9Eezr4lt+86jtvHzKahptbRoukYKeagbpm6v3MLaZHH+XUObBZqFE1ygF0\n3rzu3YM/Oc7nA0dms2elib4HuQ6leovQ9sQvMbydoIS0McCGjjv9X01/EDcl\nM6/4TVkvgskUvx3+TGmFuQlkkPjNHyRfovnFUAcLhLXSEA0/gIyGkbjuOuaR\nnwwW99Dn7GUIsJV/nIUKU7tsZ94CbfOY/b5Xkpr8XGZdYqPgEFrDyzq2juL4\ndbd4/U5ocvWTkFnTho0WYzBp+uY+FedscOaEIxMxxMXLY0XDhHfyT+TGF9B/\nnDbSETFNAoqSo1pNEglv4UWFcR/gBDB1xvkpUAu29enoaZZW++rHnwUoxjJa\nG3Xh20jbTysEIzqBSxRUJhawqoZ5yiLkLd5lwaQ92cfzY6xEkdqJ1O9sxcx7\nuDq0\r\n=aqoL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.75deebbef.0_1595526310809_0.31425070958421264","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/segmented-button","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"301007776dc361d67bef20994c35e1f44b42e9b3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.95aff33ee.0.tgz","fileCount":61,"integrity":"sha512-YPXI10QBpEOY9mDAfeTlBSYXKPSjZ/4ldFzTDHWtvFokfEAY1LYLP80qDwfC6khgqwo4x/DQb+5iDhm0HOCh5A==","signatures":[{"sig":"MEUCIAX0X+BJNzwKcoCZhWpNjFzKZC/tWooFjuv1RI7hm1pFAiEA+08wlFu9XRow4ugJDMzVglCyOgH2hP/FOX2xCq/YHFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdsVCRA9TVsSAnZWagAAdQIP/RFQ5twLKDfxdMmNLQBf\nVFBA2/GdK2zZBL2Dz2mi8eR/6z8g9j2MT54EGQ5PrLduAzk9sef2VQvtnfje\nDVoUtr94AIMtWSoQG8Jpaognm2xZ6FNqSTzg+36FpA8svk3WNSB+QU5Ui7H0\n+5gEhfVCLVsaAX8d1LSU7kXsgblnojF8BXr6aRD+1lr2VpB1YaRO396q25EW\n6Wl7hCCrhZjZamXsB50O0hTVJ7UBvSIdUHZdAQx0eOf9WO/YGPZjl3bV10ST\npcz3y/UlnjwJvilTn95prs7rrkkiN0BhsY+1ROyiyCgefQHvAJnwkxImHhEO\nNfHvibN0ATJI4lbPQtOhnS8Ng1reXXs3y/oZqpqcGhObcQypv+J9jqyZCisj\nbUnyBXzqzG3ZFMSxsG/0gXk7+22dcwSDElkQOWtl5V2q41P3dXPYKt9PlN2s\ng4iR+HQ6V9E+YWYThB6jaazl784h/UGB2vvn1o+ggDvsxYdC3E2tOVDJKo1h\niqSnh+65mrbO5jb7oSJ5oAAo4lgY5lmpjtBY3R97ph2Fcrn7oKA55Xp72CEF\niAS9gtXuikYprDNcFXFTthTUodYpjqGQd6CgJg0WG58Qyev32n/OO7ALwscI\nIM3NMuG/gXPY1637hny/njh42ylgZYf+L0iHZrbjZWVMg3JprhfTKypqCyz8\nO2Ie\r\n=GhZD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.95aff33ee.0_1595530004703_0.829629685567183","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/segmented-button","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be91181d8bbb6069c6c18f9778b17ec73c363097","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.9d9f47473.0.tgz","fileCount":61,"integrity":"sha512-1eCN6iWLaCcFRo5+FGWefpoqAQPvbf90sfalZ/fflVEWL3uF3GLhJGhBckT90B/VxbK5WLSXotCtZ+cJ40l31Q==","signatures":[{"sig":"MEQCICtkK71iq1lY4lMoGSavWjwQo1H8pX9IKu5MxOgAbE8fAiBzbomK2Oc6xgP5a5MYC5f/oxU5OIKhb1r7ByBGEnO1sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevJCRA9TVsSAnZWagAACCgQAKAMOt9wR1btdsfzt7Bf\nt29a7KKbX/69/6vtG2nHyicjLexvcd6Ze+GAVMEg3r+wju1kVMPUSsPyzfCZ\nFoxxT29uX5SqJviQkh7+CUb+nf5wnTX1haYME6PoykRBQGaWxNQ4PeoRz2wO\nWT738WHWN5zQm18hXpK3d7pLZ3WcFfPm2Hj27fyWE3ZCVFnRn9zaTakdb+lH\naax99ZmJMYmuXMQlkAXc0pPhI3xAHod1UNKGp/BrF8Hq9Ml2e9GOmaKEfy5D\ntgxiVC7HrkIRLI+4b1QTgN68Hof9HiZdlsKReofn1zcWctoFjpUt8gEgxbu1\nlEftCDs9isyZiyZvCUuP2rrSDScldEqj/0vwI6mRy4v0xE8hKGfz9Xymhs9s\nGoGoxT8X3FdCpAMWtdXTvPOuuVsIqKwchIjnW5+ogBLk3MpTMMLfgwXfKqiO\nQ0dStvyd5GQq7KkjntHOnwGWtzf/i4uEOgo0jFqg2DNL85a+rCB4M0OzuXgB\nWTeyxaZhkrkn77vpjmjR7It4uFzyausdzxOGDPPQ1hJsR8sJFghts3tqB5Sb\n2MxowCnxImbXERhx4erltxZcYwH52dVO3JmpgtI8jMbVkrdI4JkVPl9hV2m3\n/lftj70ICP/PYvfc7/nYJMOHK7P0btNl6MlCb5arIB4hxwYzrqLmnfqdsXhR\neorp\r\n=BsH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.9d9f47473.0_1595534281427_0.49176611382292146","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/segmented-button","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d7eeb9591d3e6a617e5ae73db3d3b5a93f2fe159","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.00dfbf6be.0.tgz","fileCount":61,"integrity":"sha512-djRddtIorahgosb9UxzfA8Gf9IbuaXojkU2/iZpY50Q9VXw4B+CFUBAGLmeXAGRgjhQBSeIGCLrb7wRlxf+TFw==","signatures":[{"sig":"MEUCIEgRU3tUIT0SgynLgRGsz9fek1UKLCrVXhTLN4TQME+rAiEA0pLmZN11PZOBJjTBbEBhwcE/InzRLri+mCuN0Ljk/1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfoLCRA9TVsSAnZWagAA+poP+wWIppxqbePuwxsXrc0F\nuNmCcXWoChuXZlchRuCt6SPnOd0KxFEMlcopk1ygCfMsp6uVl+8sbQDXEBfs\nKRfSlkt7GJfoc0i9wpoDXszIzUlkdJee44JmlHhcJ8LQXHhv77TTzRq0X6ZK\nRhbvn6Fmrt1f86W+xpe+23GZtOYYSvmFxfdKcxAqp38mKdeBZNg31aKHHc8A\n0bFdDAQDVBlKwacCR+THZQtXvXyKB2dJ8+XT1/1e02cC7mLCwEtovGFtEbqg\nmrY3mSkMKC3KJTXH/NjJpvVIUYEwHCWrcIoPnrKqFY+ZaZ7MUtu3FOPnNVUt\njl7DGgPAgxicSBl4ilkUoFzNRkcBzkmJmWGBPIdmv6bhnfVtimf9yTGRo4+p\nsZUaZGWFm5lHDow97nTbEJpFAYlQNr1mHj1/fbbcrlkGDhfww+VK5dqbpI55\nZI34PH1Jqr0/MrYjgWpITjvLrzoi71TZ+TBcGk+LqkHnaP3OjtNLLzDf7Ud7\nZGBMB6koOaaLjAntxJnteKE2xbE0DNqHXKbd0skOqknoH7ZxyWAIN69U47ql\nP5PDJOV2GziA/9yLGTH2lkKxgmMl/p2VFWp4w6hf4mzl9X/8q4hHc+PdA5V0\n/M+UTRku1bWTc/v8jAn7DM8QHiqkjznlRpJ8yQWW0QkQSC3IAAR3AEFQ23na\n4oH3\r\n=/hSm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.00dfbf6be.0_1595537930879_0.31581383698218213","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ad82a5294b96e83a15a82d83db9ddb5f5f28e7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b87e522d2.0.tgz","fileCount":61,"integrity":"sha512-XeGRZJXC9pQo4wpa5NWBbjgwDZjZ3O0duS/3WSv2N5qI4tXin90VowLd+ppMUVf7tog33SmY6sn0879foHrTMA==","signatures":[{"sig":"MEYCIQC2JektZLRAoH53VqCLoV50SNSkxjVp1mg6fRPD1sUhxwIhAOe6CECyAVtU03xDQUWrn1quO5FzHn+OsJHkc6G/QPmv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf+3CRA9TVsSAnZWagAALb8P/3BPR8jNgpakRJP30vV4\nkiI3DQI4u6Da6ElWQAEcqzhAULO88v0U+1Febrv5rLZbLoyFUBr3CHTwLw2I\nJkvXFzESgmkuCKHi9I/PF65VYpMDapfCVQgqtQfs8wRpaBH9ch6eLkJb8/a3\nbxhxQQsDYJGcJm3lk2cT/+pLVr8MaqqE9VU5Kf6zVgEmOEf/zmpmJ/sMmAvu\nX52qQTT53BWguw5Xt8BsIemGUebUoYt+FX8aB8XJxxBP3IYDa+y2aOLTsQUQ\nAQGv1Isba1nPOS9cO2WkAx6ycXpUMmlEJLUyKnF8aBqNECNO/heirGVEUehn\nTtaTblbZaEcVwZa0rdevSsqGziqG7my4aHwm9B1k0tSpsyQtRsZ088i3lBeu\nj2JtArbHUkZuy+/nBA0GxzS+LccerGFDhEwrwiGWXVUjbWnYlLtg7083PYsN\nygoB7iVOx0kdoU4Bh7vzPz/vM58WCHH3k06jbaZ66XWfZjnqpR8j0r7E4tJv\nGWcJt78GLBY+C7wRZnFYBnI7V5HYnKiZF/UIKQBhAd4DuqOklNSoz3FlUf5L\niTLcDu8iuGLJEpNnBEyaw288bFWR5A0Rcq9wX8aCp8CCTlyIYKgtcFnPACak\nfSflIr03WrjA2RJJxTyUSKqKuDc9JqSwaEm5QidmynxUo74BHjxVGuhlkYH5\n1ien\r\n=L7rW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b87e522d2.0_1595539383365_0.762026266530849","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"98f93cee8ba77eaaf2bee6a5cf9e797b5785c45d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5b3e150e5.0.tgz","fileCount":61,"integrity":"sha512-htEHEiPXKxcW77AQlg7amnYevMkBTiWIYpdjEVRlNjT7qf346Y4R0sVUlfTZoeF5jM3AiJ9bkqKz2fRKU5iZFg==","signatures":[{"sig":"MEYCIQDQlz9OTXBNeNnmu7INOP1qnwGHPoFAiESLQqrCL2XvgQIhALkJwLI6v5FtgQqXu9qL8oaPRvwA5Y2/pui6Qi89GDuY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgFCRA9TVsSAnZWagAA8F8P/3zqSM0trw8ySwyy7MPL\nnJdQDldsGBGh7XGZtojCV3dOEdBjdWckiufqf6yYlu3zFTS8AGsDSOeB9BOp\njUcugXtRLVE2wW+LVeq/hKYF4hUsxLehCsuBhYSLKwoMbea3HS5wbSKVWOg1\nRyeYBFY2Tt1Qe3jWBMpjTh69Lc53ilcPHQJwC2OaNAyhIKEUV+ShTl8yW1wF\nv7S50XkLWmVMWXxxMZVTi+Cwlpuirg0z/XBTBgom4nxiSNuXMhx51DWWXG4R\nOCp84SrB2Xl03Vxo6JCRC3xhbrFUQGoxCAHavQpQdmyfH/AExKGg0BP6BvCr\nrrSPHO6hB/5D6Z7Y3Y48xO28L+cCKa9FGgEJyF4UF18B2QcPvAr/bzm5QtuA\nicN+gfUqSDLvKPAgRNkZ8qrOn5GaTCqtBQuKspNZ1NBtvh8m7d4Kag4YabcQ\nLssWwPv8+k+WxlUvkuDTMBpZRWzpqWWiJEynVhBdwWU4yB8dG31Ga/ggGv22\nVI37VEs6qErn6h9jL1NdMhwlVHsumybR35wt0P/F23PFtucc/Idbc7N22OIC\nFpdGWpcWrondPb/08W/NNUalUzCoUm1M6aL1VZf/0q6nNDtKkaiKaeqAPygL\n5384CQcoFucxbfmHCnbJ572I6X/eGgpoftAwhw68XYrJU5KN4ABIlSwO/wma\n9Ky1\r\n=/a4d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5b3e150e5.0_1595553796760_0.6750732101235835","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e176494d0b179118410a91126cdf2b9f0beea012","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f0ae11786.0.tgz","fileCount":61,"integrity":"sha512-U7D0PSpQfCsJtk5MSG/mRsEyljYBP0fpVp4kp7/mii2kIfllC9PcDLghL0O3l/TOc3gQu03nhj0PadvuqzBDqw==","signatures":[{"sig":"MEQCICfnKDaEnEpJePPZY6fnsRXoOmrPsJFPau1x4j0mnLoIAiASeanoADU8uENmKMk14E2o0EkT9aPA3QY4Qw2BfkSIHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjylCRA9TVsSAnZWagAAGU8P/0CVOpCb77UaXCejJEyU\nva19WFpCqNcnVCY3/E1oN5giMnufejte9NMDRJ4kpSmSvqFuv9D4ToHyPnIm\nVg7aPAPpwG23mCT8LZ6JrwS6z/Ziqvc3OeEMdfxYHAMaKIrlCFzDYK2Uj5B/\n3SFGbwR9g87jJXnXuedFxGwPCMuFjjwtLiqw+vMfuHoiyJ+x+y6WM8XO7G3n\nCyKkEBYAVIcpcJDqOQwP5fLJyz7Hd0ImfVH35h1yxJNXWuKrLSHKGkubI9+x\nZW1J/MG0SJYLQQwK+xAYBalsg0WqXMN5EBhZ0i7tYwZn1tgaUB+Gd7l2rDsF\nsSMGDpcW/5IgzHD9tVuWzNh169QNYHynzPmdANdAzENSNILTMf8n3knCLHLA\nzZf+EFvadg5VTnh+bJqvJVmJ1BsWMaNOtGEDP7J8yUC1+FB2UmEm4f/ZtMGc\nK9yK4T7yonlNYy7Y4a1yFS+2Bw67Kcv/Yd6KhGBtRr3isfO+mRjqo0cuvCK9\nfCfF5bzpqHRoYg0zQhU0qO17JX0vR5/J4iz1QaMiN5woAhSYhDTmxexk+7GO\nREfylL0NVihoUhtXy0yTja7IDwA/oa8AbM2hcKaBhhieGy2VWV1cLLmhk9ho\nvbFuyPpq7/+E0zu4xCEW1BL4BL6w3f/1HQkrGpqURCVaYvJ+/5BVJ7b/8CF7\nDJZ9\r\n=o+K0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f0ae11786.0_1595554981229_0.5909471230241972","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"437e1f289a301273917f599b3b8aaa4500fb90d8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":61,"integrity":"sha512-U/a1A0/tEFstLnUJN7By7GUSuh41wcReNH7fYeJtTi9gdxC8EY0zUn/e380x5lVc6HB7Qpr+h9Ugzw4Ma44Dgg==","signatures":[{"sig":"MEUCIGkwSKuOnKM9p5tH29Jp/K956xQz1HyupxknBS67PHgfAiEAgIl8328Gmff2N30vEmNXrHZ0uI8wHUPc5iJD333QNyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMBCRA9TVsSAnZWagAAFPQP/2h/uHuzVkV8/KJDGw5u\nRTluBz20k0iFUuQOTsmAYi6A1BLznKfbDSyxw2xQd3e5rhNI8Qc/DtMPaHt6\nd95Mk0B+j6yX3ogmaNpxK8vHSkfYQSDa/sORI1sAVM9FJG3DuzF8wKQpDlRv\ni6+oAzEUSzMl5k7T/bNJiAcWk5l7oean4/QY0bs4zxD1+gO2bonqJL+2LLtm\nPj3zmnm6lui6naM774GM86zz436wNyc8pIfjOQUB7SJjbJmUCQ1gXtfZ6lpX\n+oFQDAC3pwdk4YrSXOkJYuBSmSzbfG2nrKLYcDIYBjfZvMRI2/Vcp30x3g3J\n4JADCN7xaPENoPKCtPqcjJnseTDExyPx9uAc1bG4XCTAxAwR2QF5+Z7P207u\nd8IGOF3kWeONf7IBCUc9KzS70MBOEydFVNoSG2fmzA28A4ut9idceuWqcmiD\nCDOoLX+7qGLsaBuyL2PvLrPDeRcDZi//jRajDO4bH6b6/sBdk97zjQxGpz0C\nLNi1DkTDpIQrdwIKx0dK+QLLEpb4tOPpcGis/G6ADM5pR7UYO62zetzh9jnz\nTPxCMK++VEBYJ6kuevD4WnUJDBBy9S4iXbmq0Xfe1xOixyvDe1n5FiOFgfxC\nI5OhkdG+VqHJ/9uKvAMEmTGYH9bZhJvnRZJ6DiyoT5HoXAUt/yfdcFE7ng6T\nRn43\r\n=IOmJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fb4ee66c0.0_1595556608914_0.9170389014415719","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c24ce278c30a9d8a5dd9133ff4307dd1fd5e4e53","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5511e0aeb.0.tgz","fileCount":61,"integrity":"sha512-s+U0thesk5u3zPsZe71z1w4P9sqGMlBc1K0U+Fm0h5HYdQHNy7SZSe9Dcdy46XWMjiT5MegRAilziO1fAZ72kA==","signatures":[{"sig":"MEQCIBkDJc/VlGNNFu4BxO6QSjaySryBF3PtuG70axqkM2tlAiBglc62hOFW1J/WqmD+4MzrhxzRJu3aHprZMfFtEz7lrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxKvCRA9TVsSAnZWagAAWHEP/3kYnb7zjCT5zgOYZjNi\nLAIq8toucmotinHfDptQD3BBchPhAkZJ1COabHlP48BOXk6KV3FTXGrdhosa\n/Mpr++Iu8DaHMNLLpCK7ZfeeKMtq2kxZ9fV9iGumS8qBEH3lSCAcnwhRoPK2\niPnbg9PjC2Td1R5JO0CaQAV74qYuqv2+sIwRe3f/B+J6kQmuJ5BM75xNlz5I\nml1HJVyysXOrUtAboQ5+/iS9gFLKJBhT4iOO4eDvhpKq1+U38fANQ4dCfPyK\noHepjcHLD3TM50FqmN9YlaHsNaeKOGRfiuqi1QNtzVYuen4pJdJ/Oi7b1G5I\nTD/kXyX8G60lm3GJD0dMWKrK/lduhM5Pbrk4hnDXscec8EATrbtb1u9BG+sV\nxIxaUiIwDf/TIaT8KtK1EfUxoYS+870Xxg477LTiYjQxA/e3KOL0+LrCAC5U\nwmkshI8QAifWQR/KqO2Vw8wpeASizrGs7oRFXExsx8WbkLL3TWvYZfz8AgTR\nsHZ0pwQPSoiN6Wx7Jj39IgDeT1Hn3D5IeBfL7d1NWGv3RyTn9qBdBkc4TPEx\nYomCfw9p2c6f0q6Y/Ct7nTiVxQrspV/o+d9mY9czf4b8Gfv3jbCw9Eip2X0A\n9T/9GaY6Ppuu/DZ89H/7EEzbdaS3y5IH01jHy12gkbTrCSxKPcPmI/qu73G2\nAqvM\r\n=82AT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5511e0aeb.0_1595609775213_0.39209956636802445","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/segmented-button","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5d97e31f4681245fb4c29e80de90109a5f6242f5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.8388a9bf6.0.tgz","fileCount":61,"integrity":"sha512-zHlhkVc+Piai8FvMJhn6t2qMhemPcHz1ArtHkUIJogeG+kKRtlME8F4a8GGD6+CqCLijYraTWWyEBphR2xA57w==","signatures":[{"sig":"MEUCIQDemkXfxOtdkxiiT8OkZrN+VCcEkoMLyGy81L+10n7vmQIgQtXE4h6YYjbFK2z+fhGqaVes/l5t648RTz2/6N72n6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0CqCRA9TVsSAnZWagAAEFcP+gNN3JIrcmpzDa0chEu2\nkBkQQ3kJ45Ll4+cu8/wJX7PuiaLCMlRy/U/LxpI+I3snzVjYQzfrFGRoEFfZ\nlpfT28uXgzrMgRX6bpQN4RTOlHOsXHmxNvKk1CfIPT2TewC3tjmxwI+hJsar\nPa0TnJ1vzMnKvcdZ8FSYnxjElXMdyH3l6UaxRNcSYV8Stp4d+N5isD9RBY7Y\nC6wE55b5tNbH5nzWzOZN3ij9Vh/a+wulKrgwDvyNgLexdyqaoQIQ/xuk5J51\ntuLu/fJU6xjAIzNw0ok5ULvlFpcf7yqgcQnaGmkmaAA6QQOVgB+qh6vTtPeG\nppt01I8WB2x/AJKfRWfqj89XNPrJiqEmEA16H501osqKIjG7RRMzMRW46eaz\njPyDOrKpTnikcLmCrYNW+pcHfmOvKwFl4W41TmV9zDxUXaduHcHYgxcqh/FS\nA7JBRyPDsrjPmxuGjjBjTnObTwG1+Y5w2v0+VZImZPSqz501oyBS0lBWFqex\n8YyiAs/5ety7jU0UYuCBXNT2HJ1Jl6Z6se+dJ56EvJqojswxA592tvaL884d\nd3CniaY33086Oir4v27m3EARobY+RCKJeTOBNxUKMs1TPh72O12AXobDtUkx\nqbB8r65E8BPuhY2ih4wWbu1NE1IvQAo9kxlmd7ZsIO3GUEupLuK18rNnG3MH\nJqoJ\r\n=6tnC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.8388a9bf6.0_1595621545805_0.861444640530955","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"58e7b028aba3ca4f45d688601a1fdbaa6213ea93","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ac405eae1.0.tgz","fileCount":64,"integrity":"sha512-gMolf1DuXK3BmGpOowDg1p/OigqnWr9mRruTXyhzy4t6Et3+vcOZrjqX9urbA/3ji38dK+i3NGtcDm5zKxh//Q==","signatures":[{"sig":"MEYCIQD1tT6pp3gGXfO1P6uRGnuadfRVohtUDhOnAT3PNuFP4wIhAKZ5hk4f1m5aMLAeybOmIvb9YYeLtCocxkw27soFSPml","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":173647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2ACRA9TVsSAnZWagAAYmMP/iEsYAGAtX7tb5LXFZ7q\nmpa2cowd9A2YvmKhuY0XOt7Ha6gkYxtIhiI4lCLUCubmuJim0OckyiWIJHBx\nKi5IqXVA8dCXHPG2dFABgso7P3iYHNV7QK+40/7JD4DgsOJzoWQC8IZ1MPcy\nWd/NIbqcqSGma9A4Hs/ZuDpM1Uv3tV95Xo2dbpzSZrvsfx1GUm5whMIDVpkJ\nBV7NgtxZGPVJr8fQcUSEGPvBMNNqHGj7vskCD6nfIxdOzxAppWfkQ+69KlLV\n1rddsTdBZHiWaupRVDfD/bcp9jVE9hkUMVuAiyszukKFi9iCbzPCr6NaZoDa\nk2M1aT+jJiPaPaM6CJJQ/8bG5sNXEeR0l9w8nzhPr9sNXUGFrkwNLk4ykscJ\nI7+rh1s1H2qxtYuuWuS/+0KlaiqC7Ez4cTHEXho1qOYkLEf4hdPxSr8rQv+y\nl29Cq+Mb+wdrVrmyNs2Q5c6OevIwmARVe4Oe9BWmX9ELyaj9DR6JTDAwBkt0\nyvWN9hkaCff6N/+bkYyIZpNk2FTiLe4c/EoZ+z8vfgjZRPAN4GaI3EUjC1ft\nml8SbA/Co37j2Kxcrl/2C3ZRmfSGVkpU3wqNc7vBgMMRueoIlfzkTY0Qm5SD\nrovU31ojECapt8gifJHO4xte1H2hsLWTeTqS6g/N+HvEPNtXG8b7TBKyw2I9\ngpeE\r\n=jd5c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ac405eae1.0_1595862399618_0.5007549734307573","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0334ba130579f2c4ad7945bb6fe0022280362b85","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.75553837c.0.tgz","fileCount":68,"integrity":"sha512-jAI9MerRKNHgpm6ff8Qqbrq18ni9zwlWSAFcMthrW26bmGtU97KKxjzDckKrMgtdNs4HRCKInyxRrkIrzNBDXA==","signatures":[{"sig":"MEUCIQC8oP/fd4GztZGu1eTYkVK1UTQ0KjKN0I3l1/7qgAvfEwIgQNl1WeRRo7d5YUfKuFYCxRl5M839VS0l+Ewn/D9rgKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":249990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7vCRA9TVsSAnZWagAA5c0P/RQ39c0rrvwNzpYSr3i+\nh982FhadIfU4emnFPhZM0krhEHdZuTjksbbtr3CuF9zA4IgTSuFCIRD356fJ\nnt7Cy1mqDAq1K9baB5y1qhxxe8TGWnhdTtMjbpUl022Rw8jKX6v4hiCsGNnh\nGj6Mi1xqCz5MPgGtGrpDhLGQSe9JfwxqX9B4MpbFOeMwA49KYf8FuoLr9Kew\nhj06fGFJzAahx5wig1x4FCwXwmyqy+/1gCjBcFHognX3Udf4me7WOhCiWlfK\ny6k3rF6gobxH0bQbHsScE4hSlNqCngpLBIte1aCOwtnBiNlhfe6OYk7wwWkh\n67xbb9EBbjQ9rYvA5sv32xEfb8q4Nr/MDXKos53pwvAlLrGGcPxj0OorGr6E\n2NaM3M8zTwmRbbOLJwhDWza3cRwPHWEiVLBXfyTUwOl0+Ngu07+9hNtcYYt6\nNHhGLDQ5sRYSmlSzlGCEhVxTAvq2lwmbe7AMM92vjgNMNapwFYbxX2HEkl3D\n1itwNRufQbs4FRhYWywK2jRrJWPxogierycEmJxZL0A7N+9u82bscL4Voqcg\n8/af9N4q+tpWgmPB96LW24zhJYkly8FeOPQnPSjJI1C7GbExjU+Y7rntWedn\nHhUprWUmqBJ0N1g9kQeWcwRX8+lNfIo1Kc8yHwkNcBCnEjdqLP8qjiL8L2qL\noRAn\r\n=nXAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.75553837c.0_1595862766655_0.4953170895820127","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03038ab020058f74d8a40c79b221e27ea1a4283a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":68,"integrity":"sha512-/ayGpni1PDUpAFONZEWe9rpN9wFd5zWadzDOGLiuYxyCTPoqAp3xiq78aaHaphPA299o0esEyG5yoz1Z6wd/rA==","signatures":[{"sig":"MEYCIQD8BygNQdMDpOKp/basftlke5MQkR4endHuqX5e6LQpJAIhAOguhv5lCaDrcimpPIZavTviS/XwXDESXptCZf1QECoZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTtCRA9TVsSAnZWagAA+yMQAKFlGPAivFYSrZJZ9lQx\nKB5rqBB4jt7Ynyemmjd4fdKcfLnU2bGW8sga26S+pYsdlTDVrwKnwi6HindQ\n9SF9B11yMisAmA2Hwb2lPaxD3kSaLTVrWC4z9LgWDWlMPskRKI2sXZ3CkK3b\n/fge00j1Uu7do23vJlSHAgD2YLsG/leo8OFs6KjZ9a5QeAJoY7C7N8OMvVPL\n8FvkBGaA762+n8wBYS/4KVOVseFY7+XajK9GzPAAvprETvV2pO7QIeYUXhUC\neATcorVDnjSS4jvsf25yc0m7K6fSUbXyShY4NAXFXEmivTWnU7OPn4H2+mZn\nnnYN5dSfflzFQpCiqd+o8WHt47HgVO6+wQYQrzr2l7cOW6JcsKy9A7CrR2kN\n/g0ONcFfPvT+GWGqua8uQEZr9a/JtzkXKrXrMMjyy+E0oiG87G4H6aKWq08H\nkmH1Dkbn0eZpIFLaLLyiOY9NCYKTEZCJDhNupRuw6RvrV9jzrTZZn123Zqxu\n7iNcy51aqQOmhW8wpZl7ah9RW17Q6Dyp3iaTo5xL3bsd0xIBkKo8hQ/zasM/\n5stwApfdfuFOTsyU0GbfuRXTwtel68phyTqlhs+Yb4t8cgSoe+FXF3mmikzd\ngfo4lGte2jxPX1rmeUX18fSHxhsBbmE0tH5WBXrFIna/CLozFZU+8/ocHMJE\nsw5q\r\n=BGtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b96fbfc7a.0_1595864300653_0.2741102972962772","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/segmented-button","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5207bc86e0a4f4576708b31090244620e81bd64b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.61f1a8d85.0.tgz","fileCount":68,"integrity":"sha512-RyGqbqxOdTlbycj+Jm1xxMpvuhHJzFOp+ZI94gdMLOaeSq9JAhMDggaiAceXbMiCnZj2POMZgWYxqT8LAVB+XA==","signatures":[{"sig":"MEUCIQCrLDqq6PTldqQWYt3m59Me1m6OeuEyhp2V0wGLmb4UHwIgUpQgzOi+AjOWSeUIhviR1MU+nKxpJ7MTj3ywaOkIqCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcJCRA9TVsSAnZWagAAfCYP/0Pr0JHHlMzF3MrW+PPc\nyAUMSxsgC3MmesyktoqinJ05hlmCd3EZrb/EjvsweWLxGBAH4FqfrfRNRY6F\n+fUZn0DGCkCSkfza9GOlkbyeStVzS/Hhp23jQjxe5uxPofEOg525X2XPuPRo\n4LMLchfbuUKCCuBuTC1pSRyCnMJtHyWuoLWb07sLPkfFvXrnzSI8HrBFuk0D\nYAl0WEjnPQijOR2exuIFJMosaf9ANtcnHUJLTZRmLqWoMGHqcnHQ9z0O4I+V\n2aD8srqE9CFx7WoVyEZEQad686tj7Ltb2fTRb2q+09/UdvuQ9Wcts+2iE7nh\nNnAB0ejV1+QhBpyxJUh8aySf8lbR80Ot41/rVtjMV+PZGNxqU888utGr/2un\nI8kVpxK/giS/TmBGX8qTEKBtLtTN0etgLp5oqlGBhx9Ep1E3NghXw+R4m0BT\n+uW15s3WIdDdXh0zOFsLT6VUfV/8EG7NcBbpBrrqOk20UYZhsIAwPEde64pR\nSGGa++mBEcmLfydiljkqbRsFLSl/KRrWOM/7uWUEhxH+GK0P1ZHJ/kg4NRaI\niQNnmMp8VI7LSpXXJbtyY4mM3Mb0iI2hbXQ+tkv+b7sFVvwy+wg4a8ACKSvl\nuCeSZeK0DGpLkL6S8sXq0vPsVZwa7dmHFgrsrG9xWcZF+Jc+kUXS6EPYMMo5\nHLsg\r\n=y+Yv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.61f1a8d85.0_1595864841085_0.2538144208247777","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/segmented-button","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ede9a4adf17ab33cebc138a9adc6991e00d28a6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.81dc33377.0.tgz","fileCount":68,"integrity":"sha512-OFKgufEX13H5TgGxxX5BFN/dwN/VIh4uyVsm8OUNgFVIRtcUoM3lqNKGwW/n2qAuS29HlJs2B3NxqkDwhd4+kw==","signatures":[{"sig":"MEUCIQD43CU9CkJGAws95Jma6w82oeETEhCOC4I3snruGIfHGwIgAgZKhZvSH3SLu0cUIs/DJMRkPVW4z3FwdrjZqy4V3r8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvniCRA9TVsSAnZWagAA0sEP/2GB/Mzzjb5IjiQusaKl\n0OHtWnZ9EcFQZFjfVZ4hC9Tt2Oufw0r7EYiMbeiq4+/OmqHXOJXoMP6Jm+SI\nsQFxWlYKTdIGjrJX8E6YRJNOo78LkAo6KmFBlASScq9H/hrMNFHX4FufMM/p\nu3yC31qH++2q0N9G3qWMPFuBtpPmlnxeeQpncKC/LXPYo4+y8ZqD2tF/Gppk\n/XSKOLX+Mx3EXZ5Ft7E9qfYwiqRVltVUaDM4O1sEGK+S/RW321ETSM6Bmdzt\nGHa2OqSaxtfivPou1vvmUJVICanzkz4Ab10PdsDRsXMNfA3VFLVWppL+nk9a\n1L/yfdUuSr22QFYs5XlP7aW8gP0/wadwDgCt/rOIzOfJq3X87ns/D6kq44he\ntdscPKxbH8ITJ/RMg20M+7dkUECT0yAC+KYDGy4IUBcQX8lpiQm0GOMblMb0\nkDWkpqz2stF8LZC8uhqaW+VZQhG8l9hJh12nyrVSAAczpAD1gauPF/0s5tOU\nymrACkovDLjQkCW/HN4L2EqjAl23FcHwPsD+hhSsRK00rKPIkqPrdPDM20wn\nNonyPkiRrr+DziJsebfy01CQPraGJPdAyXuyXZa5d9zqzDZzR0n5VO6Kbbk+\n/9dyNCWHHScnNMcFk89lBNT1PpXF7F7J6ZmE0vaw7hCv7e9UxKrEx8EpOiW6\nL5Wd\r\n=ZTF9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.81dc33377.0_1595865569904_0.042244015174535576","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0d2a371ff8c19da30982f88ea5bbe1cdb7c15d00","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ffd9ede58.0.tgz","fileCount":68,"integrity":"sha512-v8kOWc9bZV79lmxMtGiu/jwkjhKhQYOgi2MfC8QZATTq9+91yQs75XH2OHJNDxjwGoQSIxNy9BlRtIdswWjucA==","signatures":[{"sig":"MEQCIBpwhogF8/jdppvinpRDUGBND+TsEoHHCQhgW3MKu4X3AiBdJ/UiqR41k3LEEFkqRe+qbGEW7L/itgkQ9XIvUDwhVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGwCRA9TVsSAnZWagAAam4P/0qWpQveZHhK6w2OlJAI\nAP+B44SULOg5+xcf80EwN0fKz2gl9v57eS1snrspCADXf2pQHFfrehSigLFO\ndNiuTPaXSDxMw84TsjZqn1X9F6lO5NKOUxW49Dye0bBInMz+x18We5AsoiuX\n9f3K+OMMGyw3A8+oBZR9OQ0/eAuG26uf3LLH4LSyo9QINbrjuIOKiNxKoZAb\no+rcdOyviDaKZ2eo7583oXnc4AOWTdpoL9SnOXPQ+aU9Y6iZJDq812DTwWP6\nAJR75ziGnjlYmuB92hzZim9qzYmteLGmjHYfPGIBW4mE073Y8UJLuLX1fNYV\nQBaYAduihqnClkjm9MJnoNVswmPlNtg5Uha2Pe4XJ5PKRK8z65WeUQH/xAKj\ngg9h4Pz0Z4CdLxeiW2RPs3PdxlRRNOISzSjwFRX+U5GjOCNLmTilk2g954jo\n1gb5fl7YflC3tss4e4z+DtTNDUp4gkQRPJDWzw8RXeEWehGp0CkxswHqy/Uk\n2z+sSxUJuUGS8hSJcmSDdRFGByKZdjmk+fJ7wHvxju+BPKGRULhx5m5kenlk\n9iffvT5iAyw30BZPyDfRk6/qjq7kywltfGVnpKM8TUrYyko3hzQ4zcMcxSFm\n+g1K9pTxWfKpZuAhje14wyaE+v8PQDomIFp6NVqFlyZQEwM1Zwv/8NwIRUAx\nb/XO\r\n=swtF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ffd9ede58.0_1595867568118_0.42254250445297004","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/segmented-button","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8eb7ed2bf5b939026c0c50685e4b7ed71694b042","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.52dc55acf.0.tgz","fileCount":68,"integrity":"sha512-oF9XZo5fVsmCm2+3P1pxv8Q/in13HcCcn4dpKYYjgR/mFyDnsybntCGBwGgq4w+grLKvukY3gbtY+0TsPIL1Fw==","signatures":[{"sig":"MEUCIBzePXIsfUfnq3nmFRH00Hs02To3l0lGUZ20JA9nbwBHAiEAoAaEQnd20wLjtXnuF5otydGZk3D8DpVTOIUpgulFW60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwofCRA9TVsSAnZWagAAat4P/1kLPQNXQNGKUhwLqq41\n01qxr6HN0tRpp67fx2Ggg3cUTc2YSA9L3s7XXxHnbearAWmHX+kxpkwTNP07\nd2WDOx2f6vqhFPPqf1EsiDeWBLrob1Bt/rmYnsuuY71Noj5egFDvoEFjiekq\nC6suXi+Jc/+SXL7sQ3lSCOON3h2KfDkpl00k0RCrkpfR0VjTRp/cDbFG+JGq\nbWeKlrAxf2+yXZJId29KIMs4zBwa/NqXtxeU+jaLZfY62Yzv7LHRusU+8UYu\nzMXeAYhQmZVtqRI1tzzuW13zUrNLOPWLO1M7Cg8qjXAf5VDY9CCIK06bS+VG\nVXZStazJdnARC3sgU4teQW26g6G5OOjZrNsQtMLHTf0Frp/R6nu8i5D5IxsV\nDQXJUBS2/bRvEkVObNcHXOsN5J0U4Z33paHJm6RuwMH9zCAdPPy57mUpxUK0\nd+VALhGSwcQAJMZWrJyWGtvYlXX8TnttSE/pcoBhv0c3gOOj/UCGwgsro5K3\nbCqSdNbwGV7Li9fyXlfDv7RRshM7vGRRxlHe1pBZXiTBXUMeNg2CV98rhl82\ncrg4tsb9DRBJgGw/j+u7Cau6/ueFGgv4fPPFvbO0gPQfNQ3wF7rKZPSxhAlV\nJ4kXy7iEGm6Ho7gIP52k91ppRQoLJbP++bHKHHb78UPqOb2xMvE9Z4pn63FZ\nKZ3V\r\n=JIYG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.52dc55acf.0_1595869726641_0.3356660266909801","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f2c3a87e7a23cadd4ff62cafaf38be036385f5f9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d4274ff05.0.tgz","fileCount":68,"integrity":"sha512-cVPD19/1jH87sAdabR7PNtP8OKJK2jJvF7A9LRM36rDlKHCHIhlW4aY+mb5sAR4pghqtRL1PjSBdrkMh+l4BNw==","signatures":[{"sig":"MEYCIQDovzL055WDiMSw3E7nPrEcrpOoazfcXSE26CKAyWie+QIhAMRGyAXF8YcHSXnS7ajT4QUfdUZvLSs/zPN+rmBBLEJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBQCRA9TVsSAnZWagAAT2EP/1PfdtxeQj10b85+k69w\nXtSQ7azrPWV48E6pWwgDTtY8g9qGOdg76nowgcxoSTtykjZrRXVJGJH2GDUI\n8cei6EEBN4VavsEmh8XHR7KAt2sBJlLSrO1mIbclfAQ8M4NEkatZeq3TzF9N\n6BAjsKGb7/74t5t+T2ch5g2jjhaNxnxFzeCVVaDkr97aflQzt6tUAW6nT4/u\nXbRXxORNXvgteJ7W2g58l4yKDpvPjBb80tAlMlF4bkyTIK44bmQoeKwuMQHP\nNSOETaGy+pUNlL0sEqYvKNRDcOOz/A2/j/R4ZDhWAA+Z9jbb/RWgl/45K96v\ndp8j9WzuPfS7zwLF2dlmopwJ1olza0yAztND/uBHwAxxuDtorP4zL940Mutr\nIv3ZuB2SEZOM6ghwO447tJhXI78/eoLkkPvUHV1FFUcO9V8XlPIMHNoZhQH8\n83JhEF/sbb0kCBtemGsG07Ww/la/RTf5J2kKCuwH9646+xkU5PaMF3sYkv4P\nk+1uIlowNVV/B20pCsbkAbS3xoWY0KNk+YsDw4O9XyiZed9xvf7JmY9MgO0t\nbIh3Df7it3SQy+Qp6v1Rcqts5I3byS85QZQKRf+OihGV9FKQbsbNF8rLW6YL\n5GyHGMtyO2VlRXWzaKaytiqUYnGAAWbCZogA8I9fjAAbxqeAFs65GhYLnt4T\neBDp\r\n=imUt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d4274ff05.0_1595879503898_0.788306030253497","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"09fd3eea8c1a0e5d2d917b9e55291bb726a4a143","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b82d0696d.0.tgz","fileCount":68,"integrity":"sha512-v9AwYSKGWBqeuS8abslzHh7bjoSnuRCdLfwODBo4DkilSVwK6KQePYuq24blV/eXDjt3psnMfRUh8t7/2tuVUQ==","signatures":[{"sig":"MEUCIQC3JURtgonvxOYah9+aiIz6Evap6/YTxIxuMdOelRJGcwIgUHChglqIkjZ6JbQdTPfgh6mDCd3+U2ubq2iWkOykG4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHgCRA9TVsSAnZWagAABbEP/0nFU72x2bBVjrCf8DYU\n5o2NH7agumTqUsJoonG3iApOprV5diGUivoO1wYGHEOnGr1TZarm0QirNJEQ\nJ+ZXSytFZstDzmsu9OW69sjCib2BlS9VbFoXNXxegdbXCS81M9bM2haqKq7m\no77TyD7leRx3/vEXyJvwA5GqQTg9RBrnCvEb+sdh7hVMKpakkCGQ9FsQaZvs\nLaxHjUEe1c1Gxc1Pjh1qGFp19hEJa2yvMwBnfzPbP1o3Rfd3yy2CKhKwq36x\nYyCPlhn+V0JQIlvTxmJP7SK88DLeloI2/vKmuxc6FKt+CY6NrFwM5lw7H5ul\naXilpFdxjbp6uAya5VjdT2QOM6oMBvgMWZQ8zNp18BqbE6kIPQLVa9LKFIHL\nmr4Mtx8m8Y4SMDKtH7WgVrlY3VTAvhX8ZlGGaImRwvx4RssLC36qVf4aolXp\nPh9C+ZFwmllApgpBNslkLlNEAjP1PoJ2BHRYoNQ5WAROfcwxmsgPscwGYOnd\n7yZYe0VpGghpLoT4BMOG/2Z0j3uBBlPsFCKfIGSLUOZ4ckiuXOb3aeUTrp01\nmvEHYt49rgebTyDumBFcq0m2nVNa15UmWxLrb4A0+WsCf/05WCMGoLD6R6DQ\nN+v5H4CyE/hRCnUvvNRiZja0jf6nx8hI+Si4+fuPNEmykIPiQrgwMcs2uZOx\nZioX\r\n=A0FY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b82d0696d.0_1595879903881_0.847235015448504","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2f2dda53b6eb91ccbfe1ab6a8b25940392b812f7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c2852000d.0.tgz","fileCount":68,"integrity":"sha512-CUa++05GB6TkARr5NaHwvPbUgSTCfLRzxoQRjlEa5ZTrpWmqs/ZteXreTrtZnM97hcb4+CSyG56zRHbkj+h+UA==","signatures":[{"sig":"MEMCH2GSLtPwVWBRN0iL8l21E8Z5j9LAUrVOxIdWqJ8NVfACIAZ2C/zWuXTRXRhRhVDbmYTZRNm0KS2EFy5uriknRnvx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/8CRA9TVsSAnZWagAA+FQP+gNbI+kQcl/jZjnxdUf1\n+QK3T3E62arqcQLdh2IYLHbCRj3JrGb6lT2rIB7urVyTJc9YvVcENi9k8T+t\nJlCbijijPhyNVrt+UQSXkFdNDAx/t3rxMT5j59KwONEGrlbYmL6vSb2fjrZL\n6+RQoPJf/cVwVvtl5yvcACncNSGh3kQrPnleoI01mSPYdB/PE1sCmkStBfnK\nCnukJnbeQK8IHWEkRoGqwOmfaagbcfTle8Lc82CUEumk5JSI4jlKHV/z0Vea\njp/aBv1LVTDoRzfOpvpjuwm9ZVCbfrn9x3IT8gNyaFPLzXMhOtyl7pWt0Rx2\nPKqcpfh9uFn+zssFp2s8EVMmeOQGt/Lns+9DE4nu7LXS/eydPyKGA+3rwFYo\nMBLUaYATtiChy/UgmhInSsOXEYkLvHynS4DZ8y3OP0g3n2tgVY5BL4ySrDaG\npG+fBMFn6Dgc4WYm43EUahX7+7vjmif30+vbc3r6zByR4zeJyGYA9KPfTy5I\n/ZfiO1bce0dUJKO94foaIjq4dfgbOFk0v0y172IyNF5a/QdhnUvsYSUz2Y2u\ntQiBjSsy6YwzBbjCC4wJBJuY7FXNDhzMCOQv94ndHC/B1BqqDdq5AT9YmylU\nnxHaAjXsV9Jmrqk/b6ys/vbz90UeRbhCRvzP0VEDS+EQ+fZNsTYhyxIAwQWu\n8JzP\r\n=IOVk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.c2852000d.0_1595883516131_0.15040015840579257","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2164b5439fff13d8aa465daf8e1437510c1adf29","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f86f83f54.0.tgz","fileCount":68,"integrity":"sha512-W7yqLtXN8CNabAmx76A+qFcm+X4ImOuW/MhUR7kQ0sghEBiRNgGtAfb5htOOpQVxXC3bOMGnarrMJtQw/zfVDw==","signatures":[{"sig":"MEUCIEzN7wMhh4hRghDjrx8+pMpbAKwyReh4r2iznMCosM6+AiEA80+enideWSh6tHDlwBWFHOX5V9czVUVwTeJzDgPxMP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00MCRA9TVsSAnZWagAAydgQAJmVEpfrfIC5D57VG2Jc\nqBq38CGb5Yg7OHXW+D63W5tkUSFtD2uLSC0R7QoRaq8qsukhLKjr6ws4r6VS\n0GSyAcw8+xYJbOp8yneHLsFH63qJpVA3CR+VCn63dBJ0P0EzD1L0F8ZWUNyf\nLxyr7HOEyu6EVgzBjmbs2iR1kuwWzz5MBdPc+Qy/642F9ORES79YzlaPhIrx\nhTO5/yHtJH9x9THtgsHGqAdXIdggeZ3XYezCkrX1cc35JsRF8ZMU9oSupl2/\nRNefL4+LmsEDCFo9OM5cCGDm28IctZCO1Cz1QZeUmCJTkzNIfPqaCLE8/uha\ngduXxMv++ZeHBT+COu2wYAGGaYeCiB0wbxzjOgpF1/mTU7RLmpCMQ2qPmgAq\niPXssEwOnJ/X4aw0Vu3XvkXXjWM16J8ap50soOJ/pcvHWoC7gcLhxLs+Je+E\n5KYzMlt+TSCItiAVmUmzl6ZiJdDqxuFjg6Ye167c8CBm5MLmq3AS7greiOrT\nj0oEqHbfioVeUALYLmyEdusiaOBKzOW5zsgKp7SjPoKAXA2QtqK7wXJMmIW3\n2LDCO4LHwvTiSiQWWmiNdlXOntNP82Q5Z6SVwXYaU813Q7ClGRPlVywqhAft\nS9BinBsLzCL3/N7ZrVDvjuPVqllxcl3lkqIrCQbhPIELnz3WG/jMKIa1K5OO\nErot\r\n=68Eo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f86f83f54.0_1595886860265_0.6793913572951196","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5c1ddbeed169992f72044606c4bb74364ef8f04","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.41eb1684c.0.tgz","fileCount":68,"integrity":"sha512-aSXmDyhiHPOzLedgKk3eolPEUUtR0tI6+cC2iihnk3IdDeUNRVOqftZ5xYRe6TabZbnfCZVqMWsyBTHxC6iE8g==","signatures":[{"sig":"MEUCIGd4fU6yGCpVvMjD+WHh/BKU2EG4msCD+Sfcg8Ti9SwqAiEAhf0o7g937RUoVh7b6E3QilDFQtV08Hr1qVdjcZutzMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVsCRA9TVsSAnZWagAAmqQP/jze8mOOgzhS+2Se6zvw\n0YxYa06ksl97xwGOSnl9M4pkQnuuUjz/sLFkz3znWxCBhOVBXhRwMCv4rZkR\nKEU5LKCoEoXN7N3RgAdj85NCUyrZ3yXZzq3tf+Rd0keMF/juaqZ8rdQ8kpO+\ndmTtC7O2GJpK2NHaneb15w50rP3VoZDgS65K7Wf90zNpCQOhdxiUtjUg+t8D\njjuDHymmvWv5Mh8o/N4o6QjTHVfSrahoo18cFbr8wlHWG+Pr0HsfXVPM2rFE\nY+hVSkZcTxCipwbUpAsFo9maZAcExxO+0W9i+nkq8TzQUpQDWGDTvLtF/2dH\nVXPtSJ2pz7exytdsLdarp15oR19wyBxdLhu5YmsghpZLOUrXtEg+jT5gk0/e\n1GiWq58Hj/XSU6s3xd7/X0q2p32X3V1LeBXz+YHbkyg0nMear0SihSliaZzN\nv+BveLe1WLD/ENH6v1nLRXQJfbzgJ8SIefJvVzp+LBSx6LQT0BTKdpBd/21K\n3nl+vLEEQwwtYn5Fsk/McPXOZm8ABJj7TiX+Y/RIvxDWeWLWsWm5+GxBa0DC\nj4l8YnMRGv3vh1oAAuDVktasLI7wJo6mdFa+PxMp41p1mD4P9Ier1sAoLNZS\nv1rHWZyHcycl6rs8cYntc8XlLYBv/smlRDYjmvYehf59Ci1jg47Od3gS7J65\n4rQX\r\n=ghcc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.41eb1684c.0_1595958636384_0.186771631587189","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/segmented-button","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1d0729c651e04d71374838c12fe041edef3ff9e4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.9e2f6c450.0.tgz","fileCount":68,"integrity":"sha512-9HiftCTPTBN0DwsrMLkXpWrI4YxW2/07W0I/VH1S64vPkPT/cusIb443kLIpERdYgsMNfZbjj5LBL9wf7yckJA==","signatures":[{"sig":"MEUCIGeuox+mo6XSTcP1r9hTKncUEwZLbGkGwHw8MMGZBAb2AiEApiGrDatgVB9OxpXVWyYSKgJSPsAMagOwuPjzlHJAyYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkmCRA9TVsSAnZWagAAEMwQAIF6i9yEU7tBtA/Gc3jG\niQLGpWl9YGQWzXUBA85FUZbVByHU2vf66t4trBi6k347Yk9w8mf181Fbz1+0\n+dPT+LMd/FeEGNzZkH0HnX2DHnbTpLSm6dY+A9ZVy6ZajCqZdMO8tu+MG2fw\nPf5esz7EDClaKThDgFoKJ3+lKJ0E9ZSnQ13yi57VwsJzV92/zLNTEsowkNpt\n+7Evl7PvPXkWv6bp0tGXRlCHV9PYGB7FH2FyWafWXslarNLS1+poHFTRa+3n\nYAi9JqD4Sf/MdhVkdTnw+rOHWEUVyiR7M3Q1RHyHFU2PbeJ15ofT8Qw5MnmO\nljffkQrmkqnz6V6BphFuTIYi1T7Nfh0PTqUy4NmJUDJk2P4Md24FnCgFNQC1\nAJ8M7H1lm25wxZlCVzY97lktHhc6ea2RqQ6Pwih05ItGvhxUofURBBbCMKBO\nM9xOesv8YYV+p+lMaFgcRboQQsx1rLdrcx4h2HC5Ae4m+YAuJvFtjS90ngxE\n8V0J5osLH4APoQ2qodJo+o+kKj8zGMnwd2ewYnJ0v06BI+on0gJe0gPQ0Jri\nFRkbzepikN04Mdv2Jjq5XG/z1CFGWitZW8XAHpswMWBDX4NCkUa+i37/6iS+\nHTkcBzEucE6WOetD6ARmBTOQxuHZ9EkJ8A0ce7m4b1vzaICLWAM7PwTS/7Ed\n1Wlv\r\n=d5QC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.9e2f6c450.0_1595975973770_0.83774295742998","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8de7d87c0b0ad4c08f9ab698753186dc4046b044","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e6950b55a.0.tgz","fileCount":68,"integrity":"sha512-o0i9mYXD/St119ItggzRbQF8TagON65vqYLZ9K2IklAsMJz4uojlH4pzP3MOPzrAcgVvNw8uYFGW4y0WNBeZmQ==","signatures":[{"sig":"MEUCIDXAAZcG0Zuft1WB2cdoCSdiOS7dR28ahb67cjAez2yEAiEAvdyYQGa1hxuWONDTK710nN0PI9305jNz/EZMMUeU0Wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKw6CRA9TVsSAnZWagAAm+wP/0VRSFeiT+ojmqvy68mE\nm65AZAhCXD4i4qhgOk+pi4QfSIhfIIrfAgQb2s7nyklXO0CeoGu4v3FKl4sX\noLyPUgSWqDs2dvxpwlNzDQqapB7cH8SP+vEFuZ07mSnzYYkGdxyNZ3Ak/Y/L\nvLItuRmjTiqfhTN5+c4sNNBfbj0F1GHWvUBebOgfsytcwEcekK8TDYqXMDRT\nufNUQCScAHirzsTCCIIP0WZ75f5xnfh+g9JQ2fmDLlDGe7/m0TYhmCgZmZXY\n8HMn1iWrKh36pNACM3fN0v0nVhaX1kMc+yWfgkpGt7W+vYg2EPA+eCAEwkq6\n5kU1AeazbiAi9+NTXi/eIeB29NXB01vGtFhB7YLtThkmvj9tBWUNWJVBdHP3\n5lqCQviI0pD3wGPA+7aXKR5pTkN9jqdxjzqCnID6pSOdRnKRVAzXtUBEZVTI\nfMRxL1q2bq1BD+D2uXKJBuaViuhXmGTrJjkdGBGgnAQ2MbccoeA/4Im3Y8uN\n+60Mx386Du3ixXksCGaXBO+LyGZq1mmcBSHdXZb3Lhnzd28gVFo9Y1SFbTPY\n8yL2ic8BVW1Dsav1I5Je/nTKiAeL3zKsknulpU7kVIBB4zkkbtA2LLAouYKU\nKeJp8xTxmfWl6vLLWgX+W8nlK08U6nUxkKvoQTqXZp3+nVMobwQskDI9A2c3\nIJIi\r\n=ah5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e6950b55a.0_1595976762397_0.5740964349352424","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6cfa7fef905486255f870af980e38de3409a960a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5e51ee38e.0.tgz","fileCount":68,"integrity":"sha512-05Lu2FEn98R43451J+SEm6sourm8ng7cpDJ8/p7KpZRzU54lM3n8lV3SmwscB1NHUUBv95mo7YMKlNUCSHTgkQ==","signatures":[{"sig":"MEQCICqhA1BRvmaGUE+myjCHtDJcyucDLkBxoogf3moVjtRPAiBQjIszXEHsk0umt7ewoCJV3FAij+AzYsJ6y+sGYkHZTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHDCRA9TVsSAnZWagAAI64P/3T/Aau+4COilDxX+142\nTToXjlflOJ7UkD+zyxtC5/H1PgjJlm3k7H13phk93/ieUwfKf3cCVUHGFOil\nWBP+Y68msZmdeRylsf7jGFvO9N8+BP8Iv1huHgWlwlnKoPKFo5t4F30DwShc\nqxctV0KTJ9Rd2ZPpbylOS6zDRxsqjh0vfaT4zvwfioIVAFyY3CPl91EOl1m4\n3o1MEgMYnhBzRiiSsS66BNrx79qTZ7Th12+P+22DbCWH1sSYeDHf2vS7idT0\nU0LRseNRJaDQ96aj/Z1g983eye5M4kLNPWudziOfLGjk3p686ax1AD0Eqya+\nsXpDQoT47n57DcAe1n6oCP/HrX+QOpKHG3uhCsvT+RPNr7UTlr/fNDF44RcH\nKcxTMGQsfVbG2qdE7NY+Oj59SrPB9RXh42YJeACZHMVnnTd7UmkBlUXoAwLE\nGIuhbhGlVzW44wz2z37ucuT08IIMScwPgQDoKRCI/Y1G10N8g7F4AF2J0Xn7\n2sZtI2xscg5UXJ4aR+TmDYt0DqwdqOVnaJ5/w/C0k6kc2c96eT5SdBOgtX/L\n9OXmL0a1cmhgYIU/34JZ2ABPcM2/sPMstOgs/GkFYmYWZYivy2pWKNaxD4o4\nzZcuns1vStlII+an+Vzyroe/GKOiihC0LdaGIUJi0pRIJDCZlDNoGI8SCNxo\nnapJ\r\n=sRgf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5e51ee38e.0_1595978178606_0.6129570385142602","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"98a38dd64744edc1dc5bd65351f0437061a9b76c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a3898ffcf.0.tgz","fileCount":68,"integrity":"sha512-BjtEstrLtFWk0G0gZ5zWBm9fIcNnadSxB63CSHCQ42WR5eJ2EsYFFliENPAYyIH3w+0BstHHzfXcIr/wIHGgKQ==","signatures":[{"sig":"MEYCIQDDKhePXyzxcrcufuGZtvLzEPrtNJNBwKZQ1rsx96I1egIhAKTGcCFZwHVFCJX7DBtYIZ3sygU2yBUFZn+d6l2rLAWP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSYCRA9TVsSAnZWagAArzoQAIVXilOYVRKiptdt6M/W\n4v1rc+fIQKfyEF1HKmFsxRdQ78FPHNQDIMUY6MgIFYuqc+itLtk9uYWHRAdj\nvwCrLihAkZ8eBf0R2JidNROSiFZzzp9v2iTeXxGgt3rcx9QRXHDBVCHIVWX3\nGPaWBVo+2T046wLaRhAJDI4xcREXMPCdTw5ZVufHw6bHMF5ilTSs2jnLCRyA\nCpScW+KRYB5Y28ZetAwEjE9tacDp3s+IlWSclWrzLPGNc+7R0kgRMPnRAael\nl2MITUa6uScy0whNMsno1sAPlUbppAAfyh4J49vZJHdHfgtR3NsMAZRveulz\nZ2kL+9ePVA7rh0dlp8SOigjOQa5u0Zir8ZSxUhsaQt6SeAb+G0U+6/+BepUA\ng9UuGIAKPcf+TwgrOaIydkNJ4oOZQxU4pA7Z3/uWPxaWiaMtQa/EYu7yT+Cb\nmNW/1p0WxU2jL+1Eso4PjbeI55QCK6MWsARbHFt1Sq+yD3nmO9Yp9q1Y1i2r\n8B8tU3rsZ9KDOiywzujn6IOWCDlupmgi5YYfyBhWC/IklyP10oxhpQKhMPna\noo0oVpNOXUOBzR8OU/ZX17/ZaDs5rFfSt3VtLUWtmsmQY5OSfyI8IZRpnHdE\nlrTw3rtU451L1B9XAnhNOjkuLrSs0wjMmpNhWiiFP3y6IUHJq/cBxWmn9irh\n/oU3\r\n=wZuP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a3898ffcf.0_1595983000073_0.9457014395438743","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/segmented-button","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"310225e53fa7689c69724b6d371dd31debb7b83f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":68,"integrity":"sha512-UhC6X31vMDLqdNwrpKocDf5TYWfl0wMzijUxZ0rgGK7MoMDGBc78r/B3S66eiE/ojvR3/Vi2Z2G5Y3Sl5OJdZw==","signatures":[{"sig":"MEUCIBmGSVnrJEgYMwjoTby71FMYbHSGIlv/4pUEOEQCC1AvAiEAxbxrLEU9Z54tPrnsPD6rqzWLoNhrHWp5FKoTgAdik/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":250515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeaCRA9TVsSAnZWagAAZlYP/AhTMYfWfaImCut092e/\nFVgguB4GpX/OI2juz7z881iOkRxFqpTgWfH942u0AxGPFCI49reQJ7xNuegK\nHb8Qe7IOF8lePPtAeup4XMLl7sjsqS5P5mvqC/NP8qCTfeI/W0Sys/ArvWEQ\nz4jTuIVDcz48W1DWqS3v0fHrjVr7o5sxhMwu1yFmAyxwGdAOQ8EDLSK2zAqq\nC/X/HE6/7thkjveQtY6GbOuiYjF7ZcwLmDOdicXahky7/1mBoAUKJ+2/90YY\nWXkARGMS6IpcCz3oAsRrvt3Xp54QpM+FcuRYpH/fQSKxGZa5FX+kLZq0lVSG\nqZ3cLibcoiD0Q372Vv0uFlve8uXAnyHl/IYJ9ReL5vMZBHQmQVofUH8iipT+\nwRJfRfoINk8CcIPqky0Udy2xk2X2/X+N81OszuyZxQSnSnJhzR/Olq5zvH8C\ncwgBoY0ByxEYl0LvRNKkUA1tLZPFXob7sRJfjpvJ1ha9UjWiyghRc4A+QIo/\naGDmzwcNue/bWYVhLdo3PDtsOcV3SesITY4UboGXVTOHXaS1So3KEHBst4O3\nvJaqCmVK6BL0xE/wk36dw32viElQJFDfhrwCbaiE+VCIqmHNcg9rE6DLtnKm\nAAJpZ/GPrnL1YxwNGATaD9i8TSnNENBtTHc37uwm8O32D14IHmTHkOWbedmX\nX8+X\r\n=Njld\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.bc5cc6c96.0_1595983770182_0.017925164649265746","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/segmented-button","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e4c5334397ae5c54b216ec653f5ba7736f3273b7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.9bdeaf928.0.tgz","fileCount":68,"integrity":"sha512-cNQ7GQqHwZC1rSgeZatewbHKrM31FDxBlgo7u9ziN/prdeGZuKcPBsiFQO9gmmjjUngIf48ok0tfBTufWyyLgA==","signatures":[{"sig":"MEYCIQD8DlXCGW6Z39Dt5ddau8WXFV4MVvKCEQq7fkDOA6fR7wIhAMFQXyphoKqVsWZ/ra4Cp2be7Tf1/6iME8JooZZWELdU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM73CRA9TVsSAnZWagAACk0P/RCtUpWcaHsU9O+ufq/B\n7U0VY/J0NgWLcDsINCBo0ec9sX7C/I4M+7XArRmf1EPJNTOJLQEJttBSDU+P\nxqV2JxtNzDJ0Fk2qKnlEkEwqaHUcAa/jKtW34hTT8b2MsqNLQ+p0zwCZS71I\nsOaoG+CgsEK6j3UXZ2DGHtyCUYjkdC45gShq2lVVNT6yiAcK1MPLOZ8SUfqZ\nkIm7a8eyshUMtACEFrokryretOd3hwlk5HbJEnrBQH2iwjWGdtzjlykzRCfj\n+cQFVvmdQEFhMbhlhiE18HzzKU55sK4OO7N4z21gj8kwgOVls318OK59B7hO\nFDuoFVYmqybtVBxIvMILQ8K7LiIqUiFrHjkS2X1YuJdsW7cQXDOKEONEwDgV\nXUfquQnuAuumbQ8w/2Pg5P4vNGk95OsFGaJ4WiSE3ZNme84KZ2ZceKBtkf38\nRXXLUYxKY/Z1UCXMFMbG6iDVrPyqIKt/xurQr6UHtAAGIp7zwhMQqBnkioIz\n7w+TR8pdmDxkwp3ssvJDWuEv5wSMyx+B9jdrDVjHNPvYk6EXw0gZPfP1SAY8\noAk1QqesCLUOLCFO7TYzOKwNuewklKOehaloj0of632XvyVKTP3HKE0zOROF\nxbuRMIcd7sMA7Pb+vPCBtXvgbELsf9pPQH5xqQBp5zWaGgCIgpIGAJpDXKMH\nMU++\r\n=Qwka\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.9bdeaf928.0_1595985655128_0.6200448344627545","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be65f42739d2ac744bac3f5028a8eb2e562f1bab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":68,"integrity":"sha512-5bIsbfFWpqzRC70GVyEe09/C8guB5ULSyPNDl9n2FleeiIeqJH/domaRGxUNUqhNxeJTtv0PMx1O9vZf0qPqcw==","signatures":[{"sig":"MEQCIGP7LPyYWJ1NXojQP38uYa7HHTqSgRH8Ih2fAhNy9xCIAiBbn6k6U4FWVFE/p0mnlL75NWfpiT8pPpBfR1UyDzeEEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJTCRA9TVsSAnZWagAATXkP/1D5p2icur3DuZirfOwe\nSz5M72DOhLrYevpMrKUzdNsxMFFrSBBS8v4fF3Gj5HoRAtd/2OX3q6qX9TCT\n+IZLiJKKNJPvTMRLScf+42dxb5nRF8g4jTCYblAA0DZ4GxOy8fs5x+fkvDEi\neNGEPibUDVVZQ5mf3ptbHIf7r7kaIXlOE1soAgzdhQuj9aQGWmaTOGhIN8P+\nLTbe9Urgu5UrRo1QFHhaJ8pknIomjimwygAuyJy09kFhw8vuD8vdF4DZ1lj5\nZp0T00ZniiUEO5r15wXaNB1FpPVVSoaus3B2Q1CtDfQcC4ewcUgmyZOqGiLE\nuHe9PkMsmWt0sQk/VlheSUr0i5H9tMHeyfy/CTRtKNtvrDKffDiACyr31S2r\ntNjtLo28zUk/qETdaOURZCe3Ue6COTgjps7H9lpI/HWZ39JglunhL+2z1ooh\nrKzk9LnoHGJb1A4d0HLA/V/F+4GVgZDw3tEg0p4Zma47Al3lAeDGI+Dqr3Jh\nv949uZoqRfsS6z/aIw9YMHHgDwtNMNpRdEm31QWK6ufoRtvM3mn9QfEjZgBP\nnybrpj5pSgXTr/yLudnggAUxVfqPgNKGxF3s48XvsoJxeZaS0Cen0wX6A/Lc\nCynR5kHpFylOKaC5HBhQCtFvJINSMHFJAN50aX6dVaMZb9UBkpNTQQtPCK9G\nYlP4\r\n=/k1T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fde2c1f9d.0_1595986514743_0.709045571901793","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"94c369d6c722f0d22c44e373614df957a3a4313d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.6b3876d5d.0.tgz","fileCount":68,"integrity":"sha512-FbQ0qBIQhYu2sYDBq232z2bLU2Zhi4+r8emPskTsIK6uyhOCKBuEdnd3uzAFbAHeAU2V26hvQIJmERZnmIBKaw==","signatures":[{"sig":"MEQCIH42mWAtwwl6tPMkeSmc0lZXVg1ZE1Ajr64ytcYXku4ZAiBlIbCXymwTuxZ2qIdssemSVq5UclsjQ7Bs35HRvTMIJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINM2CRA9TVsSAnZWagAAqp8P/0LpXUMHJ/EG9hZZcOmt\nZ6BaFqZNX+ioSTA3Tf5twAYg6SIekBgVIMCEHsaGtyvmLq9Rimgbv8QuOdxC\nl+TpsILl6z+JYXyRID8trWXTZJ8BA91kIB/F/AemWwqraHYsDmFjRXje8N88\nQpAyQMMMobmoxUdHz8rCDsLl9h1xKrKuL45EPaMs1qNgcBk6Ue/rB5M9F1CT\nBfnOYTFY/LuT41FA8Zbifl9tMwGIn3gUYwzYLHcD0nShBzbN4ismKPn6cAVm\nmmYwGpJoUOm5Pj6yNR1Rr1bKq+lyPhBWo3zGw5zUQL4iqEIcmdD0INzZbGFy\nRyBmT6fZaS4wqql4FikVTMH6O/pmizcNt1AhSJNvzrGgsPI86Rl81qjupSkX\n8MaAu5B2em29cberCySL3VoOMmo2BCK6BlFAF0whpBSciM1/w5KpEopFXBiz\ngowdJZ8lnQftpEFu+L2NV2JazjaqnB0TrfPVaf9UBPaGEw6ASNdbVgGa2Ly3\nj8N+HuLecMF7eR3D7rmtaMT04ao+vtoTIlPsLppTiK9C4tHT9YMhWS2NzZ2d\nuhY4E7nMIYRYdlL4kS9PQ/1/QcMVp4nRQI7JtJH4dc4MWu6DHRouEkUBKwLN\n5VoQYG22YqQwOSlCE6Tzt5FwK4NTRuV/7sjIPPxKdCDqezSmwcIfKGRRGRD3\n5ox8\r\n=LJ8h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.6b3876d5d.0_1595986742011_0.21870209621061054","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/segmented-button","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9a067f299583cbc284b0417cddf5b28b84f61a0b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.30ce17873.0.tgz","fileCount":68,"integrity":"sha512-YiqUZFOJZbMD7BxcfzCwgVg6nzjL37g031yDh5aDYGRtGluLHczQMQog/siDB8rEazBiqxzTJ9NJpPmUKrjlbA==","signatures":[{"sig":"MEYCIQCc6aeX9yRO2pNlqKtfFJVR05c4Q2DRSTyzZXBwqTAylQIhAK/CvRiD8ghCMy+rLjRJKho1qmKPwebIAULHyF7clukp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6XCRA9TVsSAnZWagAAL2gP/3BZWpEqk5eYgHLvbRnP\nN9GomFryY7Vtiz/MiIDCdIxvRaR8LcjNYOUsMLoiAnNRE46h7Dv9iK30YPyZ\nk5mMl8ndFfiIEeH/AoKG9OOzcfbRIWQvk32wcJB058QaARTMY1rHEW1gkv7l\nYYCriD/qdGcuJvx1wf2F4dHI1bR4SMJXCe97A+rMkc9e5c70+rqWthUJfcM8\nyjWRzOHLSlwSvy4+levka5p4moM9UKdbWwQdzm86B6xRrZU/DLasFDiB+4eu\nfXmk2I5gGLuRNmMkq2pMfJlCCIDgaCsX3R+aG1hYWr8cqnQDu9C0DdQqtgxr\n19dxLeMoYeid7Xmjz7QrftyHZwt2wpYkEGN+s1rdRbG7qJEC3FrPq7Y7Au6h\nLDm69ld90ZJ6GF2untV9hCzPpjcAzqoYOwjyyCohrX1dRREux4w23YzCFqnJ\nltGemFQ0IH8B/MSmbovogxZ8AzHa64fgsMlQywaGQ4C7Chgx4efEWI2DAZhz\n3FG1uEBfTu/C3dcNMcZTMTuM5F4t0DqfrB0l/j1YIdWfArK6f97d5ZtqGUCQ\n0qjWwQPprnzjBf3DyMRk3xbApdW6tcWGju1KErPP76Kd1FHcWYCHaM5HYiVc\ns8f7vyK1H4thVerD1fpFW2feeRNZQOvi3TVBIbvytf8iyaEVALM7wwzqldrw\nPQzd\r\n=OSht\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.30ce17873.0_1596042902763_0.8882105935393092","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aca9cf2ad5928ffc9b61018e9657d972e15a71af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":68,"integrity":"sha512-DFL4EoRT7mg+GeYTY4KF6RHKFEYwN0wlH1NPLU8r7LMnAfF6AjanbGr2quXCU+vo5Zrn3h8ONp2b8MEtIy5W6w==","signatures":[{"sig":"MEUCIFCM9RgcUWy7ZrEfcTPeW8g6JObSI07LrbvC1QlJ2kZRAiEAj8YKjFKi25cjO4ZJpHFYAMD97AEg+8Sph7Qf5M9qyKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8oCRA9TVsSAnZWagAAm30QAJheJn92DMIEmpGAh4kR\n9pPW4/R0TFBD+YfAYjTidbs2g4y7jrglZqdSVDr+YlJ6KrjEW1BTJQe0EqK8\nxnICBYs2VzizbI5R+Wq1YDse0AUQsQysgXEsnBrFggzp+7rPIOLQNkvGk5+E\n+/00gy0GBuo4VCymIX7JRG1fRImOXfATJhF33gQaCe6eqR3WFXbtM8Me6z0M\n1isu7n7/JmSrmQJYcx0G9DdJZZnX39Uj0VCv6UCZFlSVKNuXsWX/C1Zm6CZn\nvIg7sTwhtxjJDPw+Frjvqr6DW0nrDURK6cO0/fuL9zV+rzJlQGLCAaFBmURP\nx3EcCjcYTPB4OGBAH5db0US4iYIhS34dumueIYVnhXVQLIwL1a6yg+Xcv8Ao\nNx47zaOVfOTtJGJ1BBc+PqNCkl3Az46JZjwxTuyGLI8jJaDMTRXvYu/czcHS\nxsqI75jczn+wdSsghnOJTzJxULP1A21QP0L34g1fVJEEkM1Nr8haNckYdH42\nOYdR/FTdCHT+tFWgeG611pnYCnNczRcMZTtqTOEwPo7S2IV3xZ6Evn1ZlsUT\nTmEkOxyeAwoKA6nAce0LB8IaAN2XpP7W0bS2wXoEqugPU54SH+W4YICJ/ZKC\n3WIn0AKPJhDI40DQioxcYzSoHB46bAvtgOyckYssO0Hdvlbfpee5BxfgWlD5\nhxDJ\r\n=ElM0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f6bb43bf0.0_1596047144129_0.05001701119831492","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/segmented-button","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"604e69dcf10afff6c107dfb8c48a85d28697fc63","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.6af75f6ab.0.tgz","fileCount":68,"integrity":"sha512-9Y8BWQtjZDF7FU7bhiCoCuFcQyCiXE8aiheilw0iqj4sbUmYTfaXKtuNslyYrKAH9KYOs1KQrpSSTZqMwaztIA==","signatures":[{"sig":"MEQCIBzhjeCD0CdJFLXmZCDBrL27hLJXDXRoES2YoaROic3BAiBEvhMG2e0XgRElZyGaACElsIWJmXmMMCycYeg18cnA6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3gCRA9TVsSAnZWagAA5akP/ipWv7JudwagvfTw6kHL\nzhY0mVNIzZIL+S9iratEWhX1NINOKtOt1XIyPKTy5k9l2WymPe70uvQTxU62\nHDxkgP/osESszbf/aqmQ/2c0S00tnpjnqRBtBscuL21BOKTnKw4A/O4L9jvt\nGvFqRgRNHjpd025ERipJ71rS5Pd/a20zY+eb4TtVrE991pJoHq1aUI8O72s2\najSlOl6TJ3aoehQX/INoYKIaNZdD/n1NNs5XMb7xTqORqvEzHLPTjtFFWvts\n3PsEPs+DUlvVlxD+QehTdUKjqWhqYq5z6BD3mDA36E/COgrx1vXsCuaKl/nT\nW9Sx6bXs6K8DYLgQa0EA5gNjm6lLW9yxYA2OQWxoiw0zs8G4l84S2S+1OmYv\n6dqCBeLOZ1a0TfNFSHt5asozV1twifYX5stbso/H4F4o/OWPsz+wbkB0YKli\njJh6CHtbnbfzg+fK8Cn1qW6sxSy5MBdtpLi0kV1c6Jo3Opsv+pxScC6X3wmU\nRH0OS7ZabuFEwlM9V1EwX4fi+6YFT6v96eak8sO5Mn31z/paR8qkF7a0T+7a\nrCRTeRLBcrBthpFnLaP9n0/H7P5YNdrXeHMoVnHoy88tc0xc1AQZrcYh84Q9\nkscDMLdH73RDrXPZUVeqWU3KFOreZGxd4tmLzl8kZLyCpyBiImq4q73RcjAn\nrWpa\r\n=988k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.6af75f6ab.0_1596067296488_0.3705483759614605","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/segmented-button","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c4935442247aac77db41328018ee28968bc3b638","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.42d7a65aa.0.tgz","fileCount":68,"integrity":"sha512-80EZZROIGFI4O3264b4LpnygB+eHj4I6hFDTcPgI7L9SzvxLyY7UkLkOZLERiNgCuEt9KJ3/DB3y6MOJ9NeXlg==","signatures":[{"sig":"MEYCIQCCKNvlApdWshAZQG8Cey6uX5HfJZ91ptNWThdjRCujNgIhAJfPxZ5V0sM6utAnIrkSjATLwA3k1fjkt8qOsHQdRe1Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhADCRA9TVsSAnZWagAAgGsP/3f53LZBYPRN6x4Uctky\nfw20guYl74rOE4K6m3JiQeBAJFMt7Ku7O6w5AtmGovYDxwMqTxyxRlPkXnHJ\nmOlJ+7Ic8eFJxtiKVm+ezJDBcEYpvvsc+5L4BUY0rbESTU2Fi9s4MrCZSKmA\nB1lkS51pEbSg/1udmT1m6487ENYKW/4Q2QK0TNZNpjwn1zGbEsWT/hyHb0Yy\neTX8Sh7yO+S1l1NBVAc5rDwaSiDuCaVVu6M2jJkUDoBcOb0ujlHzp7vcyzv7\n764kR+WmTaVs+rMvlyA4dPaPqSq5yCAuw1bmVzeDZ9iDdSSZ745A4YiLxaDZ\nDV2l2lk7GHUmguu7lcYTbaiycM+ZtC4RltLsYUhNPZBFr1OuSH4skhMPHJsO\nMjD5P9JHd5k8JIN3Z9Ys/MT00DlJ8myHgKgiHnQtPLRx4m5eb227gas0RuEt\nCUCr9lnBLZMqvH2ugYVwF/0yVkC1HC3bYXf3PR6eMCIqApZZuD74sqF7lQi6\nOHkLz4orr+in24Py6HLbkMKY3TGpK12U5KO0HXWHITZ3g/d0cVVefbTy3TZ6\nc+abGzGpLcfs5jlUGkyihsA1JmNDBcPuwuLUPW/t37y0Dioru/eYOsgLQrVL\nSTQChK4ryIi2aw8rLCv/HAIIF4LilPtAFKvPLYguZZzNz8grnitZ6aJ9hE8y\njqNW\r\n=6qM2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.42d7a65aa.0_1596067842911_0.4734021355634428","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/segmented-button","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6e3412a91f5bb6c0b716d5029098185231b5b8a0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.85abdabb7.0.tgz","fileCount":68,"integrity":"sha512-NqADAmqtqhI0DDHj1ahnXpPZtIj2RRbWKHwny/GJGf1XjpaicoZnxZPvfoNRVp8flU3c0RSdKBDz6cIvnrfHUg==","signatures":[{"sig":"MEQCICHF1lSM6Fa3G4HKPr1R+UAbkRrV3rIqvNKyx5HrfLWAAiAhUbNsHHxe7CJPioWnXLU7pED540l7WmfeeuM85uhnMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEoCRA9TVsSAnZWagAAOdkQAILR+jqySQwyKKNne1qm\npRycKdzHW2eDjA6hi8IleFe5wd3LhkwJ2j3f5EtGA8XwT8IG/l2tHjwwwLsG\nxO1vTWte0jxekbRzhMIfarUwdnq+/TznJD7Vd7bIyj2nWxrE8ZUEHe83z9OT\n49/uRWYJjhIPzzsEZGINHoJlf+MpHo/n4BJED0IxlJKyXG1cN/fSkZ5W/g3f\nLubrXV+OptQoYz1Vv3GP8TQc9wfu4aSdDMrMvl+QXNtUV1li821NFvSFBv6l\nSXl+N1N7Xmwwn+ddwtpc1S5QTUIqrrjkitGVHpC+9mrS+4b2ZcJ+Z0CmSBCA\nH8OjIStczvd0Aelom7f3F9nTjw/HBO80b9aR8OiVYJLmiW9JHXeqMV+6MRCM\nB+Dpjoio4bYBZHDPK/rk3y5jW1oxmp2YFEXccrX5oR5In2YeBeRLX+8JkQjN\nhldho++SKNNf5manC8emZ4jUxb10BiG0H2eS9eFfbjCIjIYcr7ITZd/9vO6J\nllp7sc4Z3P0DoUkVdnrSfhajXfvUHr0POAorSADGHLEbItiW39UC5KZbnjYf\n1NYDgSErqI1CEc8qtRILhBuo0gnZOjlhoP4yDoncjwTNVVxRRFR9PCTQK1zR\nTtrJEXT7cyRgvuBI9Thn9e4Wa6R5V/BatuLwRJBx6TshNkAxLnTUZStnZHpn\nuOs+\r\n=Ql+/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.85abdabb7.0_1596068135670_0.07262089032656793","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/segmented-button","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b7ec87a746417681f20cdea9851b868af9507528","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.49fb20ca3.0.tgz","fileCount":68,"integrity":"sha512-wT7eTB8Mc43KB8A8uJsujydofczwNIRorDu52RioppmxF1ShAQUVU7WXDzTjfJ333THxdB4GyIXfZJimv5Vkfg==","signatures":[{"sig":"MEUCIGs0Mvkax7kuGv4u4QPwptcZ27r7GNNgHx+woZ/ke1PTAiEAzY9uAz3+v4qVtMXDPUcEcZy3yxgNe2wJjkWHJAsTu5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIYCRA9TVsSAnZWagAAhD0QAKEKu2/TPsiZWW9x2liU\nvWs7BGN+s7HXhaQJRQAId7qLmlNJlezXL7LEgyAI2NhL3vCXFVbaZLPcX3Gm\nahGOZY4xbQMfHYTPWzgRHms0zPjlSXOE0nA2FmKX/sRtnqE0lSkv1inKpKVf\nca7eTx6PK9PqJYkiDxnQtwcHW5wGx90IS6XPO2G+ewcJ/els8bGAZjKgInaV\nk7iFjoz3lRwMniVBMUVlwkODQgSi1OcILsw9VeGergHECQFPl2JB9d7fTJIw\nqLC+m1pWaXtHNh3ZaLdTGbMlfvSthHRQNevHOoSZ95tUj30e5IWejJbhc9SN\nVENAjb8a0PFnF29wcd6Nvdak7jGtbAofizSridP8X62Koc15ocvs0TMWOPD8\ncIORi3xX6MiHCG5Tg1S51RZQD36jAaZ3TzWLk4sJDXNKLpeLp1Qzpd1mfFvg\nATke04LVndgVwP8UOf9jPJTgY19yhKcxqGjOL3GrtRAeClHBrDl054KTANge\nRdL+WK5kXQbYbIIq61360FnqmGKcQ3OyLu6suZwR89KcfHvRPMpAOIrezYFS\nUhRGJ35KYGEhdjTcgNYCm/YEqawz6iEy/ju0qRbw2zbphi+uZJU0iO4ELIfU\nDRajvYxw5GaZu6NJi8YJVw6RDZbf8lWzE+YC/zWxF86Ss70uGi/1sxCZ8fBw\nkYpn\r\n=xon/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.49fb20ca3.0_1596072471820_0.3794109573674771","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e68a919f9350e6e480bacf6bc909be2142a3a749","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.962d4abbb.0.tgz","fileCount":68,"integrity":"sha512-wqxtuoXsXxBaSVOridx5p/RmhXgOxG+n0NO+mKzKNTBpHne+UzaQP7TrQi9yIcYDehLDeNfb3pf8CQ7OyWK3qA==","signatures":[{"sig":"MEUCIQDRBzmFO/iKjdzF38GhNmqRHKyoHakGMGYncx9PxNcInwIgEFptH3ASS+fJdJsfg43abFKKeBa6uzt9b/yVwlqax2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvD0CRA9TVsSAnZWagAAEP8P/jBC3cZWOQq4WePpLryy\n33fH7vm5VFuz75uIMEwFCULQpJpWSp0d/EhznyBVzwHS+KoWfu59Zxvj0LSO\n6Vdb8a7N6kv0zPREWfNlu9v7Gn0kvbELavOsKf97wm8/bTmCcKLBP1gtcVQf\nhQTD/2sbIvP8JbTUlv7kb8gfFYwJP++Fc8zaUwufEvO3fSOX4j5FnZnPKdmh\nat7xw53e9fMog704JSfJuuFTVqI0ZrOLSVCtoki1pMTffJV5gqPrHXSuY7Xt\nEaHmgHzj6q2TbECCBlqthQRntd+4So+kHri9QjaMVp5tVfplEopARBLrjaqQ\nlaOYoAXKykD/CjFWtLVa4AEr6ZfnrWryci1vZRUpbShJ3vH9zMqKoZLzznCB\nz95qiFPm1IyTkHzTtMkLbd9Kux7I30QI5xdU5p9ZBWR4wO8CQnhBDVeG51xh\n2J4e8F0zlXkehphhwZf7Z+ydIGeLfOOb0G3cyfKVnb4lmrL18hRPmgdJAiBl\n4/HPm6YDJ9RB2vttrMFTgIUCFbEDXD1DLI6T+UZK3ag/27LhPLKeAhBokTyw\nb6/6uSxWelS5YoqSV23TA2HvoqWWO8JN+zq8G+RlWfysaNQw60SfSN2xww0u\nLabxgit34zwPsa551tTNl7BqFFW/c31Th/rTuYEXS1xDBwom8oSDQe771nxa\nloQ8\r\n=dNmo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.962d4abbb.0_1596125427718_0.5552630111789736","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3a07273d19aa314981861113348d5f1954d6717f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2fcee40cb.0.tgz","fileCount":68,"integrity":"sha512-bEwEoEzxYyStP4Q/KI9H3SBlupBol2TRFoIdJBp6sL7zBDksY9CuyCwUf4jjNFr7iR/hMPWzK2sWB9P9Ssr4SQ==","signatures":[{"sig":"MEUCIQCjvKZHMRHVe/UZce7xsZAm3gHYSZQkVDjl1Bf3NGhbRwIgRRD5Vu7NsXLr0hlDPc9WMHiCkD5+Rwln6NccyaFKRZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGpCRA9TVsSAnZWagAAHwoQAJIp56XrWz1Y95Br4MiM\nfgTaA7QNAFEOKMS+g5FrJpL5a/vQ0FMobhe7oFugevNoMC8wqmUGdD6oIrDZ\nn/A0QRxqxVhTypm0+cECwA86qGSB7CPV0YXR+cGuujQclIij66YWdUOXYeLv\nolBjfwyacGOC5VTydKKXSv/7fiUu9yUF8+vilDsX/Ja8oRI0ZY3YZEUNegWT\n1mLjdLZDFhdvMynGEXbPWM9421+aQGnQoyx2FTkvTMga05loEzwA8dSrwMK8\nNJpamEcat3OgPwJUsZG1CWsqLSSqvmqtk9T3jfo/aigMmihqD+ZjcvR9E+Ki\nPe7Q2pgZeirHZZQlqDmn4pAU8nrSKsxlqorYv9YPIwxPnONCLw84boBtL4Di\nCaZvm6HHCp3t/YBO4hwGQiV/YCKVG2GMgjdoNKCsI7FzNRBJxEnJE+v/Cy/K\n259RjOFVCJkocQ44YlB5QxlqOQHrlJE4gDerc8xFnEWqlnkSm1fi2PNIDzCO\n/ABfvQqYkPNYlKb5IFfd+UTRcYxY34CsFrsmKAEtAFg6mY8Db257gz4CLecO\ncAHuSHBQpTDz8xz5zpfNr8rnlWfbzeeeKQpgOS1Sm1eR71AWVWirp6Qfa+6/\nxGhHexRaZxXHz54S8kqv5wfbMvZGFQmyl8Ya4hHqwxfxPdHSERghlZx8wcSW\n3Qvn\r\n=tVo9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2fcee40cb.0_1596129705264_0.4646580354030547","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ac5fea420f4a984804e777a3651b9a5c275fbf2e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.bd5987f5a.0.tgz","fileCount":68,"integrity":"sha512-RaTlNWZo13936Z5Akaese2RgT7XID9uZqXGr5l6O8m8FHLm6MaMryAVHj5ARKv6fHXXdph9MHSE3lFOEKzPcuw==","signatures":[{"sig":"MEUCIQC+Eee4DMmlv42Hy/dfH/0WH0jRBR2HUWjWIE/WVUnumgIgFWuXxH9rRdgmNdzg7lC5l0fsmC0PEfqkTckYL3Uyowk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdwCRA9TVsSAnZWagAAADAP/Al/mfTOvLwwKA4Az/lU\nTaEQxyGflQMOCDHSyCRvb++G6bkh6YbzuCsvcY1HdXV0Ucfj3CQcGkHVvnTR\nQBX8o5bsHP3F7C6ipGRlAOWyJGsK/ziZVnWRkDvqDQD1rCMse7cvCNiym0nz\nfS6yxoIXqbYCU5cn1JXG0EGQqVdMmxFC+mkIukQWVy8JABu7Paj9T7wj7H7K\n8aG/dz/rbM4XVYjrgVdnL2KrYtQ7CRjeqmE8JmODsz8m8j6fyXmaHrGQkwuF\nafSMOKkwnnNhsRdbSiigXJVl0EStRm4dCyyysnragKGSoIi129MF+cYve/cA\nFkmeKPIljDitDI1Nfb+KSmCleQsU67cflRX5zAPOD4+1s1rDFPRcoJ8mlwR1\nP09LrNxst4eaxBy18oRuYXEuD6TvSPF5OljzRNFBBQOVD54Yr7ZrLPz1x0KC\nShcTdcVjo3s7fslhWgRo4CU7i4iyTkElLWeH2rVyr+t6qcTSxrHwHblOLcxR\nMFszn7CMIMsDthJiXrT0PKhosFLa4UxHtw7ByafYTMfWLpF77dNIaJJkk1SS\nP0q9UdPyU6O+5/g0i8a8LbPCTM1pK/u0nnpQhL5/ck6Z/lG6Hv4zcJ5iWSBv\nFzuhp8RjJbNxqnAZoB5BKG36oSIj98os3dY+5c75+M4BUMUHygo3OaSvoHJv\n13qC\r\n=0fBA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.bd5987f5a.0_1596131184456_0.8290483707204375","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2d19f1f1a13de3402409d345c63374544143f89e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.005e86a9b.0.tgz","fileCount":68,"integrity":"sha512-GXNmf7G24oCX1vvykgn1RgD7/p+nYop+Ourw70wWLQpv3PQyCfYUqfzbCxBPuo9Iu9ST2fapMkmi1xIajbe0nA==","signatures":[{"sig":"MEUCIQDM575LsZRN+W2ORvA3TueW7022bmyV4mwiIiCvRc1FIwIgCVr280UxCXRODJ7t1rQJe/rOf9z7cuWz9wqiXt0ORfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqrCRA9TVsSAnZWagAAIioP/2cDDh8UiD+QYm4d7Ws0\nrspfcowFXELaXvD4hCDvm4Uv6yPD86NIYYOaEhHTqd8c5wgjPtICyjzCxceO\nm8DudijJX67rh5tOgQtbIGUjsfkmzIXxicY9W0UQvh7n0qgE1tb+mCRWuQYp\nTNA6TVeCHNKYzT2PWfufPH9qwKBrkpS4t2pNTe0L3C4KF/NOn6ZQbTNTjnHQ\ny4tfeOoRF0H9uNe6HZprTaYm6+3b5gEBrZbnRx9UOWB3ltLIQeaPzpcETN5q\nxIHea/1jvMfxRN5yT3popzkeekHm1onx03zQu+RxJxRW0OjVeVIK8dvGNkip\n3EJq+Uss+KCn5UBqkohQxljDc/+iXmm9+T5UlVZEs1W7CecrIYT1f5tkONpl\nbmk7bNFWsS9V9/PFw6xYTbOWVcFXm8p8OZUStYpD9n5Tr5UOyniCLPi/nIfb\n76+D9FBOj9MFDvxYL0q1l6a64ag/UTQPqzvV+81sucbae4euymp2Qt3j49jP\ndVwzuGLbeSDAgoCIhTUFIPehH4t39jRRzdQaYMpJRp2SBuh9ydeF0o9+XC3L\nuxaYMkTCOMsJu5osmKfARUOhysNskqhiUIrLfztJXEu20LhKNEQbSqx0IaI1\nzRo6b1Gcp+a+YzOFWx3oovTMnB4cixbKcH7pkBjERaK5XZzOAYhdzbz9topD\nxdk7\r\n=cyo/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.005e86a9b.0_1596132011401_0.5456215830273905","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c6eda49cccf5739e65e198249145f8161c16f121","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e309c7c68.0.tgz","fileCount":68,"integrity":"sha512-f79eABa/mLc7V/fYRBzT2gTdi/l8xomhDnFNBWnTRyLk8zuUZlrSQF7cRxC6YKVgpQiSe3zeJt4rHC+UDZXM2g==","signatures":[{"sig":"MEYCIQCYtseZ0n0osyTzMcUkoCyFwNJSU8SEUqhGWKBKjwOEzQIhAOO5UTtnFa9dnCt0lE5uVvEqeKClxG2+eZKQFC5xsamI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzUCRA9TVsSAnZWagAA0FgP/2LJhIuZryedyZaoibEj\nPPv0ISwOo+/hcRV75Qakt1vmCyt4gqz+yEFdNZz3eU1Hqr2CIwKWOXUUkHCL\nqxoGwB3BVsVKyXvPoyDeJ73cvcZ6q327M5Yas4hOlZBJEEBE5B5pSqS68HS2\nQobyzRDdxP66lxu1XovE8sRKqdcIz3sLye2Yvr80dfff4J//wDKPup+8dzfd\nx1xuy+w5N3aSktfHVHRLXrIY8WKWipQ2NmoQlenR0Qz90EwWDnf+Yw3Hzs9+\nFPAuqshBaJ4iGAW2kXLSnQo4hUCtrQS8wC7iQLeYveCDqT93+gO4oQhjvi+n\nUT2n3Mfs4/NNnhCfCOeTp7+wKDBmfBA9GzRJAjAclfXZj3gCWNRYLQz9qcei\nT9aa4IFkGBH07FFJgpJlAERs/GlxtHDpphklYWaLOCACINWGvMWbmMSQj291\n4m9QrmU72muZDkpTmQISU+2QR5111mcrveH5CS8oG4NhVVs3EQzcqRwAPAkF\ncAp83j4hdUVwUH87RJ2k1TQk7Sx+f0lq7vTbWcJgCEnGxjPy99nFnCO0LE3Q\nMB813/3v5EwSb7kN6WU9mpGBzEcNSSIs4QFxAFXmxl1EuRGELNvPHkg/rzlj\nFV5q2TPgbcsePdQahYrIvm/fg+mPvtXD/37oUJuBXRFrZ49CK2icCCGxxGhW\nnE+q\r\n=+qPk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e309c7c68.0_1596132563913_0.4321580109655354","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/segmented-button","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"72f94f40224ba67f20e3d1cb7438d189e4f48d2e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.935a51cc0.0.tgz","fileCount":68,"integrity":"sha512-q7Ev1sd9MbRS/uiF3RW6fa/6hOf1FlWXxd0w+xhmXylrDGx2YgEfPyT+ZODC6l/ygp2eTnZpA7bIXLMhNDj6cQ==","signatures":[{"sig":"MEYCIQD/SaqIDIGoLR4+m89iuSefofP8NAGxnw4UItrk2cTISAIhAOYjixckooDY6AUesAYJIiGFNlqtP85OaTDhWtvoS1Gd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw93CRA9TVsSAnZWagAAyzAP/15Bm5joUz4GeURBjeIE\nsaaNnv98rJyZcu7V+Rj07If18eaydgzHgtBvkoT0Wf3kaGUuvCzfyLmbTqie\nxWtNFyv4aP2KOKGzKy3k2lgeEWKPNTt3D2ZkDKvHcZ5zIP0Tpb1LohmaLpvL\n7lt1UdOl/O1zMSnTErBRsihqOEySMs6/7OXPTZXA+tuBFsfcT65DvfXSprSo\nyGVapQAQEgUm2ujyk5W+kZ14uiuqAUZoF3KJXhRe1puReg0BMy9ae5UWd0wJ\nl9XSO69FRK8yJ7pXJJYyHHQG6ydRC+EZR51zAGgZxaFdjAlmERVsf8PHqnym\nGR86mesoQVGhFL05jJ+Lsz3a1WTPBXGUAKDqNGxqqGYajbzyQpxj4szFnqo/\n7RFUmHjJPImCAb9jhySu/EuhEACMObT4ri9sBHH52oGdrH/loH26ii0F8bSm\nTtyAwsYvxF1Qb+WnGdX4cY7OVRxse9M5xsWIsmP8SWzOt2XGlHBTYGkIHq8U\nYUplgZuhOHJ6G4uaACWPs1T7zzUY4XtnGnitku2/vPicn3ZPdFO1ignV+3K5\n3saz6CZR6Q7QN6fKhDzrsRPy1lRDs3ra4K6iU9u5L3xl5bJk2CtRKW0Ub5Hs\nuyYpYxO2SskqyDtcCN7Ka9rfU/D9xuRKDkV7LeWy3eoh2okAgN8ziWj+enDQ\nDQy1\r\n=/jnx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.935a51cc0.0_1596133239147_0.97546474857478","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4182b690391db03e8fa785ac24b2869cabaf3a8d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.74839da7b.0.tgz","fileCount":68,"integrity":"sha512-QSgDVOUH7rYrpbluNFKZrINYiSKNmVjznFv0teokc90xr0rCtcQbFXjHPuzAzpJzbxJt7tTTt2dVvbVTPpPSEw==","signatures":[{"sig":"MEUCIAIWUHu9HQh57fezZGPyl4PfMrJJ71NjqPg62h0KkFHEAiEAkgp6rvTgrcunFgxwEytlMbta7x/cAMn7CtydDQKd/O4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxIKCRA9TVsSAnZWagAAK1EP/AoJZCw9aDLETfgfdPtI\nIDt2KwulqQeWPs2Eg3F2ib2ZpnVFEt0rtEiLiGkNNWtKiI8jjpkZSvpu3HH7\n7uUOGRJ573aae8sRk2G46GIT2fetE0XkljltuOCThllFhYiJAg7X/srT0IcG\nWvH8KJ9rSjto9tlOyjEWZ3dfTqnpd5WlnC1ubVVePg8CFyrSznCXn24upAAB\nq+irbCq6BU4ippOQcOLfM6AaobZztE8ElisdMMtPzZJcF2r0YuQcCCBrcgGr\n3YmTnjduSiI2aZsoNpYCJDNota4MIfQXECSImQoh+RFs190NQ+mDVDwmZjfp\nLPNX7rsjLQeqmPjdtWsJSn5ZX05ctSMksUrgSs5yvYT9ODv5yDItWgJemRAn\nWdZQXkudhi+M5a3glRp37EGlqhkHsYadoA6jPbNZgwmRSg48EiXy6jDKN4/r\nSdoO0NmbFKCD0WsuFZUtNgrvghWPA0gvMd0jhI5nACPrXdKnrVOsjZjzU0X8\nVRZOmln4lS5G4B1vyZnTi3uKT2blkX37Y+P35kpQ0gKlB8FJdIVbKnQ3oyTr\nUUwOl7NryYyJVMuas32O3gJfavjPY4mGVp8R2iqddGI7ZtXcBo+jL0QIWuv2\nsI7NEtmHfIGacvf4OsQGdmFllJjTy2N5t/XXywHDXahM1f0Y91MvS+8AvPbg\nLRno\r\n=63oT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.74839da7b.0_1596133898391_0.7844609062702341","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"967cfab59da2fa3e7c04f2e84e9278890417504c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f041a48c9.0.tgz","fileCount":68,"integrity":"sha512-JrwLmpfluZvLnrQQOIW4BsnujG3a65rlkDbieeXxCIRTBLaQamuQrFkFUTSKMniTmo+KYDopBfC0QS4Kf/Mdzg==","signatures":[{"sig":"MEQCIB7W+guMDZ8Mf83SOmD0iVCFtPwuEma1eYkVBJFIsgMzAiBDtdVeLBgQoM+yG0HCFE8WLXjcb2IjztS4NnAAf6P8dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DrCRA9TVsSAnZWagAAzrQQAKBNcW4jthWjduAQ7XE6\n0AgKyWRVNF6mAo1+Dw4rdUePC8Iikb6uzmyMtOnxl2zyEFmeZr514ks2weoM\nLAz7KBDMfuuuTPabAddhVLN9KAPs3e0EXkRiLt4bQ+hQTeAYNqHdB8tBVMg6\nJAUHIYaxEVEiVkF4TA8v21f7+el4WBYC+gpo0tGZpmEhwb5saF1eAeFymDNb\nazekzCpy96hOpxIPGz6/1w21nRwvwaEQIZZdaHFhKHC3Xq1Fw0dWbfBtp+AZ\nPwDshakk0r4xJxFgfp3s+7BoSx4JyD1rBlMyyRxrdJ4oxOE7PUMdR/f34wdI\n3gS6RsHzrVEDs4EUh4U2aywW/u8iuf7mxgOxeWEW6azxcdRoUZlJ98GGsAhW\n0tJAyoJeaIKoNKcnohtbP2+p/Dyysez/mohqoi5vStZ/4+6wML6PArhq4UOh\nGe67B/qcf669563wIXk0e31CtQ9ankAWH4hM93MBJjaypXSlDrlik8hMF71P\ntWEip1i3xIDcEtMd5mYXIZb5u4f6o+GHQQ0FXL/Y+FvtFrSy22OYTtKInVXB\nZC1lwwGW7zGkWJ3A8Zu2Y2gRE2yAF98hMFsuM5CPK2ozlrtXkIBCn43u/+4H\n1bSeknbmJtQtPeT2VE3Z09Hh4pEpaLwx3zxaFu5NhpcFMnOXbhZt9mGygF3O\n8Kz6\r\n=Z146\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f041a48c9.0_1596149994929_0.5397470217964113","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"23a18c86f26fa0de74c3cdbe8dfc6087af8c5478","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fbb1381e1.0.tgz","fileCount":68,"integrity":"sha512-2ROXFf/g92wHAmfmpUZMl65bG7+PLDDYIwTcdTLrHRvFQRr0my8hK22P0iW27Zeg7S//0bNnZxqzod+kWI7xpQ==","signatures":[{"sig":"MEUCIHKOr6IsEvaf3pbM4jx10UcY26zMQGIM3vM5QrW9Vp+vAiEAyv9lmm9YztnQaeng8kuuj93SOVuWvI+MaMTUDJTMz4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3TCRA9TVsSAnZWagAAKe4P/2qxTfiz8mJ+QqeGbFbJ\ntSaPuO3zDHlvlr99B4HbmNetBO5yTtHzxY137uxzSVo5StFsf8rNQ5wwreIN\n4yLIEUZWGYO+vtzKw4bQ/d7CNi64Qa0UzTl1XakbzAAI40nq2vFU1kyYtzGA\nG6qSHlY5CAGskmxOfFwxucTLhWwtUrXYMxnn/2n0qvXxE/omrEk8vAomQCEL\nDjutZA6j8KtEV3FTBL6wcVlRGtB3A/chhlDtmPWfc7TLpUADNGe1eAdP9S8E\n8JgBf5BR7xEuxsNWSAHQTRKFEO+8KIpi0pNnKXcnFi4ON00Fib/cq5EQNaKR\nqoQneFiYUdlbcm9XewKvD2zz8EUbPwCRSuQopD3h/4NvUN5mzFJoLdxIV9pp\nVxcTvrfKWZChJqszugkwudq4tPU94a6yuJ0/SxcmMBrTcyJ3MmUD0f0Ne1R5\nSOps3Sv1JrRSPJshqsfG/wS0Kz7LiBljTklCuiU2oLPHZJfe4bKneWydyCWT\nj/fFMqVgq29BNkf0e77ukth6cUug9XuoAHRGDle2WMyF3bBMpe6BtE/aTpZk\nPasGojIfRmzMgW51Aabc84EegLnfSYjTwkdLix5St3JqnMYo2tthPTr3ePmw\nkKgmKGXAwSqAEw0pAT5TVYMnhwFxtK7glKw/gWFyQYbIWS5DoRhrZ/ovwpaJ\nNZez\r\n=9z2a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fbb1381e1.0_1596210642732_0.70158281261851","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/segmented-button","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"833394212731e1932372d5685e0c9ef2bff1c3f8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.7f61d5785.0.tgz","fileCount":68,"integrity":"sha512-QGQUmRdDa9JNK6M5ZYmsILnDpmblz+t6KrIMsIju08ks/OkU9STFbFuNVxXx1WuwUby7RvStje33Te5NnS4KLg==","signatures":[{"sig":"MEUCIQCizFSBIYNgDUlvaLb9EO6OKtjPBnUIW4jsCLZGVuAO/QIgJfIqwLvKgU3zyiGdl4hOe/SFNuCl+jDi/zxjVfM6n24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOFCRA9TVsSAnZWagAAzZoP/iZnQ25MV+arzxRSBqYs\nmG9JNFxnLFhlkWdZDDgEevVgJCUKofStiroObW6mrS920kldXiGXx5QVQ5fM\nd3+lZTtX/OriFEdwS0npWTxaNfey854xXZWLxlCAy3uNS9txeXHb8tIH3hkt\n+M9yosEYJkd19Jp51KxkPbDjNyuA1G5IRqdnKzniHOKhbUNNURLgMz9/cc8e\nvwuXvwUSaz60Jy/7j5qG23tBbnGDBgjY0LlmlQ6kdTjqffD1re6+/BBTP/Zg\n4LKZpt/nKmOfALfdQFWS2DNbAoSf0kRYrjY5/m71a6wM3Oc0hMkBEpzdTDym\n2OG4nsOVL83n7s3jbicORAy+c0P2PB21Co/uz4g6AKhh3wwWNvUZghHq2VtP\n/nPOo34gEVT9+og2R99kL/Cm6XBKzL6xfOLbwwDatZ8+lww7v3AFfoHs55pw\nPnvW8lbBNFXyKEflEOPnLLsGLiokW7AodzRpeAhm2IJca2NKVAYECc2u00zJ\nocitjxkldOYpQTiEVc25g30RJH60xZW4F+dZrk0FwVnE4v0X8Y4j9aKB6FBA\nydaA6yJeXvVLtb+mY8DdGiSinONZVs12NG6G2oQ5Jk0+NaAoz7B/lMyFd75M\n8NJAGbABQtSIomYI3LGkAqUndXNgNgxSbVCNbbsFJ+40au5XyDHZbxZYKD+a\nbiSN\r\n=vMT5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.7f61d5785.0_1596216196644_0.09632947183676865","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"71ae7b1d0fd82e2683c1bc0a784f5ae45509c872","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e1bc84d10.0.tgz","fileCount":68,"integrity":"sha512-fbAZcoz2NcJhLI18zgNN6BsnVHh4nJck+MVYyZ0JI2a9m9gmdrxYy0d8TiKo4CmY4zHyN8QNPuZl8ODGJ/HWKg==","signatures":[{"sig":"MEQCIGKEeWfVBOkLZwiTnXWe59FYqTBa7jIzD4aTB2/wW27yAiBXfewCw27wlaFJxxRsW3nGLVJLwQFVe8rtpTIN0XBqrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6jCRA9TVsSAnZWagAA9psP/ApAcG9CqWcXI3zLGdEd\n70BUfjrRjuNzuf0vVDtUeKhd8VjMp3l4SqCI8SUXM/sKeSqdMh/T4lMWv6+h\nXZ5eYSSOme64MLVKRKUcolJQzn8Q1jweUO2JmE7Aa/4Ii+x49DFxocfjrK90\nd7c5/0Om+CfDa68gYLPEJHrCjWTKJj5VVGN1KiiaquVcusihNP7VNXZ9vCjF\nWGgJCjyoqc0KEsYGpTKP8E04f338LeDQMrcePaXUBE39Xm5tcY2nvi7wA/zu\nQT97wuDBEgr8GLSrqIkHP0/bM2CzzwsAsYM3QNToZq0NpRdp1Uqv4jfYo1FL\n6vDv3jR4cliNkBSwm1x6FNk3VUiS1lOIwV+cScdmDX8BcCcAEVI/RNOXo/Tm\n852Pkz3Dkeqan25ICo7eeHr34BLBiE6akYC8ke00mUAS/YwQlaPo3WbK8jH/\ni0mZW0Kid5RKFLpOHrZcF8degkVGwek/qIsjX7Pe5cYZVBJCOj+p+LDPfttA\nwJIUYL2on+rAfrTirSjc0RZ2oBlTuS57YgDOuJ8dWjJCaIGqP5Zcw8SN0s4P\nHIfZZwmKXQBBccqTpcILZhnutO0MTE126PYQ52DHXTg8frNPgzwM4c+wI7yb\nED/dB4pZmqu6TinOWAbt+0pQMiTROS1aEyA7t+oWpfy1SANxTzOihlk/AHmg\nVq/V\r\n=neyK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e1bc84d10.0_1596477091054_0.9529997603751847","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/segmented-button","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bccff1b1a9ad6842fd9a671b2f9d43e56e6d73ea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.096a7a066.0.tgz","fileCount":68,"integrity":"sha512-aRSOl+4SbPxS1EOIRHqmNdpzcLMactEwDr6nR3W/6KqGvhupy++0ciwgx8rND/Pes1+mLdjhmLXQPzNI28T1Mw==","signatures":[{"sig":"MEYCIQDk1Jvg5jxLaYnsvLCaZBb7kJV1W2IL7/aKvijoHhlAuAIhAKf/ZYkzDMgGAiujlHig15GZEyVBJpGba9dypvgkn3AQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE80CRA9TVsSAnZWagAAeQUQAKKZNmuiyvGd8wCkGLoW\nS4yJlldNDORNdoGYKqx09kofjvWDkt+4I3EL5eYD6hcUfZYlA+XixDzENtJ9\niXJsTNj9+wal+s0EKPTJopcdkGs2bQvZAxRetylg3Q53oF0S7s5AXVBlyPDb\naMmKWJ0vMBXBRJLu3dII0guBWjb95GZ9OBorFbvnZHSbitg1uBOnnDM/NIiI\ni+cgpTMULAGuUUCCktP4dBdEy2RxJVBML1cqVfvVsig/4m67y58jiKzSBK7G\nDJEVqMqNOoqy4KLz3dhJYOODpiZP9xi3UKcn24TXgZaPz6CZgD3psTRb1dyj\nOObmMHChxs1vh2+IUqGuYmPXi6d+sRc0rOZSbMp1nFeMfh9FzdOKKNG3BOwV\nWctma64SdOrYvWQLq1j+LgAdxjxo7WEzMjoCkKmwa9eEAScKcRjaYj1Nh9Rg\nXCKVqseEF+QKKOLW9pPhF+0ZS/PKfshccY1L3NkJUkHtHwOrjZT9afdPyko5\n2R8aNcZ4Ow0T0lyNpwOaT9VWkpubkkDnU+5DO8XF+xMIqUOdC6uYKz59quOt\nrtBDYNu7HB2eaurjB9ajCmTQn81ml+EqhdyvJ9WPmVGRCX9xA5GrjLQrX+RT\nUuCx8wg4wsRNpo3sTACqxRZ22jHt5JzmHDK1IdJwlPA1DVRDNyLibBX7g0Yo\n0r0M\r\n=4y2j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.096a7a066.0_1596477236306_0.8077932997775035","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"57fa3e23891457e69aa29a8de4dc41510a7c6775","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":68,"integrity":"sha512-DxYU0e8ZASTe1cq7jd+tFIEaqFYNoRFcNB1xSsFgJlOp6C4fvJg0JEfptgUIUE7XAM7vdbVAFSA/R4bWQZhjfA==","signatures":[{"sig":"MEQCIGkEphvmHYkkvw/qQwo6FC7OellmVIbv3jGjSPQL41LxAiAJGo4ikILGTdtyd/1b6FEuH9ZHxY/KSV2ERpCamab0cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9TCRA9TVsSAnZWagAAaZ0P/RoSlG5RSvwE9ZHaonUC\nIGVpERP5QqW0uDq2vtdfCTTaSult9srHk+9EOnvZmmQXNO8SYeGnuLNbE2Av\n5eSsAwmy+BB/SSgRuW2jd6voS3cMRrqmROHLeehm3GjUJ/9GQGDBK/+WyfVy\n4d9hnn7dVjSNnuak+xypnRThqOfDNSzD+GSKY26w+ZQZ7vy9x1k5LLfx4m6V\nQ89nPUC5OKvlqujYXSUghAI2Vl5xSEHvqGb0o7JIGekmTJw73rYWCrn364h0\n2bSvk2YaQdwjKtO5gZ0CjmANYzL0HQQ3vg1blUueASMBzbaJi2IDG+y368lZ\nc0OKAXR2rwmKAf3Fk/acadDHwq9cKj4cNXE6lzsdNJVTexR5Z31tQPI81Zcv\ncPhALRyrFEMKXBkI7z5MPTv0HOtlPjl2Stn050rP+brYx/PHxI1P00qCE1Xg\nWVEiXJzEhmGah/7sVJQlvDvpP7QTD19JqEt4XgAqntPRNvZaEE+EYfpj10uu\nY8wcziSI6YyDWV187usbg3Fef5xm3bmg3lLM3EH8XX8gMXLkV8DkGAqYAY6e\nsi1DPtKGJ96048ZZgCqvp3ipxBalzYkkedKad7gqyWSd4Dlmt3jcL35iHdcl\nvo3nQRFOhEQOuPPNLbf+0+3Gy5ZX9/15gdeBFKy+hJ9TTSOSbbVd1LMBUpZY\n5xfv\r\n=TxSv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.aa3a3e5a4.0_1596477267521_0.44467033927988275","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8afc581f0b18703583fbadccb1c619ff0e25a132","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5903d39af.0.tgz","fileCount":68,"integrity":"sha512-kAVNT+zXH9tC8RyTnoUrvgUtY9qKvhKuMrt+sz9NvwDXGOS0JyC8ob8niWo9mDKAHhrxRyqWSZ5yIYOZDnMxNA==","signatures":[{"sig":"MEUCIQC4T9w02CS7w0pN3lPODS0jn6M+s2mklTiMwxt7nCYCLwIgfC/DF1n1r4IkTmvqOKfP9CdkrNG48j7mZv9ZF2RHEow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9sCRA9TVsSAnZWagAA2KcQAI0BMfaLJPaRJhc2/4Ma\nNNzWH8VY3gq1qpKrsn6vBb3B78IrsNGFrbhP+VWMYctxSKwJQ94fyE94AF3X\neeSBl2OHkF+5GIZlcFbcRPbU51EaGpoBXLayeQ5/GK76CqdfPRzCUcH7c0WD\nW0F2197mTMUWUTYKZVBBK5h27D8guhG+fyG03Ul2Z4ivK9QM/vUUpo17gVOP\nN1nhSL75gbkTNaq3pm5QEqZ9ldreJc/GyoFbDEcFxt+BepacC3S9ZTUFrVfl\nb0axgYHux49dL4zOD5yW/QeMI2iTawLzTfytfyZUO9pN+1PVPM3TgBI0+5dQ\nnKUif/qqPwbcWu5RzG59wVl0CgA6LTXFqoCPCtYhmO5lcHMD85IkdZOd/qpb\noi49FaigE2uVXzisUAlGy7fQqrS5XGQ0zSmsy0PvqB6W90xUBlcB7A39X/+b\nbQ1uRwZJnGJK9t6QnHKm6eZTH0AIDfam0aMva1YFRwVEGjxmxxiV2ynhthsr\nyPi6arBd/S/gNLyLWCjvKoW+M/1Ej0PnEC9qe+usJDzoLDWkHeyRNLmc2LKC\nVgsnplHASam+G+pdBnhyp4Srej8UuOejuoB1QsfV+RHpU55xg60NSDuPNABJ\nHBGCyM0yV9ZgDtlPU2AQqFqx6D2YZhOYqqSKbjsSitiS8Glbrl/0JlcOWbgf\nQTA4\r\n=BMxe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5903d39af.0_1596477292227_0.18064855423243964","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/segmented-button","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a30093c0ee56fa6698e7c00e3beaa6919c4ce354","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.72258f898.0.tgz","fileCount":68,"integrity":"sha512-UTYfwYYgA16/iIEJnp4zgz5sNLEBexgvadZxg5eqYOfIODZadaf6cqe3DpnTsg5CJL0PsDt+ofD6ouwsjp2cmw==","signatures":[{"sig":"MEUCIA7BiTYVIjnrFt/CJJVpWtLvTl3kcwAeTvCOQS8BPjLVAiEAtJXEnRNv0wrIKniPnj17bOTcasigah1H+bZAO9j8X1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcwCRA9TVsSAnZWagAALrUP/RD0MeNhXqoxmnff+Ck9\n9HreO/ldPhsLk6T37cZhbUgN0iK/+bpnmsslCVWZ+eTG38GF4ViADk/RfPLu\nN+Ec3Ii6Er35ElvmkzJfFzUoXrB5DXVMuhZQ3JAM02YIMxFg2pDF0l6k6+mx\ndqWCy8J7+whbNWqtBdCbD4ykTRXzckzPBR04rHFnY6Tg/YLFlfzlbRLqAlsX\nIOxFrcdy14aIZ5g0Dz35B36/paMhaeQcrJwh2R4wWmnHbZYmwNwLfTYzzmYO\nG+BJC6zRFFJMgvtqWKJoI+Ckqa3D/xQZ/8tmaKA5vUEebUAMq/l5klsrD2NF\ntcvWvlS5G9WTUD7/GMbiAD0mNa9vUh/rWO6cjJSZILC8e7AHoSmEe4durpQa\nOoWWt/gzzGyHVWQWDXlGxb3KMBDm3OrcaYeQuxCF8nQE1G26QedBpmwFSVXC\nW1Lq1bs4DubW/1EyVYJSJ/HmYb6tVh4ZWVfF33uowGR20DfZ1+czumWQv5As\nuE9pv4uUdB66fvr1WZ6k7p9anSiyTdAA/XUvRiJoQ4MV9vWyjEJx4Ga8tHic\nLejze5bLGpGpNNXx4dd52zey+KZNXRvHBfXarWwUkMRDeCu+BcZePAkCH2fK\nLQrvQAEMXZtcqsjBat+CceKC+RuUFfL5baBwkO5hbG2WW3nQDPguSOsp32qe\nQzo6\r\n=aacu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.72258f898.0_1596503855844_0.3353505006524202","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fac487b2b3b24015c9a58e20903e9ebf6547e507","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.1b44b43c8.0.tgz","fileCount":68,"integrity":"sha512-B8TnLHC2E4NpwpAXrwlM0tMbIb6nQzUCBQCrT0X+M0BbPOIfs68mjBm8PZR7b+SvY9ryHLE2G3f4Cf3dJs11Mg==","signatures":[{"sig":"MEYCIQCulABSDOgWA7Pl8zlbLRugLApSg527LXzKyhkbmrZnfQIhAKEdwQgOgYHYMnrmjDq7oDP7ktJ6E9MmiHFJXnCD3DNS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFfCRA9TVsSAnZWagAAEo4QAKRtbjyB7By0yEggk4TV\nSB11sUbtpJqRxR1hHgFZ2JyBqHVfAN7NaFemIcPjH++wW6aIzf+3s0kHZU46\nAv4iSnmQh1YXCHmRb6aTQL2vqHwoeJ+oH5BKel4LJYxKCeYfcHLXhsErznA+\n6lgeSjw+VRXzqium2Ifs/PHbwholn7hWrLv9T34IVm6QVrTlu9LTjsm9/Hzl\nqn9dRY7z0Ve/9+6IhdogbQ+sFDo/UxO7GbtomcsTVRrcEi8nCBmuIa1fTC7f\nPH2JAuxL/dviNmavtZ8meoN6xPHhYqcWLBLzds0cyQL9mG4sVrHEYQ8d31ID\nB0PCcGzqgAUfF4heVZu153OJYb3FbB2NY5gK/AL4Hol6iC8EliF/C1WuQ3Yt\ngVOrE5r7iECrP0CsSQ0F77LqLOIHgrBmxjXdjC84mRi9awtDgOsH4CNWaRaN\ntp4O/GtnRbiaFIhEVB/0xZ0uqVhWlMgPN0jmRl4/dFII+fRTPpFuw7Y1KxPz\n563ibaDbOdZLsle1t9nGQkSX2czzJ3xJOgjePKPxukXICqpTkBSivD3eyBvc\nsEww4pco4tjrGFmREF4mkM5IuyLWm5kpd9PYehQMyaIM8l/yAgZIHlgg8Pn6\nfIsssqGRzm6Cz+oWpiNv6d1RyTNAeLRpsLtS/Vu647v+msoMU6P2gxl6P1ga\neCeo\r\n=q+81\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.1b44b43c8.0_1596559711043_0.9494642867024274","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8f579c6eca4436314a5c27287e0ea798fea8da8e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":68,"integrity":"sha512-/pft7ZyCNRWbe1E0rnOZMnJLQfVtrfj58b2eGqXC8VeS6eeYdar9d2eNaDjov+k3mp81Lmc+tuRQK8KVuLXYgQ==","signatures":[{"sig":"MEYCIQC7xy307DNUiirUCPSUXVNmR5qQESpdXT8rS921hntBnwIhAOUzdDN4gabwqXWnMFZi+9AqZsdg6418I9fmqzKiqp8r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcP9CRA9TVsSAnZWagAAcsgQAJ/hG1RpzECsKqxpbtnI\n5kTvmy5Mi+m5PDzU0yHgGzIlk59Y3UeMfV112JHAOpop5hoGIJPnRQd9F1rp\nqiQbxUNh1hLpSbwr0/MRDqwifoVcKfqQBYKTNTMdc9p34D9evze/qI5P9dAB\n+e8D9l54STxYhvW0Fv2BHTxYA4SMJc7hr7WRMg3aYCHbadAXGxwNp95nzJIH\n6Lz3iqamohVOJouI6zGziaMPaebAzoTRGZ+y/ZiRImXvSQoGyFkd9hgy2pY4\n/vpEZiLdjH2MEmSWoLAYChhIethXXztlLuOwYvZEzn7vaM13XO2ANeal7oXw\n2TcJOsIZ+Ksn+qX9v2ZNcIhaYCitZL3b/0bTraXeVSbZE9CP38UPTZdJ7+rp\nZgDk8qQ2OxYJguzfg5OwpDDVlWKxXOFJGYxJEVGVD5Uf4ztNlkGHyjGB9TZH\nI68zY0+G+4q1HZNUcT/kB/qWQWs2T+vIVRqIdPrNCwdgd8IcYOR5yp8BEhm/\nNQ6V/0fgm/IxxbTAk/98dspZGnKtvLUxeou6i4r3+9h7pJU4wCU7zX6Q2mdp\nTbxkGICiXNdzufFGxPbrPcqgVsSSJng95plMqTxW5036bf4kFzVG9o1vmVfu\n0gl+khL4aqrug+3DqzRno2BW41r19zj6D4Amyi4O/Mgxb+UopZJXTf5LYvwY\nSmcm\r\n=NPcu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e9d2e2f96.0_1596572668667_0.9169527173676235","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8c09adde7ee74ade64e595556b957d93d366d095","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b9dff0a19.0.tgz","fileCount":68,"integrity":"sha512-0YxnLY15JZVWJv3qan9jA/17d6pPMMtEqgxbjhKA6SizgZDEKVbT+MgFyv+XZXhdZa1UC1OZS0S9vkHTYOfrcA==","signatures":[{"sig":"MEYCIQC2C+edfnHzymzy/6mRX9kGsYJObL62AMlEh3IyXjq+sQIhAPFrdomkPw/XW8zj4B31RVBHKEEifhTIbGkgT0OYRLlJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwwCRA9TVsSAnZWagAAqRcP/007SS5Sw2FBdMuJLT+N\nik9echHlSjWXYkF88ts1Qxp27eUJ5w7vyd7sVAslR3IK9ylgn6U2iuJyz2nm\nT9rvdeTLpwa9MV021dr7FLTglGqGOT1ji39FNl9WMM14bMCi7ITO0Z85mScK\nuDp/lUMMsJ5CxxZLCsD4Qc408xfIFQLX0VqaOo7LU9aoQL1xp/fkSqx5k2Hp\nw8ncUrOmCCsqe9fe67uuiCITv4Hhx0a9IXEe4fxbDwSNJJT/6sAf/Ok+1Bvb\nSphZBeZ27Xh/1ByRXbC7kGqXtGLhAm6mOEjAn4a6VUZ1AUa1Fpsg0YipgqJk\nN90NpmfHdfqYop1+mxLkgKb072KyKAQMC3FNH8yIT733TgGWYuVrXAaANf2c\nC+iylto2XLgaSmezBbMOqn1RmuoH6PUOJb73q4IBPH8txQQRYXwoVlfB2Q9h\nN1FRvlMrzlqKzD8syA2A9NtPU/9P1RZIyX7Wkw7NhzsT7OA03HTEgLCb+yWu\nOhIemgdLXdL24NQbTKed4/chQm36Zb51dvarwt/iTSj3dKdQbjnxPLZVtuj7\nxV5syVGVSgfqZrR6+H3j/bWZBjBU9PabOyy46AAASZkwciWIXmbHQOKZikzq\nQX/UbvjiVTm491YZkhwFMfxW0pzB8Dz0GdSMk8MXeYytKt7VLa6Jm6hCKbQ2\nh1ou\r\n=8Ku6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b9dff0a19.0_1596599343599_0.8529496022500802","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ee4b442a6dfcef7f7f32d3ef4d972785c01c1c17","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2bd09a706.0.tgz","fileCount":68,"integrity":"sha512-ywPWCX6ZcrYw1kt+t8zSRvny6xsr4ZwT63VnUIrKbhuJuVFUT5qBx6djiug/P0D4wv7zaQUTVFd4FKG7bG1qRA==","signatures":[{"sig":"MEUCIQDAMN1x8xJqC8R6lKL4trfSMpQp6ucnKdv+6R8MhRlkcAIgZXMggN/Dh5dBvzlW30oCA6OWGvts6bSVsFjFd084rc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1lCRA9TVsSAnZWagAAHkkQAJlsHPmiWitxDihZ5m8Y\n2QeBF7Qb10gkgzl+1bVp3Q3AXmGMDSZVDxPlY5Tmo6yWmk87nEwYYpJ3YeXJ\n69ek9QTFoDmYOn8ntv+RgvuQtB5KeBz1QbZc5anHjKoLqolsIrJJun46uMXN\nuzhoxez5QMUeF1dr3FLoXAL5EMj5MUkc0vKGTIWD1ACAtYmSrL5OEEv8fBBm\nORDS5WukBpOUV87LFK0qzMroVB+AwK7pFTcdO6DiEaF+QmuJqvaafIvILc6p\n9E+gPUj9jr2JhfjVI03zh3/r7AC02CkTlBfyj/4G4sXjdl7sYnNjFf27zist\n0lx6ACfPHBHBekwIzRLC0hHS2s7JjbO8bckzAlsZKbfOurPjCZzQl2yrQfau\n186hwnbUfabGe7ykMentuOnYszSw2IvqTfwmLvct+yP+ccXN3Uj7dmCsy8CW\ngdRG4UVrTZEmyAkpN+JIUE/qulzoL1bE/kVjaqp050kUiUI3PD4yRTHgLd9U\nR5iI339Dr9ifn385Xvs7dLzQhCxdaZawu3gN76om8pyy+odXx/j2e5r/yHCJ\nlB0rQBPoggwkWEyDSA1m2aiaVfVe2nVhw8pUwiWn4EhNwSVQNwxWmL5gUhUs\ncU7bvroyQseDKuUXZwrtbjQUQnq1YXS9GlGDBAuh9ubExXh4ZzrmeL1B3SSE\n08c6\r\n=Y9XZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2bd09a706.0_1596599653048_0.7511342164008374","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c6e3cec8dc9a8e954a274672cc82c49f1195ec78","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e0560522f.0.tgz","fileCount":68,"integrity":"sha512-jEE2yrVbPPN3qDryFJKaD+VX3WSwRLe/Djy+lwNJmRzf1+xacgmLo4Go5lKS+EcO2v8GU216WZmzNmLLv30wSQ==","signatures":[{"sig":"MEYCIQDi/Jwyy4iXLroEFcc+G66oUpvt6wyxD3ilcDMJbaHQagIhANSxPuFnZeUbdJiY9CHPiKQjMHWOsJGASRd9hk0+1Y8i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupRCRA9TVsSAnZWagAARNsQAIRlpzSCjaOhxk3z8ZtV\nqKxBeSeBKuExAvg4IaEJ3S/l/Y42EhiYeD/3FqdEHj2eJCEZX2CivIrlJ1Sv\nhk8Ja3AuYsqLmrpYeWz66mShb+H6XAujswc8l30otWtJZ+yrPlszFJa585y9\na+GshF2uO/LeYn31Ggw0BcJUa6s4krTZrSaQyto4yiswwGm1o2VupXP4FqlN\nENa7iTwIONmKokragheL+N6RsWh8FSAtHvIyqANCT29LOyQ++wt0l/0E6k4B\ngudZ/MvtUInWpDylL3AXyV1AuITENET4tx5l6HOPRVkijLxpX7l+7ffb9RXX\nrOecjJdYaGDA3pvP53zGdVnl6LRCijMd1Agui+DTz+ZYxXEGcdPRDc4911Pq\nNT3A5RDin1l92J39MLr5IBA0Xo1brRhuHpwCPPjxe5IIFh+V0tfd/OxkdHXO\nwWdJ1NdEqeG6f/TIWvhosXpa9mROSYiFhRJD7jnEOrlwfHae1xn9JKDsomMB\nueJaGtca8iTJlMQLkU0FN1zoXTxtblJiebv8ltRpWmSJQAYQnk7PSZiXWq0S\n0cXEMdQgLi3zPxma7dW6wAy1wGZ3l+EN7DvxaDLp4xpaIm5wnPULaungH4Us\nvbcHKqcAq9Qm7aJBy1zyLGRULl9WfAXZfoBG3YEv67EbefnfcFdOTxckEgm7\nnVva\r\n=WctV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e0560522f.0_1596648017094_0.7512019937538774","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/segmented-button","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"44eec710bc634020cf549dcaa5aa260be91a3772","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":68,"integrity":"sha512-z0/kHyz4OfxtlWyDhmqfKyQun44mL+ElXdKhLzGvCybO1a+SPFHmWQi7D7OdAkdPlIkjgnpVHmzx1gKhDAe3Kg==","signatures":[{"sig":"MEUCIQDtT/WoP+CcTpPRM0aySpdOk2vNcxJS1UDAVcTEDxAjfAIgcWnahRgrVi69RVABfQ/oCMpD6idtfNUuGrIg2YU8Dx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7cCRA9TVsSAnZWagAABa8QAKT3LhwRFdcWaAtdbui9\n0AW8j5nvxH2xSnPkuTjNsQkScuED/zcMelIg/a8m+JKdoYfIG3C70KF3ujLZ\nszFALd9NqdMI8BAfh8bTOzB9jKgwxwKWTfMsylcznNbGrKZDuvl8Mp8SkdSt\nBCGmpbTzhlo286ibUxjX9jQnCvp+H2j1Z7Ecl4lg7IJoRFs29POZB3ytHYUf\natHdZXwnqL/OKEneSopFXmtapdCqKLvuyzauK7F116uSv5yjpyG4SX/y6tPk\n4pO+6KjtdoT8HvfmFfI6rxqcleMzS7iMXufAHYRJc6MQVULRePWz5cmCbvoL\nKRZdhWMeJUskB5+4p+bHQczeET1N6vUWLHkXJUd7PboDLULP22l1vHsrwsyj\nFKhl9ij+Q+9HpJAScGfEyYsuRIQW740CqI9o9XpJ+KeuMXtQE5dJIbhuYCya\n9Gm8p+XT3npGLbBlgqFhHBVdA8cDQsXZ1FWwVkLTrumRQlL8BTb77PR+rrIj\nxNS1nwAmc2nkxR3VYCl7D/Ni88ACW38rajsHRj/3b8qnzFbGzCANNt1foHco\nTKimWtx2igtmuLffDrzh+eNP41wEnYTOQMqC5+k1to5FNmyU+0NFfjOzgOkF\n87LsjnnOOJJJ6jOIGqpIkKeIukNBHYU5rFg+f5n07935O7eTq7Sx7cmgGNXp\n9evy\r\n=AVyQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.08ca4d0ec.0_1596649179645_0.596167892039378","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4236d007fb14ea4c53f648ef350f2291b9c8d1fb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.08090126b.0.tgz","fileCount":68,"integrity":"sha512-3BJDx0FPlf8pdnwnx1IbgSPVv2YXtHV82/fcKdoES/3KKPkJpbbVt9xj1W6O/XTLJe2hQn5IIKFIDpTnOaCVvA==","signatures":[{"sig":"MEUCIQDfA+I1GwBaBCQ0Sy5XjPA8CAfeAJvTLl/CnRAJafWZ2AIgDnINPNdvsT2gKuJAyCpTg+0UF/xMqlcOAhurIiF3El0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrlCRA9TVsSAnZWagAA9X0P/074yYHUazZRhCdgtoqI\nTgcj5RZhpEoqPVvgmJkWElJU0SCl5ta5lE9dk6udOMVdZjVoKAqoLt8N3oLM\nwYIhI7VU61lbUHorIGRNMnmPeRlu6tl6HTd8hGvxI4FUly1q7W4gUtVHaKuu\nwpqpa/C/Ea1kS7Onj4YBLrWJ0VIbrj1bEIaVrB8yaknNxreX82L6P167e/7R\n1zzzr+fvS/l7vjigx2liWhHC0xGCNt7OmIYy1xNdy5sgwHj6hntmo0pr8wgc\n/eF5V8wg0shXTYy159FUOCC5Hlt8vvFQn4AZ4jagZQe/iRyyNsWTNmYwY+Bm\nN6l9b5VGLv2g/3Y+k0sLPc0ByMM/YXxgIqqJEZpKo+ae3rpZXa1cNNhPIw15\nxyzJvL5oyOsY9o8aAsMNJ3aTWVp84auQ5FeXGX+Q8Ep2GfrFcidURS+DCNlI\ncB11ffzD32ZMZDHIJQSk55Bgojmo7uFkSph6P+FdMxySW5U9RPlnydfcR8o0\nzFsjILuFBNtmp/ZUqfa6Q4DOIdMJnPWYiKj3LI8viN0NdELAex3kNCABysHS\nNoGVEXzKqDPW37iAXm1I4XHupqZJe67z9xYH7k72tqWOFtvIttFqHllRUXYd\nUHiKYGXO0HCPxSK63BTe7fdEpYQkWxL4+6vcEzoHjhoVhNT0ix52Zi30+yY5\nVF5x\r\n=VAYZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.08090126b.0_1596742373491_0.4797600146688954","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a5be3372a5a8618f877f84e24cf35d006939266e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":68,"integrity":"sha512-ACYrROe7NWM+pm58o/Q4bdF4ckl/GGH/9fFcl7By1OpKcSla8uXc3zYKztkLhfae6lgzO9QxpZOeYO/EKHkp3Q==","signatures":[{"sig":"MEUCIF5+hh8OT4OK5IKQKMTwQLN+X35vR/OlCepkyCLcfSl9AiEAr/JEhvh13+VlP9x1Dgu+Zj5BVRCiNzFyFnCiTLRRFsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":261057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsWCRA9TVsSAnZWagAAO4oP/1XFRBBnn9T8MrDcOg1J\nD1RhP+TGcBb89VRseGGQwBGmPiS5eakQryTQIZP8d8+hUUPsQtvqnyEoMfkQ\nfvMbXc+6fMXSthQRHWt8d1XVBZYUlYmI5vPyV7zMa5RWbtRNMnUeClWuietB\nkam3xCiPFIwWpxKQDsj1J1r2+zxms8tGXr4XdTmCa+znIV/rKzN1r8ZGR22w\n9GBVrZK/wBJkES/SC9xGxww0k1LPXVIrJq4B1pjPOslHRs4sdiMeOntn6TGz\nyk9pfoEBtJOPByhlcZ4Ahrl5S+ufyO44iwXEKNt0aNHokKpnT/zWcwwEbg2i\nXGBU+/U0tS02/7Au0z3cs4QdzabSfvLEDPYldzOuuw5WHdlquVF+zH4yd/kA\nofr/bjz6B0HYJGMiAm+4VlaLoTjAyDejkVuOhRTwHi2vQ7SdPZBb1+X+P91M\n6GHYz9R4iFq3kkQCWRoS4DFY6VDpHiHcvRQiHhRWPQpIaISgAZDskHUGm9b0\nWtzn8xpx/U2uPVdROdeojbpbDLR1TnJUijcYvi3bAQ8WluQzMmcjKuD32jx4\nBrsVItoNL8F2EVydeIEwiiYQzUTgV9FX+fInkeNwLbgY+/EMofdREEF0kyhV\naOIA6Hf+EonFGONPl/SiACKeyOOkB4+Gnr/Ia1Q0q0dRTd2x/ODIZ0Wrk2MZ\ngtni\r\n=l6ps\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e8bf5b2ac.0_1596750614054_0.8046317587461271","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d6a5bf3b07692452207dc53f04d27f150d67ba3d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e3b746208.0.tgz","fileCount":69,"integrity":"sha512-u80U+pg/+kP4asv7ZfJul5qCEn59BGfhflg9Pa76VNTYIMlDFHfB9sxT16lI2ivzpR0jMCmdkVbhCH8agg/EYg==","signatures":[{"sig":"MEQCIEBeUzY9HzHkSbJlhRx74e+btKVUx6xx+5TrwDw/O9oCAiA29a1KSwIzctPk8vWHjQK3PKVTx9BaAEgvgDpS9Ph7NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOxCRA9TVsSAnZWagAA3GAQAJ6DJ/wKseA9056dkoZc\n/xiZoXnUgR0pu6/fX7xBmKr+NcpFS83YqWTt6AN3cR8+Yk0A4MAmtOdRp/Tz\nCoJ4kkYIopXECqNi1trgmB1JAAN/60+7L3X5qdI0vN+Q3hGjzCIwj+/YUiby\ntZV9C/jkwED0vq8geB6yO9wTiXPjr/PQwRy+lU8a2EU1hcmXOA2PLH6IUmbB\ngQutYkKmkoXwovgafnXJVNDDYXi49JD7ErNqVC7n/3zuXBqIm79Pvtx5weCk\nCpZZx3xxqJ7yQP/CUpZIoTRkNwqopn/gjV80axH5EyG+ePTaUi30IhBA86H+\nVqcqPeLpVwKalo7jIFwwQSzEQJZFwRhdmF3fqXWZBRTjeswpqbIgertdLnVn\n/7z8AV6fL7obrkDUghvjYdyjd3sWb3UlkFXzjL5NpGrtvW3yGwj6+DEbknjy\nQJsQoSIDUPeIH7LhkMZPg5eWgRylTLSvt4J8G23A/zvreZjB8iAiILeL38yO\nHz1o4b9oDK+A9X8vi3RbfqcMDu1OUzcmhP8VHSivNHoR+NEIygcf83FqBqwF\n/kHQKu3YKi6g+KiT2oqVKdzAiIlZFzfainX9x8/VzqTpel3Is2Fj6gB/YB8Q\nnkqg4VGw/AQUVUMpYkOmaHVtj+MuoICJzPLYZ1Iy33xMHiFT+ZD8IeCHXGzy\nVkzN\r\n=UEJ2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/touch-target":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e3b746208.0_1596752817475_0.41611614573336153","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/segmented-button","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2319c3907048de7023cb4a7c91f55a82fd3a2b94","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.96a640534.0.tgz","fileCount":69,"integrity":"sha512-7c3tiTkkE1w11Q8wEL0EQYamNe3r9PEciKxQ3Fvzq+p4Z1Hwfnx2kg2+9VMZSSKT1GqXV/3X5RNZUCZnu7jFrg==","signatures":[{"sig":"MEUCIQDeUK3Vk1232MvgtWrzNisdyL4WYp1IQy3U+Pknv8P8YgIgenEdqjlIN4LisYd+wkze3gz2EAZ2+1/n4L6grMs/BDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":357577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIclCRA9TVsSAnZWagAAcUAP/iNgB7viGcuDtREhGJUy\nVAJfDih4DMWF6pkMAJgq3zziZS9QdnlnFOUES2Ob72FH9ePjLAWUyD2rOkZz\nsK7oVTtiy0vVZ9MA2xt/fN1vig6Ayws5Q9rZ3ppE1frnJq0z/FHenTC1Ceiu\ntKpmaQ6uFESHIQytOvgIpqNbu0wEwpmDjJ7GlE6aHv8EjWpRsZVJPo/DSNH1\n/dZ2zyH0iRmnkeA1zW+2iwMFhNfPqERc0Y5bX0jIvwNklD45q6/OVimnqfD8\nQvmi8/eH5ng77UclZ/DECWMG90P302gRUd6nOgeWEKZpts4/RgATJ5fzcyyI\nbd5WY3Mts7+P7bAQ512eKAC5EyFLdJlEJoQNK/53xG4X5WK1G1XsaxrS8A0o\nu5awm2cHiaZIuqyXa+JbbluzHZxz4pV7f1y2G+A+6r6sHAFEXf2SuMmpLhOo\nJIiXXfMfG6FCaVVkI+gxGVWHFUD4MWXgLvJJDVPN3CWRVTBYLLMsjh6aKL15\niR2aeIDxejOKNHWyBBC8eMyWvfH0xspjQl6JfbmkRgrrGnMS/l/tKsGeFVIJ\nJM6ZYnAGIEPwhnqVZk9EnNOTV07LFiKc6lRAafn3ZHdDQQppndq4vgJJgEp5\ncwmiVTxZ15fD0ws/L7xOS68E3aYNyJ1Zzq6WdxKownhTIX88RMdtlamL2bee\nq+l9\r\n=XYBP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/touch-target":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.96a640534.0_1596753701433_0.17150667638039097","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/segmented-button","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"77b069e9b1fbbae9d7aa8516fb59bbc9576ba266","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.9f9aac825.0.tgz","fileCount":70,"integrity":"sha512-1DLosXfUt+VPe0G62lxRHQB3tpGYuKcB8zCfSBGQ4YJt3wH8mpmVrs6Gu2n/8xj0okXieLPdcFj8kTBXzbtYEg==","signatures":[{"sig":"MEUCIGrK68Ph4tOPO3KtgavGQre7dfZxl6u2XtgIbr1k1Ym9AiEA2vPJM6SzMtCxQKqBch1uHQwAFcOveelZ/zJma1cb0CE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7ZCRA9TVsSAnZWagAAYSEP/2zHlhrxTa5NC9vQxsfj\nVKF4IacfWv3PimXjui3CNnTXfyZhlkbNvkILq7/D4PGfRbcSP1sxYH7Ej6Gt\nL5YCEYwkto1NCtpsURlWyb2SV/zoPrIDTsp1pED9mvvDUaqGTyUza/cJ0A6z\nSYn2MPSs+JOfDlJKsfeSv7GF0QKpgVANhR4JFjAp61QclD1oCc8BX44keD4u\ncXL25V1oP2ODJZ5ihv+al74FrnGwDX2sqof9Ce7qwwim+5X897zcgIHYc9+N\nesSU2lRStAVpCXnIp58r5w/ZDX1eQkFHNqVZyfrB+wHlaIb4y3hMGloutQcn\nKAMfnmajU8K8RcDZoTiAdT2WDcoW8dRdMHF9sHVLutK9Y8LUhVcz03XrpRuT\nDX3ZP/DDvXjUXyaJskzcoHSfXbdnQob/M58slcTqFT47v0iol3yB08K3SE8h\nHanUphnGNbtFUEHgej/64shSv9UeVWGdy8RvzYwupCtE83ofcigbfH8c9lNh\nqeX0qEzyOZtQPH5oTFP1dE2AHdZgwXIv9zx67nQrz0h64hOb3mhDYPLOtJ+j\nvBA6oFQU5JPCW/sx3gUFjSkYje2K/qwgKhr/IsCAu6/BGPU0hC4ilqEOBfg5\nVh16Pv6oSHjOwglHYMO4sdm/SmfuQMH2bBZ7i7jT3/ONfYv85Ju63LcxBdYQ\njYys\r\n=7/N/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string | undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number | string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number | string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number | string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string | undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number | string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number | string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string | null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number | string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number | string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number | string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string | undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/touch-target":"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/segmented-button_8.0.0-canary.9f9aac825.0_1596833496868_0.9722907046435616","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5d341ab4466ef24293f327780f6a3eb97574139a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fc65fd00b.0.tgz","fileCount":69,"integrity":"sha512-gJHNVPWOX1ms0EO55v6v3ar0tT1qC4kWZRQW4jm9pQW6ZC06j93VB5dDNdrAnZOW1VGDzza1Q18QsC+bheXJCQ==","signatures":[{"sig":"MEUCIHnIEaJLp041arOpX8Tyx0ObI4/rPXroTuLoyPrsxFBAAiEAimzH4d+20WjeaqaARAJWe3wJdg800Ro58T05o1tllVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWXGCRA9TVsSAnZWagAA6pAP/1z5bDb+Xh6qwQsO9OG0\n4/9M9LEJNvgqvBto8CURjgNu5k4NhtcL9S4bCell4qhOt+/XS8oasup/H5Rc\nM6bO8rSUbax9tZZolJbWDv1P9YOh5P6M+VoUPC3WH9/JkjPtmj3HBSEJY9hy\n2x4sB3trtGvtSCxa8rqr4O4OG3fi7LT8TzWK+bnUBSFV8IaWq/nYFU2/iTLI\n0OE5bNVh1JbBIe+hQ3XH99CwQ8IRlk/eRx8JOOnQ9bDdXd7j9kpzvjFY6/JP\nA2LdLKYp//Zt6V4OQgWAD+taoYDZZvfs2cH3pNPhn6U7OuAphvqU8xysJSvq\nP5flM8EdGjUcSCrwXedoLwsmMKsMVqPxxaSaSeysJT9g9Ke2qDHzRptczVx3\nG88RyN6cfqer91OppbExuuTYrslFKDXjhqjNXYGA/6c4TyJ1dssqNPkfYkS1\nHYJ8k20Yj5rAIr0wQXtCdQBWwqlneJglXMKJ0dGP1ipCnI/cmu4aoIaYK4KZ\ns1mwDTj2bVyFtjSyVuYd43TXANzMkVnhivhsa4Sb6H3ANaO6tbwitO7iIpmy\n+/DStbQJyQSaKvWT6vmOlenPOYc/a/LFMDfDTSuHP6mJpI+w0eizJlsk2sV2\n6LcqQZGAsqhxUE0em6H3Gizcy/9M+F0RC+QMMkaqoPvlznZGuWGoljT/cVCo\n/K/j\r\n=W4Qb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/touch-target":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fc65fd00b.0_1597072838524_0.24803389551559452","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"26ee95f4a55c85126287b34b50676119b0fc589c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.02e372c5f.0.tgz","fileCount":69,"integrity":"sha512-shaKVhEKi8Es8TgN3envR2OTsCbeBTgGb7lLo/Mg7TMPa2zsdW2yBlhJKemvdJU+zl1shxQTCP7NjLTcKYud1w==","signatures":[{"sig":"MEUCIQCskeZNAdjMnPTqjIIuN0Dlz6T89zzTrb5NeSI+wIYIWgIgLFrTNmkfO/kRztZXzrpAYCSVEO72wfyfqV1D301rXnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxkCRA9TVsSAnZWagAAMnYP/A9wnSR9mv0pJQw85Uxo\nGX+PB8dGp+dZIaH4tqztfOLznW1W188FHZePW8bYr1Ge47P9KsYDXgYMuq38\nYSkvY+tLWuC8PomSsdY8x80UW6jz/u1V43/wzpZnhGlFjp4AzxBZW2CcmBDE\n/URRIMIanc2TSBLLJAXSpL2lRpAjDk7i6V9ol6qavtCbNZqkjlLTZZs42Bk4\nwdhGjrgofY+f3ho17IFVmAS2HC2HYQjZrTHn8ghhldeQS0VDU6UFdgLmYrrd\n/T9P7LYq8ZRkONkNsjtKvUZAoNjDk5b5fG9wKxvFtLEUkCQnaUEb7/nkOJD/\n0vm8WoP39t0WF9CTMD5PtnZ1ERuHMrvOcur7/B75CFq7H+vvM8Qs+8yRSown\nf70GpB2G5wWc1Dsr7shcA/iD4od8q9xNt/2F7gr2v6A/fv4wXKLbA47NCD6Y\nwPXoBrA/Mh5KLtKoAD6/3sHyHD8cFgp3ftSvwXarWpoli+JbGkIh4OihRnHJ\n3WzeyWawM4BISLrcSIvx4GdRTl/9hObh99lalFko4kLgVJENKkk9UFYxx4Zl\nswLNdOmO00EPL84JA26L6PNMV+y4zVYlQeokioCPqOBYfSePaHudoMQcKMkU\nJdWTPxv9wOb6gvJT06sl8fszvDclL9d2Zmey5oC7kM4AG/yHnZ3BhFj40cI+\nzNVw\r\n=HtaM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/touch-target":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.02e372c5f.0_1597074531877_0.2506188683336208","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/segmented-button","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5640ed13af7c9fa91f02188e29bf0c0974c3fb06","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.66669e3b6.0.tgz","fileCount":69,"integrity":"sha512-0VIiO0VoiPU3vvMfAoqNDUcpSBf4kjzhymqSQ1hBe5QlYZSwBE60g2HYvjRnq6TAebswO6hXtAuw8h57tN7Bhg==","signatures":[{"sig":"MEUCIQD9kzVyaJ4dSRZ09cJLxjuT86uOtOx/btbfjAYqVyGQzQIgWQrCOEE4JqbEhuEAPXGGp2mbvmAoaW8VvaDRtO5tFtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1UCRA9TVsSAnZWagAAApgQAIDWNm6ZDvCxbwOVfFy2\npQXzr7rjSxF707BMLWtEk5xakx+g8w0s1yFUQdw/Wk14t/bQdPxDLZGo3Yo1\nTRCOGrVUZRTjtXrH5Jh4NzbqEI+WpAfTQexMPkeaJrnRBHc3F/XXnF9CTG3N\nsY+nfBGfLt9oxPQvjMUrX3ARP1tFdEjezNRmE+6EfPg1xPRx/ZMuFyIdzJru\ne3TF6bUImzA0n+qIx8tqg9ljD/X2tuldYxwGTWdkEVeNUMeDalgpM30esHrM\nWkd3B30aPZpo1WyUPv5+Jcl42heyz8zIz0MD4Y/5+R6euCwrKXMCYK66hZUt\n2bzsNe5rnzZUCPujKcXihYmTyrQ5G78WK1L9IDfTlnqm+i+ehzKCSU6I+f/Y\nO6JcF6dp4iQ8sva5BO867osFU5LSO8qNROl7FoMxhvqzs/QKxbgHDL30ZjVL\nvd1X7mC/uj7NswMlQTuNFNaS3MQodz44O29foXMcwMprOTNj3ZC4IhBNcVpf\n1Kfhr+3U28S/SGm7KamI9Qi9HT/qfK1Mz7bbgzfQWtHWSHYWKoQISK7ELwiW\nX+waox2gxpQAkHodQiR0uyH9Tat+Mnc+WvK2OyIY1fEF9IusjvU032vuknKH\nrGSKcrXe3a7MQfNLVQpZjg/pa8plzzYeY1dl7W0Zw8ZaG7Tz35gKQzxB2Mq5\nwDLj\r\n=lws5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/touch-target":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.66669e3b6.0_1597074771643_0.5515263767361027","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/segmented-button","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9c4d32f8bd47cc7abe36b4482892f3d3f84ab553","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.6d1ea9761.0.tgz","fileCount":69,"integrity":"sha512-lMGR/+/x63WGoI3ewIoEmIzCX7ozWXyF0SNUu+gVQvuWQzm/Urd3uZXzCwsBeHcB4zMJCk2Bv4VmFYm9MM1r+A==","signatures":[{"sig":"MEUCIQDr2pXjiKj2+pfA+YstjZDWgKmxl0z6eirkltanod9lmQIgfD9UrO91a4ZTGZYTfciMrIFuV0GNlFhs0hIPr7zccDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquqCRA9TVsSAnZWagAAw9sQAIsw1RfDYnMXcYhkVfXf\nfi1N6F6RRwVp9wHsiNoW/Dn2gXFQpr2P2ENxYsZr2caPiCHcQTztmWqrLsY+\neC+QkTPgETLloRRNPW64n3utJ58NLzXa/jTCZy0n062QNneEH0J4GcIVOtUs\nV6ZuUV9XTVoS/sybI3kzMlRCZEQa/ITIo1g6NmPp4i9c7VK3A2nNfX1zRdQh\nIn5WEW5U5blhxHXW94nw6BsQm5VJO2w40V0P75imnTV8VeFV+yJYVnAtCzfD\n4FTc75tChNiNZT0UFT7txALSDSDuSRP1KmdHBSeLrDhgiOJ45QGbNBeDgb5c\n1YqW0JJQde6/S0Rumobab/3Zjj4oe+ThS1SESlh0/gQ/CkG0NoUdErTU3GTR\neOghpQl4W7taAtbjG6D6j+i7GzTobdUW4tBnbrpiaPWdPcMAo3Txl9/ad8NH\nq4o7Vzru8fs6EQvlIkG35094CwW3Qxz+VdoWqza2bmjiZeyJUjO9Hzo/uwYp\nVXSbPPD650dHUIYwgWecNdkae+JqWzizYxkSVJeAtfBHriQDMqPyPCqGuEyl\nLhiLQ8R0/XbE1r/HOUoYUXAc4Yly5Rhtahn/XmFPjmxtLkYhBwXdpFA4h0qo\nQVPvfYaFyxa67LZo1kPWqF5ntbEznGi6JXQtpcY8eWfaSUO9gS0XmQRCsmli\nqV0A\r\n=RisG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/touch-target":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.6d1ea9761.0_1597156265727_0.6774112820975235","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7ff268240b0112f8e1854e641e45342ea4a85945","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.79414bf9f.0.tgz","fileCount":69,"integrity":"sha512-o1a89kkdG/i6dKCO2HVzq0CUNAzuRMARz2p6cTtw1yukU4AxAu+8ZvxgPtkj+4ACtCE54X669Mi7bQHpXMgdOQ==","signatures":[{"sig":"MEQCIFbgzPMLPJtPILvWRzVoR60UQOSA0asPmE+yE65a+m7WAiBkGsfefUEN4aagB6oCiSYsu/y9ENDEGpyg5smHvODDzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusvCRA9TVsSAnZWagAAHAwP/2NbaQBAvLTlb5VaPljh\nL6vLzuP4y+zMhu7Sb1EXwCv8KCht30xFXU3U5Femb1u4Rkf131SZzahk4kOF\nycQ25DSsCecrde86f3FueUEkYZgWAHiS/SzNHGZGT0m2hhyoBQ7h7dOaSvZZ\nt/cZRQ468l7sgMKoaEzDwMjPMgvct+kbCrhjpLhE4fE2rxlMRR8iiZv8/kSF\nTWO3UoUMQGQO+oZCa8FxKmwjyr2svPh3aFLwBGcwwAJ7XGAJX4CL6T6rvTk5\n/CPsL/A2UN+jM1SV3ibfdhDsOZ+uUq6MuTuXAeYnKczK27kskkgXYds1sgth\nFuzD3GWqOKYsZPbbxCD2gB432J0EkFe4Ty2FEIu1a1KNN4CIeLcV0TgIQJgD\nHURtFoJ6CWiGqRKTjGS4naTFi/RLJcNm2CHKPxJomPkBBi3HJ9AstMG9CIXh\nUkMYIL70Xx0eGYZgijC5U5uIWB+6vfQv2/jZDcM44TINHgdA1PkvDRN7GPnH\nZNakTlLa2nd4iC3WvKqrT63ipB9uGFQKcbYb+R3ige23ftevh0zrA7VGC5tQ\nLogd5osEuSgk1GVeowRP0YcMzTkll5ybbQpalNQxz9ZJ5PL0jwGzzfaYfIpV\npeOO2yN8z5UhOIvFG8MgUyOJZsGri54p+uDgyIVL1LqoB7j75Ay+AECiLPTy\nswIV\r\n=Hbiv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/touch-target":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.79414bf9f.0_1597172527097_0.08029196699228369","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/segmented-button","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b00f08ed28320c56271a822dcdf3be56ca4174cd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.85a5272df.0.tgz","fileCount":69,"integrity":"sha512-0/eJqW+PsHS5tmLBOtjIfoOXhYgUTWvqYxbGk9VpgxIdrTn5S6p+ArYS3SgtgYYnchuGCc0ZlROt1hav8bcLIQ==","signatures":[{"sig":"MEQCIHdtOp/JvScyKyWOEZ08fgR+FdC9ly2/Rk+mCc6cFhOwAiAFNVlfhmHNGx/c0CxHoGGNhUGSJa/ASZ8FCwk+eP2AKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvq/CRA9TVsSAnZWagAAd+0P/R9OqhMGYxWGwZknhpes\nmzl+V7847bA3bKYjT6hkzBBI6fc8UEUJ45PQO0E9sPkhAAyJvqQ9QwMMKkni\nNsfor5YQnPgO0sgBJmjV1o5pO7RFHKxZL9riqnPlMR7T5RFGlrBM4gpQeXQu\nDOKctNu3iADN5Ig0r6fEy+d/baAEjHWo7xxeZ3Y5npbaAJ3WdGmOkz80EXmU\nITKgVLRX93AkPfAe+IRZ131gZOcreQAdySEDHJU5KXUYeVPz8J+siD/3rdm4\nuQCs4LYpDIvbqfsRPOqqyWuhDDvZ6F/wtejrYARO6iF253+tl+j8Z0s4cYe5\n5Uu5rQ+ofMQlXQ8B87lyHcMQ7YKq5wcJ/qLzjsrhw4ptRKnBgyXjBxJU/STR\nCb5SnOmAnAhCkSHTDbPtREBxunKZ55bN9BrSBoIq5OcvP0or6fpFAfieyns0\n6t/i7yRd9spLrm0eDdA3XfHIY/NZbfG+KIvDEZQlwqRTy7IaSot3zpEHlU3D\nXc44nFqP4tQm4vjNsAyCXPDqRPTAhx57K/VJkyA4FpBpFwhqv/GRDONmaYzI\nYwSb/fygkWuy0zd6fJxAit6p4FRgDzT86u24+dXbhscpkCXHBCsBS3fw6y7L\n428G1ov8Efewaxh0kIZfYxmkHMfEyeB/SpnS+NpUzgRmqLJTmqg3ME9mTvRS\nUvR8\r\n=AL/J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/touch-target":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.85a5272df.0_1597176510564_0.9515552539545455","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ba85eff6042661f8b8bae46b7c698c28479765f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fda053eb8.0.tgz","fileCount":69,"integrity":"sha512-kcKpJTWVslKDRgQjg4kE122ULdv5sCaWdPYYg9jtMolBq39pSJDXJMk14IKyF891Ce4hwZmfuSzkpUIsD5H/gQ==","signatures":[{"sig":"MEUCIQDtTlKj+AH799yHsE0ccGn9cr1615QcRv9aSE4yz3jCmAIgOONoAX6i6sLco8/Y2d/kWYgX0o5UOu4dda1VOOpg0I4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtLCRA9TVsSAnZWagAAE+AP/3qDPXQ+arn/QDTJCgd4\nJ2EOaU8S2wp9VkvweSFnaaDewcCQc/A2lKG5xombyVM5zjjS3pVB/TewtGkv\n8sP/GZLUmY+crHl77sa9sIhyjSrAbc+9eUqkuaC3EhULI3Y6vqjfjLjMQrGv\nJt+s7QxCbO493sKMZ7gLhDUIQgSnbHdiQIgbmFh5eFXJXxJrIwdUJ7FCZDAi\nwsR3LZba9iFPVhv2rz1rXCQOhFCaNzKCIj5ssPHuSSu5+bc1bzpkqmdEPg2Q\nJYSD7E5DKCY4aebfdbk1HIVrjk+JMOngwrCqNLEauIhWzLCyLnw0elJmoBxv\nPwwYWXrXWAq4qJOEmIahiVQbJSoQim8q8h2HAFqLNsjgofmhhgOnGkmjUO/4\nV/5VcCxDdcIiuJ8O7266Wefs5kS8li/ca45HunBaks7maEjzUhAQ6edyQxya\nHnHos+/Vg5GVKJqCW9RMn/a8hmUUApxS68wKFyhXNkBoxhVSAhD7b30BzVY9\nksM9I9TA1ZcV6C3RtMzYh/nnVZ0kU0l2NbBg2ATyf/m9zvU7st71k5UvMNOu\n6J1vC8UtatIuIWYegbXCMc6Id75B1Cw86e8AMYDuHsNLOIk/dhj/UIWgtIkr\nUIT+7C+vTmmXCVcFqVsmG5khMgw0Sl9vtBTdLVC+x59r2p68zsngQwkfE5us\nvaov\r\n=EI7o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/touch-target":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fda053eb8.0_1597262666769_0.1600573878520113","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/segmented-button","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7dd29e1d8f97807978a62789f8da167860f1e2f6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.760873445.0.tgz","fileCount":69,"integrity":"sha512-HaMgqN+iOF+w2k8LhmDTVnf9fHHWqbyS48aDhiAPaa+ARWAxnuZeimNrxGfkR99Hy5skm1B4+TBFgpeagUS2HA==","signatures":[{"sig":"MEUCIQDZTj8LmmSbRBnrvGOQhczZTDa+1q3gb42Pj3ZynC6TTwIgM6npRUzlMrTn0/gcM17zwXCCh6DHqClLMX8Tgz52qX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKCCRA9TVsSAnZWagAAj/8P/j+Ucx1+Tc1IKDo8IZY7\n+Z186uOOsmCJ1cscjozdTwDMBmreIIhiVMRh3gf9nealfc6XQiEi54tntNry\n/PWiAqp371JffU4zc+WXh+n0lXHzrmzWAewanvrxd7hF5VqfNrDUCcz9Ur5g\n9Klafq4LmucHZtTwvxPEvhILUvG7tItHvyamBNWuduCw6dxbXpHy1a+IXsna\nZKomsAEzHVgJq4Fvn1UCdYI6ZxoHqqDBxSs5m4SK0/zXADuziXrvugivOJHW\n+S7UVzVJtYncN8T2Ngll2rS7SiT0OZi5GZVY6cyxkNUrwuqAONKLmmJ6CE4n\n3hgFd3KWbhBW35YmN+bAV7Ox9XFUQbkfV03Esr5vDD+0aadKi+jADhnMepiF\n4U6+4M431B6TVmYAoxnIMwq9mK8EcoQzh/EJVsPiZOu5AsekCyPv6e+RPNrH\n4uSHCQ1pDBMjtI0Zeqx9Iz2MzTvywLfrJSO4bxBJ3VR9edKEMJvqnX61YMi4\nm/tEpPeVBk+7r1woqAsGC+XnVPjeYpHZQ/7ovANnOny945kZdbkb4QqJRjM5\nu/6mHQquIsA3AlQfgDt3ZKDMy2mckmf0l3nfVZSuOWaNlvZsA/WLxnF8Fk/b\n2Y6E5fEa2jthlh0PoRYmAxoq+Weeazur/i212nUXUc1oHI5WFYoxb1XU5/mM\n9qhb\r\n=aiz6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/touch-target":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.760873445.0_1597268609610_0.019469764795382538","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6b407e679186e5eb7c146d2a9c92f9e6a08272b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2f4711a30.0.tgz","fileCount":69,"integrity":"sha512-zsQMvUqzS2slIRznZWC5jY1vM5KNldxv/E8TVcTtylyeZHMHHzQ1kdKwa2cScg0bxrGVQCRrUvPgFXNxhPboog==","signatures":[{"sig":"MEUCIQCDp2fXYOPCd7zsZmJmaek4+zC48R7W0DcYrwWuycicXgIgdmK7kAnIXLUR55X4vrCIpgHp7wl0XKpPdnHSnXS9eUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTXCRA9TVsSAnZWagAAGpgQAIb9lpQ+INRhbavWUGeA\nX88XunfdE4yNzsI6B6m5F1WnWcZZ1ZStCb6BY3xlGrc32Kn+p15GAWn1XHAI\nyQDNQpLwXFx3122zUD9j0AadEv+XVJGEIc2mczfhTEb63wM0tLjuS9a2Xtm/\nCXkoeYpLJRUmBliYMW/03ibrUqqrRLMPOTRC9UvVPceR0YUWea0XIMWB/5mM\nRv1SGkXpaGiv6oxPbEBvIuNtHu8q/qWWj+ADFFrlbBTFQE9GKsvGzN2po9K9\nz431Cdc8bUzssupwzADOB2rGTU0wUDem8mcphN/C/mEqx7FkcQXXgZxVJjHB\npPPlmMcJS8fZ3Gn4SfmSAxnGjRjjVhlvfpj0z514K0gYURM9N6n1y1gHgUsF\nArv0ZoDCvwmbQPMtsZwwGAO5XPTpOPxTAz7JJ4DaDEBKv3hmTca7vvGOFjLX\nndvDVsgjYVenGEN3wt/6tGp153YXSGUL+hLkiIO/+YgmArgFNBJxyY3a/Aq3\noGJgZa3uHIR0dRYzudVcQuEWeYMNOMKwZWn/cQtuk4GcXLv56QxFTzRoetsG\nj+5nuXxwgw9w6FfQSS5iRn9Bbkx8BzaGSbuM5PVxRViMTWFnWSqUXPFK/A94\n8S79sDFJbHEPPXQOlPWshvTFH4yC+AoYF+7tYJ6Ik+4praOuLrZDIDBQEmWS\npg9Z\r\n=tPp1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/touch-target":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2f4711a30.0_1597269207182_0.6244200515343996","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"01e1a97bf40ae9987eb2591a5d841281e16c37bd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2d72f3659.0.tgz","fileCount":69,"integrity":"sha512-tjgWrhdURcMqV+Aoeek5PavhjVvPDn9oaXUp00Ki3ficmydJFSmOYvWMIZBq7LoS3FyNikA2Qpp5QclmEGCO5g==","signatures":[{"sig":"MEQCIHJcixFDQAkl1iVuERcUuoZ8IMGwoX4fyysKp5zyDD7QAiAa4Q1jb+IlcAn8Q0HObdpixSSJxfc8VJ68jBpBOLBoug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGabCRA9TVsSAnZWagAAj0kP/ivs/EIq44gcZbFs2rTJ\nKVHnWKZPyySgbpLIIa6QHnc8iHSWddCybe8GQeEzRRT3Yjw5AONWoZhW6nCq\nu9OU0xtAUoKjUT5oRSHXV6rG9wvpgczbOMFsPZVhmMRkG0sEgGvENCyQ8sYp\nhRNOIqCDzr71pNAbVlh+wLftlhEutlYyJnLm5dIZgrAOmOZOG24D+1MPcqqD\nFUtueNnUMvBotOJVchBVebrHql8SPsBicfTKUsrRT5Lmc8DXSoPyBmB1OkbA\n5fOpeTn+tmOcpUvXdRP9HKtBoDert+SzF027j+Iqy7MC6WvKHwUqcM9LgBGY\nRL0uc06Ld0BtvEz8wwmrKIgS5PEzeKo/wUjbJAwpaPcoUSAF2srFI0LOAVTS\nKQG6fEO9Y+b7x5H6nYbAhuB9S4zTtUuxODmf3pxdVUIIsvrxajST/8XvWZ1d\nc7bx6yEFdjYP6C7J81n7ZVEfMcmlY+br1aprr5Oc+WoiOS3gxvu17YtLud8m\nZhcb9sYUcUwZLnIRceZzMPi9tHS/9nzKWzHapTmX1KpnpyaULkiiciI1zD85\n7MPUW8SmVU8EZfluxnIsl3Cd6VwUTmypdlyiaJ3hjLZ/vxO9fcmrjoAVDWbF\ns3uy5au1cOMA7tb1PTY92nsSobQxO7nVXkZb0AdJ8FwY7j0Sv30Qwe0ZZlYM\n4s7q\r\n=e57A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/touch-target":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2d72f3659.0_1597269657727_0.5294115115717126","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c54cc8942148e30ea644f97d53a8b5d2242967bb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.1fee70a5e.0.tgz","fileCount":69,"integrity":"sha512-m9sHxCS4M9buBspl/GlVinKbEv4HKxE7zhpQTelYXns2hnYlI+iQ3KHmU1A0X48EbVGeE09VhIerc8h7hYaOZg==","signatures":[{"sig":"MEYCIQCUnDRY4y2iw75Qbxo/XpkYdnTJnPyDWFBqvijiykHqkwIhAKZpDKVIEHrO5ZnTsgJVObKAIj0pv0w9xwvz0NwK9fRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHs4CRA9TVsSAnZWagAAArcP/0hiijlHQuiC3zHJDa7Q\nPkBqKeZC8H/iL5layktYnnMjb+vXPTaJ8vrNepWc/15hMRgZu9B/qdkdPTfS\nR6xtqtmQL7Ej0k502e5byxsx3mQZELdbyKBq4TbryMGSR19zZw23LmNSIJDW\nyxRXLOFm8r9adf2hmwoXpKgigRLFediUOpa17aUkIJqJepnoxOHxriQCq59C\nmHwCQq+AtR8UQcKncyugHaOGUJwLj/52Nh+xZmV4tt7ehwapAc8JuBwduOjr\nR8FqAe/5AdLymGEncf17xyFPMjtwJW4D+jYC9WqMHi9JhbR09p9ZdUWMg9gu\ntHNtD0kmc4gnP81VbJAUfJ2b4Arbgooqz3FzKYE9f5UubzMCRcmbhr09YAaz\nTMLOjOA9LC51Ouflj59fbLg0SCOCh48HxyckfWE57FakWYKiDGZum0n+C0x0\nIeIoW0CXc5aERjZ8uu2vkzoUNa3F+Gjx5URzaVq8salTzclmNHlsT5YZjZgA\nJvTunXrPUCMC20DgZZw4KyUGw/quGNwHiD9WSrh7vZoa7Gcd2Da0qApfS5qn\nSNze7Rk/zVrvMCeplFaLI7QOfT975b2PU1i5Zq/pfjrH9R8zofDtdTsP1pj0\n8r1kj2ZInAsG2STi/G9c5DlBN0nqg9P2OSjTVEr/IkX9kR/PZQ0gKtYMVBTM\njADk\r\n=uwgL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/touch-target":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.1fee70a5e.0_1597274936362_0.5757749510743373","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/segmented-button","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed950ba358839ee89753ac9feee98734cd97ab54","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.023f3fa34.0.tgz","fileCount":69,"integrity":"sha512-ywmThzcqNofSYUe4jZfRjkVKEzIcBHkucL9pJl/VzkACDzdLMmMtxkkGQwmaGE+VVUawcUhd43MGaKturR9LnA==","signatures":[{"sig":"MEUCIHl8wnBNLk5PNHyOM48ce6xpmceRAO+AXfs9KxPAp8MYAiEAt5nrytn/RG4acgsi4/k4it0qtgia6SMuCCLNE+4nPnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOGCRA9TVsSAnZWagAAgN4QAIsVvonVoarOGry7Humz\nHr2USvJCWjMPkOsTX2JElSI6znQxhl0o2lU0ukOGovodwlZRO/yJb4HvAR1g\no2ZdL8o/q/38iUif/e8DxlEzrM2+/+Bi/dE/UHQL9XgaPUPxXzBiedG6cKZ8\nIX6b1YiffR56yQe7Dqp/odlGcYD4FryyZMFIuocr+rzqDtVYmnWacq2uevVz\nZA88EeIcgD+wWBDuKfYBP/n9z9OP061zgM9dfVKaHom5+IbbkkhXO8GdseJ7\nABH0YB461gLonWOzwcuPpP4IpHLsSXRk/hNPMCP29sJ2/O6gxvEYS8SMogkw\nzbEjiRjvunoQ+a9k5EjLUXz31xm//Z1B7TlzINRyRMbV3o7JUFoxzVPDS54W\nQlGuWlOYH+HRzmTrES6T9zBcdyn/1tyGul81ElXMipgv4ftuA09Lmagj8Lb+\naM1hzfJzG2njaGsQPG9ZNHpOr4158edTi06yWZuDtBEGS3avyzfCxKuHYrEg\nWbxQEZJcjEuuX55MrrFL0BViTvrIaQMGGhZl02UID7FtN1UBWX3Hu95p88Pb\nDbgoTbCftq9m8YnPId8Yerqqcrfya/wGXGlgi6zYJ9NtD0z5DAq8W6R014HP\nS/jHvNIxonsUVOl4KU7If/1jznMX8UiKFgWtW9+SVV8qPki7LMUtqkO2DtCx\nKxUW\r\n=SEtr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/touch-target":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.023f3fa34.0_1597281158009_0.7673853891178024","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8eb80e64ec5df04dff644af41841281151b4a140","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":69,"integrity":"sha512-YkW6tjcgUCPNWZZTYz0RJCuxzgxmghcbM6mFMFSSAaZo2k0Ne/ptFFgVQQ+0S7QNQAFHVdcUv/Fo35tYze06uw==","signatures":[{"sig":"MEUCIHF6mLvGDJNEIuprqHyd8NER8Nfkq7aIR0K8XumExr78AiEA3sMG5CLhcg+KoC5E8W6rHk5F52tiax1VTQLpifS5rZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdtCRA9TVsSAnZWagAAYMsP/2s5j0X9eA54NQUv0dSa\nmI91432oMnXm1Wue9YBgKWSNVyrveWszzrz6y3KmJ1bTIx6Eh1lHM7rzK2vq\nYkdZrM9ActZSn8O5I6B3w1WRGaLRBKJ6QHeNtsnQ6xIHjFS79zc7QH/kltDy\nrexwGgTWoeMVWeeUG7LTaB5mI+pdDAzoUWuo6WJgfhZs0kLnLZ4DjamamB+p\nRBIaXFy2b4tjh3qlrXKjiqZNoiEGZkfaA0BW3VdyWkDs5O2E2VgpItsGmPnA\niBxpl08kRKfsiaHbHWWYF5SPWH+FJUWn5Kq7Nif6dL1ODBPSJMw6F3wcmr+R\nF4KQfSDdG3i823Deo2Iu2m/XWYKXnLht3+IB/Ky5ZhErM9SSMSwIKSS6QsoA\n2RkNo41bAGb2NnopVyoi4JvVck1SkCJYqTnQW0SMIVW2tmRFCxfVbHPPqvNz\ni9fmWjVfKYjZfZE+c595Vrd6nPI3oXwuqSdqvztB2TAUbhGWwAns3mzL6Ueg\nHXLsTxedgkV+0+MHXFA9Fum30bAJ6w+z6e80HGJXRci4AEZK7pUQUTVGOA8C\nD6F/WdXrSVCg+RYtShrJ4P7w2C/AE+YMTq7pNB0+rXOK9FUtY9bv+cce5Yt3\nWFkvCtDYb7zhxPBhhzEpOnfbUGhmWdv5ISxt+Biw83/R3Al1Hh1CBKPLV/7p\n0Dm1\r\n=+nCS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/touch-target":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.80f3a9e5d.0_1597282156707_0.7427927335391693","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"36ac586d7f599cefeb4c8bb27873b65a07bf1833","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":69,"integrity":"sha512-pXTkx0Q30LDDaOt8oukHIXwU5i30sYKd9qzoEtePAs9soFe/6NnDWaf+wyYbcgHcw5+Y/dnCwhgHDw9YzaIKqw==","signatures":[{"sig":"MEQCIEewpCITVFXCO0bLMPf4UaGxewLRZ20TLpiD+TB46O7CAiAv3rZz7scPk6PCeUm/uYvtegQmnvP/PggQ4wlTzAIyAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP7BCRA9TVsSAnZWagAAZtQP/jBbOKlqIgyxDTC2Wl/2\nxyv7lNR5c+AR9LR7ERy+HR3UEJGvlH47YAaBK+kLHWZLRftTiCccJixvWj2W\nEQF4c922jcsfvs8vlStiW+S6vmeMTOcyqMT4CXtttPuAteYtVyYTNLJfpTqx\nNsbXqPfRrIgIR4afh4wcyfullZQ67JprHokVN12+5kaLiMfNp4P0ygC+og0D\nggs2VUk/wReISrDyGsuijxMQ6Brfdg2aZcrxhB3fFj410t44uQl3jshXC1CY\nQJSH4lQxu7Ydd1iPs4ywhcCAacdn/cof2tUxpvRI5I055R2yvOMDGlOjLda4\nUpVme5BCiwm0olc4UuYTSfBGCSTaO8SvXr0EeElUqY7C5s6fRHko0Im0kyj9\nTHnzkWF0SQ2mNX0ofFMMtwCYFgykCYoLK5bhTFhBWNDryOv2qY9gz5JR5DfJ\n/pWcE6ygw1lxcFJOVxTznxmuoe5uSI3fEv3oolYzVnWBY1KZVC3pnbNYiuao\nkgkixXlIuQHkdW7p85Uy7AaGyj4QdpTzHkoVQNXnvR9h+79t3+esAeEsa6d2\n9TSHlSl7tdMS/XGIeLhvB3uudqflY5cCqoGQbDk0jOHrtaxVXA2gHY7vEX50\nJZI2kl9N6Q52zQsQkfd/FwNRyGOhp+LnCL3D53uvjqbKnw0yCvdfL4ihIKrs\nPGvM\r\n=DHy+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/touch-target":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a1dcfe97c.0_1597308608760_0.5415847491674288","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/segmented-button","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"39d94de7f93d103d025a14e3419091a544752175","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.af332d5be.0.tgz","fileCount":69,"integrity":"sha512-4S8XdqQdiE+5WiU2L5x5D/YZDBcsSOpsW8mFASXaldwabm3eUJKWS8pKF1kr9qrUBTOt418M6f36XsJ2Z73aYQ==","signatures":[{"sig":"MEUCIQDz2WyidftSn5JLF3JtVQyasipVf4pU8ZvCRXARypWXVQIgM8G0OgquuLXxPKiw7oT3+bQ8O0gwdMHYE/Mf7EtQlPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa33CRA9TVsSAnZWagAAC3kP/jt3CYZIbDPNRwT7Ww4w\n25FvCA+i8avxPKBUfLoOXoRW/oECLGSZn7vuTNmoKBOM0EeoKYNptZHon1Bs\nbSP8+FFVLOubRlu+SQwRmXIK4FQXz8T7pVvSMZ8YBlpNzhVRshd+HIAokUS6\nD1+gES5M+nYC6GLF9NyHheVcLqM2kEUEjMcpJbqE5X+hcI63R92yV1xHPyv6\nOPfORxnLbTbLQp2guBon30lmCtgtZ4l5NPpJ28/iNFXjIzeNefDg5bd6B6WC\nEcZZjlg6VxDMp71BT46b8U8eTnS/f011R3YIFbqoHMg8MIQDB09lcyfwlaH1\nkXYMwYmnbn59wx5qQ4SJe3u34+UXqot4QfwVmv6c80IspgJr8ZyRf+h3KKw7\nvOz8oPY5tUbAWlkenE/Ogilea0NnllEnnPi7by4//BY4zyzgshkubP/0xIK9\nyr+j1dGg7FlNJG6e6yVV02MXIF235TqWNyHqWtSSRpXoJHQcJF3qkzNOZtFY\nqGEW8D9Qv4q6+Is8hJv6QwQ0UZD7pDI0iUnP2n5PhI1IeVlHhg5rB4CLY1yB\npoeSoIAeT8Dvz9jhVZj5Wu+4k+7qNnEgAhuuTyI9QvqMElWipVdZoAnhNfiP\n3t8ww+ggZ7KY5hBP9GAwXBWY00u1FV7dFb+zm8jzClj+mgI8/LVtOYSv55a3\nO0Sq\r\n=oSI5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/touch-target":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.af332d5be.0_1597353462249_0.18260747681077416","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9dd61bb3d0399c927b8c3f0b25621dad239fbfd4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.7dd4567c4.0.tgz","fileCount":69,"integrity":"sha512-IFoY4WAWrlaEbzhpBA6MBwsQPEdKZYdLHsuFCIUpcCFV0jOxu2cjSrZuUwEaMlInnNqvQ0NK89yQ942BzNXJPQ==","signatures":[{"sig":"MEQCICEWEKSkqbdLBtEA0zPRSSTvF/dZ+E8k9qzLsIAR30zpAiAUy1m6UEVAE3rBoKwb2+IHmM2LJL0vz470/kyU10rtEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeAGCRA9TVsSAnZWagAAXPAP/RVIESVqhWzMpzZrpGps\nJc4CelrDTnEf+3lPevT2mUvF3H53VqRfhGNp/ox/vaI/Tc1eATWfrx6SChWw\npZqFF+9s21NhRSRJ9hKp7Cddv0MSsVwUF1enVGuVjdhOmh8LOjOFS0dkXjbS\nGz5OZU9rJ0H50t7U7MlDwPcjz3FV4s9l/a7Fx0oqGqXIU93pTyIb5NxpoHYY\n2blXuo67untepNdoUoOHfF9yR7jc2FiJBNQF7fa+RFuLKYvbu8PEsl7Yj2/W\necpVvUelLmHgmy5gleR3ctc9Hyrbj9VA13Cc9CP3ABkcRSWp6FFo2wUcI69N\nXLqu2CVt9X3zbuL1jP68ssFd/OPsYCmhW28ZY4tYrveWb8n8uuDB1IYvr4qV\nTAi8QbK5fPD8CH0LarDEoLByZgzWBVxFEVhL7CzKtUZXu0wTMXRSU4/zVq9v\ngedf+VRTzcb50PpjLayfNiC2JkLBgY7nP7xBHIgWkggetNmAytarOLud1Kln\nIJHzeBq780Mdr5RRMWNnH9X1myOwkziAf/68mX/tv0WL0n9TxBtoQybyYt7P\n7vI2BK4I8iqYwiQaNC7ZjKmcg/ok/l56hn4BhdaUm//ZWTmwLxss7JixA1Ey\nu8ZfB5iPdAnqf5SrKIvoxf9pGB/G3003AmEmd1WRaNxi7F05u97bvACY/pMt\nniF7\r\n=y7Az\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/touch-target":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.7dd4567c4.0_1597366278110_0.40871194336609373","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec4b91aacfe1350f1e170cd5c96274af8df54000","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ff870005a.0.tgz","fileCount":69,"integrity":"sha512-ZIpz4RhN7oqe7ZOQAQ/hXjODIqTqgl8szU7DT/Qso9ENcvu83o4xyp9GEB8Mix1IXfszBrwoNbIBZAbrp7xnZQ==","signatures":[{"sig":"MEYCIQDTVhdvtDUhESHGKyoKWuilNg7nuG2AnwSg7L/GwaDmswIhAJ+ngqzPFR1aLREsBRXdF9eoTBkfVl+xH2q20M+svlbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXqCRA9TVsSAnZWagAAglMQAIP8JIw2x4dXyXyzFx+K\nekcjcn9jgiuJVh0iysi3vWwfjc3SVbl0ZEvSjsBOpfHCXX/xRjfXtLMlqbbu\njQhRzVVc2+0CwImNhnsVsrK7o1b7/IthtuL5lAE8LRUKAyoUsPyiDaK8Mfmh\nycm3EanXPpobGy0ymUHNsH1FAj0LJ6nWkLuk+u+M02ONALYqM0iCut+kIr3O\nTJY++jcTddp6t/qnTnYcldSePyOtqgvDcDx0fgW17z3XWVaH4Bj2A7DZq2nA\n4T59l6aaHeXQab40MaBTjqnUOf4SF3S737/fAglHg3q4eeKqIDXJqTvoXDp/\nRPUq2OjXTNbHPCXGulfxCdBgZAFC8EER+ySKEXHUQD6TnLKhBvUDgGDY9NRB\n3tJ+ZgEW9H6UJaUlQcE0/jyksonZUGFE/jfQJEeP26qKsdDes5fkB6nzgL4o\nNj5qelfHPbPgILWwvOTsNbxHMlfSRxfaEQEPMzlRKUVBb5Yrd5GkHD1sfndR\n9OupAyem3qyaNli0T6CHtwkKgAcv7yp7vv7Tyj2XQaTD70B4GQ6mSxJKzppD\neo/VV5/JGrGUNt3FPtb6Wt2pzl7cpu6rTdtiwWFr4hDyZSdDZLLZXpVXbxis\nxeqxHr8xIVSd1TD4FyA1hETPQh7ZdUA5GsqTmvhsGIpIXuY72vTIUEYrvAXv\ngGwy\r\n=7N+m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/touch-target":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ff870005a.0_1597367786344_0.14749081854048485","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/segmented-button","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"adc72f78d7c3d90b5304ef264073537a79c66ca0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.150f427a0.0.tgz","fileCount":69,"integrity":"sha512-540TNvOetuaq+Edm2YU+Yv0eoNHF9J3Ad/w+ka1yBhFrPRX/G9nwTwzXLwbu16jB1XTgyySBcuRmjlnhHOTNLw==","signatures":[{"sig":"MEUCIQCgX7YOnwcKvmH9dpwmDIYzfHXWjoW9YqnoqsZBP+nMPgIgX0eu74IKKkAkXGMuMBUDZ2CPjFrL+B2v0c9hm4cP/DQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHbCRA9TVsSAnZWagAAvo8QAJHA6z9jVeafqLWOj3xW\nEDFKIhF6FI/LskZKSDQ3CGr2sNN76qRCVyK35rPE+m+JKX3+JG0fUNK5UKul\nEz0qfsLwPEOPBPU49Sizsc/W163nDp8TVFEEhe6OKGXONFwN6bBLdS1RMP0v\nDVxZrzFnW8sCUduiwaMkzgl9wsMDd5w3nzdUvH4BaMlTu1PL8q7BXURB0DH6\nYipf2jU+yPGFQW11tJQI0VOhw9hoEGUI+RaKIHpWUVNOcJIDSLKWPzQaIssn\nnZ7kdwRNTc1J60l7dg8oJ0Opo5NAYRQT6k/xNQuumyFWv3+q8XOOxirWM8VY\nGQKN4wAykwwPDpvY+EcKVnjz2bCm90P2E7xBtag4KiVKAVvQmS89ajP9Hcpj\n2KGMTwoqMgVVH8gps0fxgxsiVS967X9EyQJiCGVThKEk5TTqXgnlLVGM2+OD\n81AS2rxqYsRWXQLRP1Cy0NT+QmBslBhiG886045f5UweFLoFh3ijJI9BsY31\nOIgflSwUyYKmb5n7SctLtmWo2MDkCCSne1PYVtzsZuvY6+dbqZZNEefyvEWD\ndZGsiuo8CZaAbIv5Y6LNUmI4oCOY6hoinnSbXoy2YLiGlAzBHBuUbKnfLYUj\nLMnWNBhxN/fnNVfE7EecCcxZorroocTJDiI/EDHHN0qnFU+ythTvRX+k3YWY\nMxfw\r\n=Fot2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/touch-target":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.150f427a0.0_1597411802265_0.5008097369220572","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"79d65628c34d3abab413b700db7d5a33e5e16d66","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.bcc58290a.0.tgz","fileCount":70,"integrity":"sha512-ruil1ZBUEyRuSrYNEGwyYtGqOyjFDAwLSIjWK9N/u2mEzh+spl2JGZI/EuvR15bI18moTBUauvAHAKzEuBhACQ==","signatures":[{"sig":"MEYCIQDbtT0/S7w968ytLKwCC3bEfcxvnHF+NCQRw1CfJM08mwIhAJbvvqGaJ86Cj0MeUhUnDjLTfMbQEjJUBPeRUx+o8M6u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzECRA9TVsSAnZWagAANVsP/A/beL1XgPnEK9ywMeqF\nlaEfouIZGqhYQtwarnilzIm7tS+hSriHe5HgOzRZWRm4R5wBc3lIPGt8Nayb\nJh8w5otRbq/WoNp8GkTx8vwIJGN2yf0p7JVNgq19fxRkEnv5V95lNyPjM9Pe\nibXpTxz5Z9wd6C2GUjJ47d90CHs2R/BOpQcdTw7LyNbHqPqpE9i2FU5XHPfZ\nBpLRKpBuuljWVLDgfTI8TelFQdTVA64j6F0kZgExlxA+zy8p20LHbGUAHDwB\nyWadCUrANaEQYGFnlZ0B+3hNPig9WX+4HUATvAOaX8m4HMnn+WxkKcYmm8Si\nA1ITDn+psGOrf6IFtNYTtKObmIhvZzt4I82BlgQI1PJgnSjYO+XkSwYGpyZl\nx1XGf9z/dWpMXgSyGKOALtvq54l4lEmqYL0BC8LZDz9M2atlMndMAuvo4DAj\n2/1hnj0nB3PS69JUvY8CbIgQcqdB0z2mKh73ZUjeMk4L9bMbhATcVt3XFXQC\neDaaO4KxrwQu3usyy21BuMKOKeq1yHykYdPDzvFRxuLJJjwPWXgWsdRhs1Lg\nPEofZ4QcEFq/tYNzGMh5fC9Rn3fOPxvxtY4G/Chn7Uu7kbz6YZ3d6UyRC+D6\nHavrn1KwXWTAbcUpgioPLA29n3snWxgzfOxABZ6pYVlneXaEVYwWAB3id37U\n+0Mg\r\n=vSAc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/touch-target":"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/segmented-button_8.0.0-canary.bcc58290a.0_1597447363959_0.6444996976554509","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be2ed539149bdc5e322fee4f6bb7194d872fef96","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4f55400bb.0.tgz","fileCount":69,"integrity":"sha512-63bfnTy+/c5dde8HXJLAuebeseaTUGOvqCRDyZt42hx7VHzstyEj75hYcOeF4Xl44GFgIe0W7ichWe45o+bBeQ==","signatures":[{"sig":"MEUCIQCL5kET6wHjIZDX9hfTEZ1GyWoqHjFSUIcqG27eM8iw7QIgOThkDJUngX/HHfqSJAM3+ZGZ0q6CXKLq+2nRc7W0Nw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKQCRA9TVsSAnZWagAA21IP/1K8X4uAL8KOBsGsg+r1\n2YD/T5KZH9nyABiFLQ0EucB0nAlhfUiOkks7VnDMZXbpdxYcNpsb64mi6uUi\nk89F8RTqUdgCKm2z8H21joSdsmyRZzpLacULDRuNQMuAnntNgqdnrWPaT9lS\n0NnViMa9K5DWvXPkkTHqpTMSdh+l4JBWiz5ezC1pazi0PhxN0AvjVtP9TTGx\nEBj1LrVI8EeFhtxUnX1S9WdfV5ndWTbJ9dvnN/Ou+ZBxhmsE78S8Gt1JHt8H\nSodywxtH/AR9k8aY9fhPiwnmY351Tm3wcTiAPRtPIfy1Glfm6yMLrislb5UX\nvCQdHteUDWm1Ilo4lz9w6q9RBhfFYz36z0RGFnV0Vgpoka5tW6LTumRPFgvX\n3JNrP6XABJ5RAR8Twg8dE5MkL+qaqm6HRNLDUdH6Z8l80ekdIve0KMxy6EKs\ng+Qg0K7Y0PCLaU66DYjMvwcE9TGJu1gbm++ZW92YGN/SBL9LWT3c6/vJ/11Z\n9LsqErz/80fGnhxI++pZH2jaEvvDxuCVfBaRgZaa5M3Gho+BS5/5U2LdRnlY\nEM67PiQXKdqQHYbhjtaa0V80LDGmzpr+GwPeqSurmJkPBpdOCGb60rf1sz1I\nDIwsohFBAysyZ91BfOqXO2Q/DnD9LEJwz7NE9Wplu1d+K4QiV1Y3dyKPvbKu\ntdXl\r\n=+OuZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/touch-target":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.4f55400bb.0_1597682319992_0.7861033540624989","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/segmented-button","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ce024e06e55204c2a0b5fcf7c4b91c603a72d97","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.000d64815.0.tgz","fileCount":69,"integrity":"sha512-UELdissuNNjtFAbLQYoRHdai8DNMKDXWF3qneHnXPaCfbMx1VguBO3r0cEzhfXfI0r0Hsu1fjE/1lky0UAq7gA==","signatures":[{"sig":"MEUCIQCGb9YF04nq6NQPLknbwynfMkYjSYCyCTmfPfjF15KvEgIgId6Z5qoRXmOCUE+NgUWzDr+IOsP0/w7dqzSbi67plKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriiCRA9TVsSAnZWagAAp9kP/immhgugzNV+N56Ob7Sl\nr3Q7/JMxCYBS0WjXwul0cHmQ+gjehdGcGEhavCUb9Zpnbp3D4T7/VHsFjP7u\nrpdcFf6y02M2YT12/fJkIWdx/WwyOOgoPxWj3H5nZPYepDWfX0jWEd2/NRN4\nD96u52qEN83X674ibkaKM3ZX7u6prqJommAQ2wnjqJahirzIxN/8+SFX/Oaq\niaHY/DVBXHEeTFGwoPYXXLuS1sGfMLUjPqy1Ks1OF8F25TOO0hWG99FekHJ9\npDOUYFXaKCXjIT5dboobEaEh3T7x7IK8PKI3xD7TzFovSqaMB9iK/rVeE9QC\nBLzFaPOhbklR2bbk6J4B1PuWDPQN4v56rhz1fbpZmI4gFdIH51/pPqCz5aZp\npa0sEFg9Z6DCb5n5fPOdhaqtpLTM7D1lKsxLj3FSEgoqGdkeNYLmoGaVpp/J\nV6UIAZ/dyAFiQC91AdBNsqAVBqofE1pqdLiiq/7dzGyUOHDS7OtaeWni6rHM\nPzlesKL666pcsAvUYzULV9H7pSWdOpHT1yHvMx6BBocYppqemjJR6xokHriG\nJR6P/ux6y/elg464H/kWlLJBXIiXV8vwfCKRmfORQoCHitvniO7/8lKKGG+8\n6RQHGNMkH0pUpF/WAlhkj2zTzOVA9WJ87986cufUOQ2qcNtmg6C0oic87O7N\nmezv\r\n=015o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/touch-target":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.000d64815.0_1597683873865_0.25539351112353526","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d22cc91dec983a61a167035c571018dd2627a563","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.defa599a8.0.tgz","fileCount":69,"integrity":"sha512-mv40EVmwmjtiAnCFYenE8DuiUIGlDVVZ/IQzanv5IaF0n3wA9TI624+eKgKGORyzAITaFF0m5uLCCn2+SLyrXQ==","signatures":[{"sig":"MEUCIBLyk5EZOAW2XADXaWNfR7SSfcjs/E/G6wdvS/MAM5bSAiEA/g0JXFHuW7xAX4Li6iDEHptJs6KzH3uFCbkOxYgIVw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulHCRA9TVsSAnZWagAAZm8P/jECEy8Qks2RrSg2KN0p\n4KU1VQe23KhV3ouU++Iaaez4HbtD++xNnJrt7ISBwOexAzhKYQrGnFvjbOhE\nTc+I1TMGzu+KQ/J3r3OPiQAogLpw9xeG0Yd2yPzTaBd0JL7Kw+kQqtX7Jhp+\nDz5H54lrYywTyX3/KEwtwTtt1VYtyf5oOAZi6pLiq1le/7psyzLf7gj+Wi1r\ntw+Ac1oTff+0LSI5Ue5UZo+y0BVhpvIQWRVtgT6ZkKHKaxvgVVVj+sIuon2i\nYLyI7Hflw+3ZTK/hFo0YRHpAaGUT5aSI/sDQW0+ihNOzYyCYHTiOvSNZuhkq\ndExIcjz0kuthkWzSZKY8C5jv+ciLdQnvSGVlwvGaB+4knmmJ5+oUCF1mNIjq\n9uNB2UuBGCoGBeQ8aR85IxV+n8fqzfv+R887O6F+bRGBo/ZQ+N8ZH87Rtdhh\nUnGatwbJ1FRylwEIJdB5unC1v4LXdzZKnt3KLMcqdYus7mF6ty4kBxAc9l6K\nSxnb9dSbNzqbd3zMDBup+cZIjO1/Ie78TtirZ2myeyHpQ2ieE3zGj44E+rsp\nSWiUmI2vAgbxYPzLDFzl/X2v05V46uqhGwf17OUtBphgedtcYjdhlDnofR2Q\nPAlkGBl36aB9X+V2OgrtTK00ViTHxCrOuNVtxJdcUGttrl4IGh7TrZr0TBlD\nDtjL\r\n=+xjC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/touch-target":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.defa599a8.0_1597696327053_0.08796039066854866","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/segmented-button","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"26432eed8ce1c77d68a492886b1b1fbd5547c943","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":69,"integrity":"sha512-FUtflQziPoEg8kbteiQPHeS7cm5lFRz4SWzDVvgYkmDSoEgS3/SGH6Si5w6+6aAZvu4OVy+Q2Ojz6wi/L4w3Lg==","signatures":[{"sig":"MEYCIQCnyxmGjGcE0DXAwTjE1EOCoaDIBzd5a36rhNUksv6LdAIhAMbsCcvYQ/8MMmWLObo9SAc7V5WfmEKISSzcFR6Yo6qD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/QCRA9TVsSAnZWagAAO38P/iAGmZHYzfmdIPlnGBvL\npsl/il82p/jor+GG0oMnxoeKjClNUnEe2863ZpEAXBCb/nxRo4ZiejShC9dl\nN8TOMe3Y2uGcKVZjiSnuaEMCLarUrE7FOsFAr5zfSg3a/AM1DkTPxZu0j4RT\n0A6qM3CADKk1DzCxmnAq7aMUwWdxfAXueMss+a1Y7a+hiejiISZcXyvk0cR5\npWNZoXjA/RPZNZ6NrmTdSenAWc/x2jNvCotqYihCWohSDrWkoxU3Av6fgrnP\nTf2GZ/wI6vosYAW9CxcCtQ/pkZJ4trkyGs0RkU3Wpnoqhhm7spU/dezbdHGD\nyXAj0z0d+pr2bvcxdTJsgXMfpEsZHoxlmedkKmJT3ID1QmYGCCVOPINQlgMB\ndyyuhJJRziJlCjIbvzffb/P6STFmeCg7+0Xj4mRvxQcps9jSw/RIiohHT0I5\n2cYLg3QHB0YjFLSg9icmNuemGI0w5hGvT4H1PXtZc80BtaVy1mxMBSjbpWc+\nimPCSEZWVH7N1jEv8RmiifJDqw+vzN5B3odK4orIQZL+Pju3g5IOt4ZXjUIm\nvWQ4AcNS1zDAxbGcRYbXsi88a9lTMnUoHMNgAj1YrRn7Eecb6RwfWRRAkgUr\n19/AKkxBJxTvSSrWrI3CvSqEYWUNHqX98EKxAu8kpNK5wAXFMBt8ZPuCkgdu\nWOHx\r\n=uoD/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/touch-target":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.66b8ed7e6.0_1597775822972_0.38803038710834037","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2e62747a0f8cd0f0dae1c1c06a0358ea1aadaa54","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e2b1033df.0.tgz","fileCount":69,"integrity":"sha512-zi2In6wX5zwBqvVDwIYx6s32nCshvvvcTCeKDdcY/4h7MgtP/UB53BqRX95hPXJhgz19sjt/M//wJVHVVEx6Mw==","signatures":[{"sig":"MEQCIFvtpgmE8slipH7QRq5aSM9bd6sNrgNChmeYCjAmiHfIAiBqJqowXlflweRPMSBiNJXjRelrIw/aUaEkujzRaa2EAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKGCRA9TVsSAnZWagAAqRAP/jX/RHCTQw81PRVX5pne\nrQb/2Jg8Uag+KV05dcZoufDUb8unaBNLnNSnEkQb4nEFckv7JefGvgQLqwuX\n308OqnoxuKYpYbwWKd4J2Ddm3anBAuglzhFyS5PdwHbAqwB6Aho2BA5LR9eO\nrkzvxCrnj1uetkHAOOOoYCT0pbCADxu5x5bZnZ24qDDziAtnFTarGxc34x9w\n9itzU1uFfcxyPHbIJT1UwohKG0bihkRx+tr1pLMKHru/MZv4wpCoF0hNrUCW\n10Zw5puSw2kO5pxXd4iimXZV26QpIX21UYiKswxtqU23fUkf46lP1pzpZ6Lu\nik++umGN8xYaJyjbOnCwIWUcg9LuDTCIXF6z6XCGdzAcNwWf84OQbivqGlLI\nco31bI0WbBkaCI91TwI5HrXg3XHXSc6zb+uvqFapTlE8MC6XUDPyh6xORn/S\ni3yETs0QydAa5ZaitfV9i6lq5sckMpBdH4OEgVtvYga2zEJZK7HsVGchiAlT\njJdhbFaEGzXYSDLJqhlCK0vWeR2NO0PaXefv1+8G7xBFL6Z3kKdsD4eomA/V\n/GhWWS/d+LgvZk7k/CffFYkGFbr3W2r/cFT3az62QKAi+ZvpaZZvk1KQVNlR\nQO1+zNXNWCcC6qwrVq1ETrRoG6RTQjaDQWwgWaCJjeP8ejBkbO7LPvIR16wk\nyDXy\r\n=UPUX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/touch-target":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e2b1033df.0_1597862534454_0.17580072547887138","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"35e91d4063f13c5d70a034a34dfad4683551fb62","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":69,"integrity":"sha512-uLzuXbJTyU2Wm8zs48Muzy5aQiPOvfqiAbyfGcwAZ8BpvvqfPpGsMpJJiJ86/GIPreZ3rkoUtP0nD4udQMl7GA==","signatures":[{"sig":"MEUCIQDQOQuIGW1VmNqPhw5DqLURS6syXtsCdzPbqjfBAhi0PgIgSfzOoes6KPnhC5O1Nzy0be51tnvri/fONpZb6nxIWYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxaCRA9TVsSAnZWagAAvhIP/iT5sMzsVc4PMSZ7Zit2\nd0IA3e9V3ei1lFhkJ9DEVQQkJvjr9Wd69HUp5wn7SGfIP+eSAao7kti4dC5g\nQ63JX+IhKjQcckUXlEFxty0UPkstDhqbiPFOAj43UcSQyfjtDH1unStrYs/f\ncJFCN+YxB533XcQIbLyAlfxoQtgK7AK1ItZ/oUaZSZTAJQiidxou5hcBSWAo\ncXEWB7KurNp6JtLj+1ga4/ykkuYTZpH7dZ6S7HnydYQ47RAj1kSJxxgphRLs\nfBYzm+huBJ7l+q1sQgsB4gsEgDy9qHsjo0VavlEDDJ1yz3/mlOODwR1IhHKz\npQThctRJ5W/qrD+1a57Q6bzklipQfhPPJLgYh9cZa/Qglimlrthp8N9nxqrP\nHzlpWDpfOXbRKfl4fQjJ1YqMfXL2rKsh6JTRDe5Y65ceFyXXfAzRuCtI/O3J\nm6Rhq/cYwc0bi0vDIP1ENH7ROAOaEVzJIBXCepd0Qu5Snccl4SYDbvKET7nV\n7xSbBiyf4awgrnKZagdD6Tt621C8a0OGo2aP8fo3SylMpXMx7GJz/plt/drZ\nIKRNjA3/9XoDbl2xJghsLMcQmq2hvbHquAPraw93pKQB92Judjzve4ZRKbPj\nwwWS/f7Bm2l3jaUCL3AOjFAOUSTplQ4dXtR6NbEfiNm1s+c9yZXI5SXcQH+w\nlUkp\r\n=wNFf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/touch-target":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2e8c3dd2e.0_1597865049700_0.4392399901950299","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"730bf168cf2585a85eebcc584c58c24eac37af0f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":69,"integrity":"sha512-6qgxzcfhG5GIpEO+p4ppVs2y1oR6ARKvaozlmbZnOrjkiGNW8xC78M1gMGF2gT0KabfwHzolsxFcLdhbrfukTQ==","signatures":[{"sig":"MEUCIQCPiS3QTlLtGI2GwA3AyYC7R1OIVnmpMTXGiNXDgeoF5QIgWlr575cIXhaU1KGAPPdeXGehbsuO+OhnorHUXpkStcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXfCRA9TVsSAnZWagAA6KYP/jUN1qjI/KlFEsNkHnEN\nRuQaQzpjsZF7HTpnyMYiDIjZJrIGZgByc67yyecceQ0xjx4U+bwGW7RqYKgZ\nq+TWR+2nEVzZvuXSotxpUlXNTHxL/0iD3A+Yo11oNI396mCUruGshxjnnbl/\nqL6fre8UO5gKHWDGeo+TqeuDIR20IbAN06lJY4/yn5EGnj0MWQXZEWp/E9eu\nywAI6z4IqqjpTuvjEr7Le7AM/2BH2l5n23uolAkVkzpYlaVg1l5+ELpukyPl\nhQyUTOYVFfIsWAdF+C/LylPuK6J9+V3IOIFJ0i/vvvFpydD9TYMhdTkjJl1e\nR5duO09YXTNp3qgTUiJ6e2zIhHOdnH53oUvH8/3xC4IWvJn7zfWEGezWmRG+\nqcCQOghzn4tZ/Ks/pAEdGZqknpOIg8Rb38avk/phtvC46t+VO/yWVmXanLIL\nYY1k/RETdfGv25mms0vpvm7X90NbWuzKGqT5f47wkLoe5/9A9FNo9QgKfjBi\nDwBB13jmXNEQ4Xwdw8ccA5xoLRiexYHFzm6Vt+NH2rUpP5U96Ebw8ordWXag\noLGPm3k6ajLjhfibl7Tr2e67X+fsgvPjTi2O3KCCIXPu+V1PnOINd6GpuMwr\nJgN/JBz3C1rX7Y+T4ggREVA1sqkkM42wQlwcXQshMycrzjH8mifPZMTk+fxk\n5L3S\r\n=YBet\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/touch-target":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b2e80a5d9.0_1597875679026_0.5274221532850212","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"761b04c76d724fd425981c80c9ace9aa83cc7050","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ff88df637.0.tgz","fileCount":69,"integrity":"sha512-mPZaJAspW0B3CXpKbuHmdKeh2aFPoGXBQM9GV6ruIQ1YCIeUCpzH7OFP6tJ7AYg9XbE0+J0EuNtEry6+9ETAHw==","signatures":[{"sig":"MEUCIQDLOJDsJY0LYdMJtFxn9epunzlpqXOkDoAAFjCEWAIVhQIgBSWEUzWb0r0EsVTxMjqY+84haINb0iHDYmVYnP93T8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPainCRA9TVsSAnZWagAAg/oQAIheOWMHj/KfLHQpVZ0Y\n9BJGnm6er6Xh2jmFgLxBkQ+oczCS/OXTh78BAmLJqXMmJjK4Ftz8DxjTMx3z\nigFFJMn5QDTe8iQ9jqr1Nsesi3Yj5KvtmhglbKSv/lls8F1H/SSaQ/RNoCQf\n5vGcNgIveOB5tRwESvtu9RvaX8ptrVxB11ZZOtbzUAJ746JFN1UI8tqNqQz8\nUhXj210zjO/y3SoRkAc0XcaaH+Ipsbsk7e2pk/8GYUOYs7XOsTGGng+wD6si\ntWIZ1z5H1ejaTVE5Nz3XKemXxFSxvQCR1GCFukrWfYPxK4JRd7MSK+6/1alY\nC2svt/Dnda0sguslshcTP895sQO2soFAeIB4qCmjqtBxVSUfJ/1CfUAg4ssZ\n2JTQZVL2NC6bSyO9NYlC1ooTMF+K6LGpWfhNS+fU9CQugYSfwW1PTDND6mwd\nYLVZRfPLO994iTdYTta85C0nnuHz3QustfCQCEFzjYC1V17bJZu7IY0TCb9Y\nC6IYeVHDfBDH7IgkIs+12oVooql2eEE6TUbesA3FpPlHhctGO41yMAH2gLVj\np16zDozdsJFRVbpM6981BFCWJtYv/aP+STqXe/d51QCHO2rxh++i9qraZR/5\nHccMn6tHImfohQ5IGmUIu+/UL4FSYKDa+jXCwTRl9mc0i+2+dTOTLA5N9mx/\nLsa9\r\n=8QOK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/touch-target":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.ff88df637.0_1597876391009_0.8460991916458234","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/segmented-button","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6362858a0950d5d7e958dae9dc5e30d58f3017a3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.32fb314cd.0.tgz","fileCount":69,"integrity":"sha512-RkOALuZRXmK53um/Dekcuur4n8n7XW6TpUjZEwrJW6KpQhcSRD7pufYcTv39lTJcHK1gRB8/b/Wx+AR9kwS1IQ==","signatures":[{"sig":"MEQCIB1CV8w6SsufR1h1prVAiTzfAiFY1P1afnI6T2E6UJFMAiBNkhLGYbhNXYYExC6NHJ8kjsVAFOdiKKDC+c1B3mYj+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlKECRA9TVsSAnZWagAAsRUP/Rr0XGWFX8WNb7Gx26HA\neDMleE5Xpw+0LjOOO3h8AGdvsgczxQ+uKx/L1o3/f1FVfguyiFluLTa/Eqml\n2K8NEpq3GwCkfyMnkkJ2LimPThrvOyk5kBHdtuevh4zTCxl1psvxgM3cn4Bs\nY1kpww6YbV+aHzPDhB1TYgH+U6jm4ioHfi6KakC5RZ26QIRvLPWI6cD2bdGt\nol35r5QNx8CYFYxuYQ+MjPl4AXZvwUz252tuVjaAiOgzylEqGURqLbNCGanE\n8jWlqTcPKteRl6U46DdA5WpocXrs6PP+gRVSoujcOwImAzcFQfCfKtN//14T\nSFZKWC/G8DJ57vARkeHfjkBLo4UPJ9N9bBbnE0wmLzY7MS5j5sSI3T0ix2+z\nFgl/kN+C9fpWXG84vHyjHiQGH8zmlK3TsnNu4gn+UrmikFKJbktVXXOcJ5v2\nNkAz5LscJj0l+Iudw/EXh6pFPU3jvsok5ZeVM98i7WWwVdLZvJspvRHHsYEx\nUoovxgt51H6XTzSiM3XoQGy1fz74/QdTA/Oy9pYql+c4iLso/zRwWD2gaDSc\ncGl/SEI9fKDK7B+VEI6/hC5ew9JJI0q8cHJ5ZZyd+PN12abPeHBwxcZQYKDe\nXo8XslYxTmWn0l804KVyh2GJUAQSfSuqvszAafbesvz6K8J/XNMAVaxtaV7x\nwpTr\r\n=ls9F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/touch-target":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.32fb314cd.0_1597919875980_0.1090243094835095","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/segmented-button","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"831b9efe81695c81d4069a527c3391d6f22c948a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.546277d32.0.tgz","fileCount":69,"integrity":"sha512-FLkS+MDN/ppX7+HyW+WRxLTsAC1zxuslMghbLbG0BShjrFgqzkuqoEF2xwKm6Ubg6XCqsSkUVouKjcO1NS6rvg==","signatures":[{"sig":"MEUCIFkpwT0bjbnCgMzhIRvzFJje5bYeI7O86xxbrkggdClYAiEA4ijOHLwTstkqXfHLElYx6OGsZ3itaPw5QWVD1y89I+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgrCRA9TVsSAnZWagAAZc8P/RMimpTDgzcuMM4IgwjO\nDim5qeBVCOYX2u7yEQwGJYOym9zE5Q2mREZn7w3J186jgGUouEjYPtK4giRb\ng+H6ZXqXO/G1swaMjuXMIbKoHoScz7IvMo/cEZxRXUj1Jjc+nfLNRFaoJ+zJ\n5r/oCJIxEryhzskgnIAzKDOzJ8CxrMGOhCu1f4JDurOOwzpdVHjYSnN1mGvd\nJsL1+7UWNQK96WYHrSQFp7AM1iUoQV24NiWzQADiMZg0w+0Tg0WFx6Fr/liI\nglBklOebXtJs6Zuasl2XOZPS19LwAbMbH0uvko8LGlKeogHhJCI5SuE27uB3\n5qtTA5/PNeVWcno3eWWFeMOTvp4eMH3X1uwtRbJb9Bu7PhY9w0gThARLohGU\nEfeIeosN5uBstYLsFcL0PAkDl+jHnzJdnpTPiiKGgp11sjrtxY8YceacNEVP\nLi5hU33PTrUNDxnMW+JOSCae3V5wQXL5D7VQv2URc7I5L4Yb62SNe5lRAtsi\notcUw0opcdEP98VTfKV0sqeg6oZt0JMBWqSI/F8hVCbTuC8ApSY42NP+21Us\ncMoHKFH0eIfihYHsj2DG4Jif2E1eUqZP0dXHagg/n1KlndxmV4WZ8WfoYo/c\nSGyIZ/WDcags45ambLxKCOJbbIUdTIpF9j1+tET3mIIu8FhU4AEEqZWlLamZ\nddCh\r\n=t+ak\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/touch-target":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.546277d32.0_1597941803046_0.2179802657388632","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a4fbd6370ee4fc21c24fe89e3fdfd210efbc1d0f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.da72839f4.0.tgz","fileCount":69,"integrity":"sha512-0DvYZbS/0+x1EyTna8uZBXCpDVsBUvKZ8RUtaXqqmpMQqeh7QRysnrQZZ7Gq19nQG/yaJq+kMyEpmLFm3IhyFA==","signatures":[{"sig":"MEQCIBTK74DGo82zbRrqBPpA8DBC7ho+CU/Ie7Ge4RvXKCAwAiARoTLEWZKM6su7uwP66NVMpNkv09t4UQIME2AhtjA8KA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProqCRA9TVsSAnZWagAAUrcP/iGQhZeZ74VqHJLCiM93\nrMZerXqmHxnpli9LXrSaJqngX/7hHHJOMjoiod6VOhs0ne7LPjEjJBdbWc3s\n9j9DjrpG7cph5RBS9ytAcFZA7f4x4yAoIzu4V51ghuV4ZWRk8hy3dKg3K5iR\nusNXjh3ASfPvzdhL6W0rsO9Wku+HPktJgjE8vJ91alN1agz81c3lKMF+MTj8\ngtcBGJh/Txz+BSUh5U0+aNZ2/p1h2JSmW9OAqv9NzvsPq8DAZya5zCOkofed\nWoqJLMZ//7enbRC9E/VALuBxRD/gFE0QgeU7F6RupKDrtO+7DhPW/l3K7RXj\nGcaztHKE9iJh+Wcyna0aXJhpTlff+ijK9k0pUnnfE2mUD40ac6JJMKO2VQ3Y\nh8H+v7xAd1Ia+92DkL0rD1lMohKRGiX1kHkwT8LhgCDwhfoqd0OetinzjelC\n7gMOqWVF6qFzS54GTGXW+3C5HawQjJPX2jJy61oLCX2nCVBoIjuJAFiqQWcW\nmNONASfBX9+3oyTqLl0UtyCh5/9R0fQeTCrJ1E79QAu0KIKiMrIEVsShFyci\nHR2PBJFRtzabyOMHE/Z9deYf3kiZhEKHsuiVYgXsydpF25o5ZmS03gvAjbW3\n+NFWUI8N/bcVEM0zq4N0bixGBYyIOzpdUX/nbAOB5vdzd7vySlYA1KfeRdah\nQVIX\r\n=VRem\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/touch-target":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.da72839f4.0_1597946409597_0.7674870502167674","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f89ce291e33e274a539db56faba330cb8b055616","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.346069ccb.0.tgz","fileCount":69,"integrity":"sha512-tGX89PIGRfCIJAAyE2WhEfOT4Ljaxa3rPUlu32ugfmCbTdNvz/cYVS3whHg0Jpxa/KoQsNWqrABTD4dkmKhRcw==","signatures":[{"sig":"MEQCICG/xIfvWiTQDOKU8Yk8uwVtt67lqBRuQQOtnR7brf+8AiASMZe2DCog2sXg+VrUb02v7m0bF6d1PXz0RLPMcg+uDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5/CRA9TVsSAnZWagAAC2sP/A9vZJ5+wcrZRhLCKBzq\nMsd+Rsd59y2QG0h/xbdBSQZ/8yC8D0DA0RLsFizW5oe62eomhLP59k1BVVwG\nURa4HGbZB5hb8yjor1pUf1xpogxy+4DJTyPiXS2U8bBcAwHpK7VYraZC+l/Z\n8DD2V86dNUz1GxIBvtb5J1EGT99a+Ghv1pJxYLZT/GvLXGavVhbMEqV1CUqM\nhmKXPFaY2kLH//7JLk2JzLVgnWhZ6RLXtwHzLUfSYrH3u8dSxm7pyHO/RAG0\n7FquiNifGW/PKsTGiBGi1VX5SJznAfIGGEioC8p7E48DTw3C4uaAg1KZb8HT\nOjJmmcxUHR1T4Gjl6Whlvf9PjSfHenn53W3mM97kQliDciCouJSmusaGeDmY\n8srFFHY36oEeDPyTwwyiIN3aqIEFDyVbvLL5fLv7Fw3Nz0K6Rd5thD14mspW\nAJHEJOd+mEODB5vZWPjyuwnX8JlvvcmWG2FQltxgkPvb1RkFvvqWfCAF9Uo9\npJrhxOmB0uwvdplF/+zBuFEuIY4Rn/fhTWjSWWLScoUnoNAl/Li6SBF/90Go\nICCTzoY83qvyrHvJTlp+sA75dMa9OYvsa26VZXBBf3WYkfee4Kz7u9H33tNr\n6QvLUFVVDc9XGMp+5izA46EQxwlR3ibgQ4Y6Tajb4O8xNLI9Dg8FZVrS5ipU\noqvK\r\n=k0Po\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/touch-target":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.346069ccb.0_1597947518592_0.3853354125555588","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"94b8deaa232b2305deea76055e7b9eda9d074347","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e27c5802f.0.tgz","fileCount":69,"integrity":"sha512-ebKLFgiqttC0ALXH4eThb/g7IVWutoiL47Q3OBxlnhOWgX3ox6rK+c8nhv2Sz7VHKnZAMmBSM6OfKze0fLP5vQ==","signatures":[{"sig":"MEUCIDnZ12fDZ/eClofk3bzscvnFdjREy4oGg+D5NXJzH0KBAiEAqX2SLoJWt18nKejJ829mK/+F3+w/uVntbjH7y7oP890=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvMCRA9TVsSAnZWagAAqpgQAJLK0PuYGU6TeVTnEXmW\nt4QdORA+qtxn/llaDavV6vXbE5VvouW6iYAF0Iffm15Y9p2pyVA5x0rV7yRl\nqX7FUb6sRKXFq26KSzL/28sI1S3LLlSbn0w7fF/9jMzP/LgqwuIvx9bTNn/C\n0jqY96Q57pYSRye72HYzq0jL47e+EaW43DzjFiAhxgNsABhB4yjCHhlDoKDV\nkrxIEtGUkCVKyJTQm61zyidfIQDg6rwJgr/2F9nZRut9PiO9Fyh1tQtlM0dS\nMmh+AOBRmoAEx/nGJjEoBUoI8U+fJai6Wy9kUaMS3SCNTWi+Ye2Dh3gJ1WxO\nKoZervl88aoFSGbjAqvXGgM3DbnHfw5FrtPbNVQC3TX4Qvkd/5dw0tl7iPT1\nUwSSGpPBtMGA7kFG9vPecVNsy+1SEK1QW9luT/6bant4EOQxDR0GH5U63dYD\naXx6o3jE2E+CEbFbv6tHizLPdoX2+HvVLBgSguI9m2ozwN/mEuaUkEIOpVyn\nLsqOZpURQgeAoHEs78jsVz5v3kMMvIC78oy1ZfN796M73fmsv6tWunBxMbTQ\nUXUkcL0S1YBMAfMTaP2wfTGsZHX3+DZQGhOQJviuqw6m85/H1DUYfemLTdoO\n7g9XGlawLckZRRHpG6UDLAx8TI5iEUOwQLPmH8cmMiyqR/eKZRZEdtDWT8um\nEVBn\r\n=DPsN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/touch-target":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e27c5802f.0_1597950924142_0.3685184871161602","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"029fa147e088325414aa272766e896e32ca46cb7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.f4532b9c8.0.tgz","fileCount":69,"integrity":"sha512-h/7/qcuO4JOjTYwo8h8wWV2xYclnfcv828nYtA3UqTOFQSqSwEyKIuEE0wWJ8ftzMmGK9GKVcyhUzmwWPGszoA==","signatures":[{"sig":"MEQCID7x/pdABDhCvV6AXXHPwTNk7juSa9iRf2+hBThO2y12AiB6n3/u3xPOUg++2YdgIzDGFRcIgWUZYujwn8A7RGtrFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXICRA9TVsSAnZWagAAUIwP/2UAiVXnHG2dWNcpp7+u\n3ak1DqHoDrS7MMgzT5olhuRuiZYofnl4whVGQFJ5sPfwDWrDc5iTb2tYF8AW\n0HVadvAybP/pUM2Y6hnlwpUvUT9VwN4IMe/tKZxQ5TwES3Jb9grq8X9xC8jE\nMjxgHx+grYcBmpcDj2368/hX4AKojF+VUUgYSfD9TiRhBpEdU1YWrEAt5o7t\nyDF3p8j4fucBW6og1ETbSnIsJxrwBUBochDJVIUgcd1fp1R4zE1aywC6jmBW\npJSUXO2OXZVWNJO+f+v3NtDgoKkBfgad70bUeSBRGu9V98rFvL/ERyBQ4mEm\nluq3ZJ7XGO90yCmo6dCrsF9JIlSmRXMSGCeEw3z8Tc5epiHsyq3fxg1zRi2n\naX86/TGaVTFkSdZv+iAZhB0z2auGPiF0LWBsXJKBapug0t8Nc97FREAjejXc\nwWGOXWcG8IBIDiAyzl2l8L9vlMxYnLpWjasWbddAwF8V92YX+859L81JEpwW\nR77OLjoCKYktrrTfPYi31unOUDXoWyErKyAp7n0Ni88yf/ql25KElAA8mKF6\n+CAdcsk0R3B4bLfFsXeIEuI9K3mcTtHt18MgZgI26Sq+6RHh/BvdZmhFMRlr\ncKXEIe3TV1LSPQ3Zma99/yjTs5M9ha0cJPjYPQHc59+NtukRpnxJ5tvmN3LT\nAprM\r\n=UHv6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/touch-target":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.f4532b9c8.0_1597953479729_0.8583731288623131","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8445a9c2efd75bb7f76f066eef927559b8be7239","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":69,"integrity":"sha512-Fi/aDI35moGBGkj8agRwrEW1pdMbUGuk0Jo9Z394g53x88ZhQ8lJEa7VM0mnSRg1LQbjYzFDkclosEcA13TIDA==","signatures":[{"sig":"MEYCIQCBs75AM2vr4mo3sNbNU4QGIfp0ETIjZlovcdER7LW1LQIhAOFHD10IDDC+uWloaMPRQVUzTT0CFG6Q57ZZcCXiVWk1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXkCRA9TVsSAnZWagAAHZMQAKHPzIT1ZOHGqd9HFP/z\ndrNxCdY7iEli7fGKVoQ6IrksnNW1UJqScOaeU0BocJMDqY2B6P3fS6b4lW09\nyo21HtaiGRXFvMbGgo381XoK649IJSZuFILwCCA3mnLONp53Y4EtpD6PwHBP\notVAbbG36gi7q25QRyCwVsBNTp+FVYnxeLBjy//KMB2U5HaHUwADTXWYSZr1\n4dusnNUPwWPHPJHWSC17lXYv8FPqeoJHFZlxfaZZVif5ZyoYnp2yHOWqwM6Y\nxH13/9n4LCxJdM71BXYfzYj4aBaLbwvgaCw8dgs5VMdyiwOdSvHczwHqgBn2\nxF/o5Km6i/qODqrmMOPoaeoM/66fJouECQ9nMwE3lNV1V7RjZuvE9KmN7Ivt\nAQAvV4RfiLzpCdgMGXKGtQzWFcwsHZyAnzCOaGV6U8HP+SKCkm0IpwgVlAA7\nTAG+wM9BACp8Sp4Z9STbh5lpeiDVugdecjvU/iqijei6UpA80KtNUNWq5owm\nKTi/Mkg3UVpafS7EaIjxiEPGjBwJwm2NHOly0LeZm7GJ8c6rdMCW++v1XuH4\nHS2wBDOaUSmTKbMM64eJsKkbbkuC5V46w/f9WKETgDDulzErLaAIBZZWzfAz\n/L8zRRwCt1FKdgHX15HxFD24Tixj7e/EIrShrDFhkgBHWBJgHRNZut8yebTr\na8DM\r\n=XRRq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/touch-target":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fbf73c2a6.0_1597957604136_0.6195914115970267","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c9179691fdfc9fab7d77aac4ceef15a95dec7c23","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.cf800124f.0.tgz","fileCount":69,"integrity":"sha512-CywcctFvqAbXkrNtHYjBb9P6CVGtRabkRVgWiIms6PkwJttAiCZmmwsbzP9KD3VnymM4yhUgTCXolP0C6I62xA==","signatures":[{"sig":"MEQCIADpuqVVBot67Py6ED25O0HWkRmEk2B3q8GDT2VLJBZZAiAwfsdxmqBMpuaVQ03p47xVnGI/brt9JWQBELc2G16Sjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCyCRA9TVsSAnZWagAAE6UP/RmCBAx9XrJSTNpDdXqZ\nMLmgeNjRGaQhdb2/veNKmg8Ar9vUxSWujH4BubFVKauLPSHvhTy3MHXcwc4K\n2FXNxwJigKeaRmQmoTiXIS2a9DiLOmFC/e2FDHmhSjjqoxmxf4iocsi7Ksr9\nbmZ2/bCWsjCC9nDYLDoQf/bVfIGn69s3B96YQfPLeAqE0jrcr21lJ6NNQuvr\n4uPTtz6bcsMaUJlG4840/qMtgNwDQOCwn/xgC8c3uQudJYzMReyDwOx7L9AP\n+4x7l2U004I3N+AO6dQF6oioAJ0USvy6benkP/xBnOVZwELJrdb+2gUOWFhZ\naFdNR4szLM939EbMunATt8wDXJGQCAccZHSjNkgxtjgL4TCrbYrtqHxiFnU7\nQZaCILAbJJkHyGJsHKnVGTgVwwL4NZlPh4PfFb1KjpTMWnjC5GjqDgdhaQKJ\nTDDnFST+qXc+50Nvpv91Fg6DA1j3UsJXZQmFBqktVMj6xNqoFm4HddCJps7y\nff2FjKEu9gj3mk6DuP3i0YHlJYPGyOfLPy4RQ+VNHyjR2ejTloP0FScMh/Ad\ndun88BR/plCOqZFJUmgb57Af6SJQECS9HWTAbP1Qso4z7Zp2XJnuP4asu7UA\n3R58b5rnc/n63bSHwcUUkxWqD7s2xsmgswHEIrsWGGUA6BzxkWirq+oA22jY\nxdlf\r\n=jEsu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/touch-target":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.cf800124f.0_1597960370230_0.162872034702785","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/segmented-button","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20a3b88c722a86ac0a38e57da0c18dc6818baf3e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.95e4eeea7.0.tgz","fileCount":69,"integrity":"sha512-Sy2aHk0acXmrq7BzNYAUc3wMLkDTqqhYinNk3gpJfA7BI/doV1ZxPgIGWZQmfMzlqBTeTeAAhj7/MRjXtGG+bA==","signatures":[{"sig":"MEUCIAZwCuUSdtRQ/VED/2NlX7zR8UcQcvS/ns53pJvsWuJOAiEAws+sdKO3HX0+MfFkmW0ye898vUxTf6tfuOMgoYEDbiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdCCRA9TVsSAnZWagAAz9AP/2y7VlUTqgQexylk3m+q\nE7f0DGmIV+kLXHzP40nbVNqcbgDCSP1Kqd6xMhENjkXgqqUEDycn2+Yi4Fp3\nZy4z4D4iW+s5jhw492/mtPZUg1As4KPc3mE/bH5ui2bV9Gg7r60hiVu/Vbkn\noLUCarGHILoCo0j4/xx3EOfEqMhd2QyHWp2UKkmNVdqnn3JC4kPCIa6IiEV1\n/hHtPN5TIAKYVTiv/WRqHczHE/gyPgO5VgrC3+qz2qJol6qDhHJXggd/fIzo\nTswr/PKzDkw776epj0uZT4UPa0zeHdGOzaZHmhWbpFjKKseYSdEL5jEiw4oY\n8W2JReISjUz0rHSYvcqyV4ns5rNVCjOYMpaH4MeeLd+X9Q0pWD2OWkTOWbjp\n7NXQgpFKCfURD03F3CsTOIKQ/rfosyL8A04h6ow2DXhzBgdqf6nUX0JiPfsE\nTvcJYplyMOIDQSFnIorfOE8MYiKji4ypAGCRETPJcAAvqHpEaV7nnodiN2/V\nnZZ+bLXSPNhpoytK1aJmQz6BbQC605X2NABDrb4VjlTjFfYiv34Cix052Nc8\n+9rha7Qzn2+bZLIVdlANRAi1hWMMmC2yxNhqngZnkH2Z0Nj5Q/59iIlK97a6\nx44q8mtFCtPt/EQGBZdb6C30qgGFu+26Spv37rlCZb80Y5soYERSz9wHuWS0\ntLeS\r\n=vSkN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/touch-target":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.95e4eeea7.0_1597966146555_0.8021888500944672","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4f8d53184aa8e6d83719e9cb58d3e4e4bc33f3ae","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.91ab1c62a.0.tgz","fileCount":69,"integrity":"sha512-P/PYbNVy0lfvsUL5Ou4LMhuom77lfGfeUk9RoFt5bNRD0REm3fKCoZVew1S9GxWVm7ts+Kd/P4tkxbLqsCH4Fg==","signatures":[{"sig":"MEUCIFmaxDioK3r1+2TXpk13s4/P+jsOMnA+2gy1mNLVBKlNAiEA0xmnbbh1Rjp5P3oifjhfCPC51z5sXumfo3JwY+gIGPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RCCRA9TVsSAnZWagAA5icP/iEP8m59SOs5LRM5JQA2\nlX8V1dzUZt855zqmCNU6VRx9Gd16/fEI2ivmk+Sw340eHw+j4qTQYVmOXGY8\n5WJ7vNrUZxXlOj+a8I10lnu3ota3765chtT+LrDqDq8RPjRKGsX84scPJCvO\nOa4PO/FW3Ts9Xzqdisw6amNfbeYF7Jz4McJslLaOPPkvl/Q8iexURQEsQqfV\nPzL2xSEiQuYrGXePt9Nn7p4BfQW14iGvuoG7SQlo415COYMIVjWGwCZ7i6Np\nQH0PGCYCemjEZeoL5Fcmom1VV8ivkul8UYapa5O8xfzCnXQqgs/okQWD2RZ+\nMgX8yZ4X45P9ybguGU8oiSya9NxrkINeXwDy9vkNj7XfuE7qwChSc49x5HG3\nhB70KOxgtu9LFyzMlUYad0Wmfqd3opWKpzfHWtV+5fZSZjEt3bBg5hJdptkn\nycmarwGwt0zfNEi5r9Py5s/f3O626ccJP5C7nqSvtjGFopcVOvf1yFIrMV0E\nQkG65+czTb7A0F3vtHt8CW9JCzZ64kgFTLkC8ZgJSdIP4ku19xXfyBJ0MmgH\nCXw48AFZa2+NTRCWIlNAWjZgXDHKcWehAFgu9CU2lDAzpRKpj43pg5j/9we+\nUi74qLpK/S2vC2WCsESZcRZtv2u5msLtqPqf+cYXSUewtthH56UDkll2CyJu\nladc\r\n=stSa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/touch-target":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.91ab1c62a.0_1598022721534_0.5865574527216697","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/segmented-button","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b01cd5e09a51ddf362bc2916d6a04a7be857353e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.58eaa9f02.0.tgz","fileCount":69,"integrity":"sha512-MlyF/UkUYS9AHAqeAJweRp/047jl3DAbuXvWlaZ/nO5rYuJxa4msWt8ITKjOzkM/wnHduedR8lMydqxgIlCUSQ==","signatures":[{"sig":"MEUCIQC5rcpVNkpOglZCp34k1Dc/bMIlD3qjlUur6mZKNxg2GQIgcMB+hBvpR9zh0WyzvDCngIWb1MLdX0V5zTABeF2gjzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCflCRA9TVsSAnZWagAAKsMP/3LjAb41gHB7GJ7Zzrni\n9NkW2DgkQL4dTjglr/qOdB6BkG33ZNbR+1W7PYeKxerv7FaFhftIigH7vkgs\ngc7YDFFK04vdXxKuiTQ8JdKyjcoL4V1fhQie7QbFDCW19P+NHMMcxnNx8fWA\n7fBPHeCbv9SgJPa9piPZd0V48JYQd+jvnH/Fh5/cmL6jie+ImjGsMQ4O8vqn\navEZ0r16xUbM6IWUx0EkFLeussQUegYS5kib+mJ4KlZQi+PI4JZM2487yZCA\nLdDXDJRF72OLxFoT4LNgfKOl0IoDYmVhZUIMQUsaa4Q9blNBz0VaTgmnwR6B\n1afu7toRdBVUlKOwzQJpHXWiWlWYq1S0mtVLYKgHaBELwyXZkRL94bnsVham\n1cvQPuBHVhxprsqnRo+3BtmrkTsmN1kxfyyciI97sq3YUT5Djmh+WB+OI0NJ\nyG2YBmTe7qnXn76pLWfM6g9vfZpZO+E+3squD8+Aad1mKnuLLyD2MWMSvwuz\nfahVxDvGKbSKJd9rIBzQo0kK2TcbCoodySJqlLQVeCqIkslKtoIEYngBKBi1\nk1Hciy9fELjy7GtFq25i3uL/el+7Y4/5mkDNm7TmL9+ETty/oh4LwCAmOfxx\nxVec1sXQ6oNXngCP7swDwkoNN7lugO4U/jI89davsUUymi1C4Q9/0+oq9xgl\njBct\r\n=/e6i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/touch-target":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.58eaa9f02.0_1598040037176_0.07689270316328534","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6275a6e1b9b355800a20b4fb2a49f7824b79fbc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.238216fc4.0.tgz","fileCount":69,"integrity":"sha512-/Tcw1pjEKTx+BfiHFf8OUsGmQqn/M9VZSIIAmzOBRcvEaB59fsKCnenc6ordm4ZPd8xlrDZR3kFjodnNh27Ebg==","signatures":[{"sig":"MEYCIQDZYvr7drXcyZaz2YEomAg6c3HVVz8vmLYZ+jqyX0rCvQIhAJ98KDf+HQooyLuoM825E7K3+Aqo3MCTCwoo8LyHK3VE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+RCRA9TVsSAnZWagAAApQP/iLw2/JzFjUSFNainrrh\nbHjzotqH2wQfg4PPd44zhKj6ytcy2A2lDuEHZR3j4vJUgQr60NEH8qyMr3II\n/+w0qIFsOFXPO2ShQOSOgjJhv1A6pd1O+Bh6KqTDGMLsOveX96MclE3+nslE\nk2Jn0nKHWR7FO1Wpebgr7XNHrFt3bgiFM7N59Ir8tsfwevTgxjeNQuum5rsU\nCrWryHtpIwowB0gQ8XledUXwG9w3AjiuQEiGrWMB5a1QhlpGCTWKiHBEyO2n\n13qpLSM9czsOuZFpY+clyhGDhbczF7eZKx+ajAyn2n1O5MT8Zeba48VhhHZq\nUBc7FfACezzHUZ6c1hZvFwWydo8Ox9ejZUn/lYMCwbN2CmKfU8i0xNa/EKUs\nq6n124kxVl/+uQefG3DM/quysJEmxyYhiaM53EDOeni4xc5eL/RutjyxsdNR\nIO0jHPfYM95XvXXOFMyP9yElodSmImbBlY4FpS3bUtDLc4ke74Hly69V8Fqh\nGMIx9hweUdDZTz5vAdwHMrb7VFZdE/wmBFcbpk+mmmcMS47IcZXOp1868iv6\nln/qu1dPR19W9uDWRIEj7Wn/Yg0Vm+xtcVBhUwuEQYo1nJ01PvKor+CzS//Z\n5NtQexu4WK/doZFYDWqZ8lcxJYnEK66IqLTkoSEd7leK9ZAO4FcBuujl0NA0\nFolv\r\n=HxrL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/touch-target":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.238216fc4.0_1598283664794_0.18318486286365787","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"915eb6bfcc17166a3e8bded080e0e279d3543f62","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a1c65593d.0.tgz","fileCount":69,"integrity":"sha512-w4m6VMNQwiBZCxEzGPe38RENT6PQTKuu95R+Ho2obIRvY/wUb5YaS48rjhI9nBAaNG8C6Puu5xRZAGufomEDrA==","signatures":[{"sig":"MEUCIQDcRQVSMJZK5ymRaoMFTfKuO8ZkOYpTQdBE89QKoC5taQIgPfmWZWF225PwqvfGPxL3xKtslgQbik3k6zQoCohdXTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+lCRA9TVsSAnZWagAAXkwP+QGdj3dTV+KXtA0HuwRu\npo6OIYBoxGlbckiMnSVF04/QRU7ctSpZrJJi53PddQUGjcA4yI+dF7gvOk8m\ndeQKuDTGob8StZpbzDhqVu2syDxGpNP8HFduPYdXh9unCKQBlnIQkiGxzS2W\nd2QbI3bdARjqybGL9Ftxl/pPouV6DffrrhSG9J+rUD/+ss8ueAu/COkpGN87\nfR357LGFrpxA6S9w7NgcfJ74QUuc1EJic7/N+vuThSn+dINT3NrbAPq/RTuM\n0XDwflRasCM3GkMvdFZngdaCRJEeq3qVrYJ4Tq4M9+RLIsm1NhTO/UA9nHKw\nKGV0yA20bQvk9azNrC4ATi3fUuZqQqI02L0fP/0FMnKW7cb7PZUmPQ4v4ryz\nm9Tg7WyPGHhlzEzRbwfHhDJX7URNJymzjEj60p17IKUDNqelztBY1VQbLFC5\noo+6e1ocpfol2GrvQISBiERuyqO8V/Wf0kGkDO1wnKAF3/egtDqiZ2c/XxUN\np78T0BjBL76WXfF7sESJv50J0sTyfJOV6q0EvOajMkA+6tmCQTc7PoVMI2D2\nPTjuRmbuDJNvlrwXxYpm0LWZSAleDFIg+grcFW2zpJNg+9Vd7tF6LBcY8yM1\n5/F+1cBDHz30tOprnhkW88ONC6Uo7yASc+tUkr2t5y/XPVlth6jI7CqStx+L\nCL8Z\r\n=80tN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/touch-target":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a1c65593d.0_1598324644666_0.4196616968208635","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"01645e1a8536e2f63abdc371923bb1fd705985eb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.708cc09c4.0.tgz","fileCount":69,"integrity":"sha512-2jeKhNLIV//X/tAAOSlUzPAhhofVLXv51Jn10q6A9cWZFLN7tVnM/ANh7T3gmBKGXblJyHPYe98wUM+cnlTohA==","signatures":[{"sig":"MEUCIAOsmYxq2QlIIPk/n4wQgKcrxrqw5JmpqQF1GsqQCWTKAiEArjL22+Z1czlObv6zlJPJuzysocv5Cz4o9br95y/z2hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTS2CRA9TVsSAnZWagAAkbcQAJBQNpWYaGE7xzyWMLoW\nSBLWMA4pFUG7sH1A0fx7RFa5k01PnELPAy2XOsYGucdg3+0Z2CtOs5Mz8hLB\nDGKCIayO6DRI7zphj1WlpVYkH/9ZyfJ91yuAytCiDvJUqSLWycK6RdBMplUm\nVV4ZHoyfVUzq2h38wHzxEfMKNbEpIqXx+54CTkF7WNh2hSU+6lK62TOrb3wH\nVq5O2eXMbiufhYA0q8yss43FDsr9+iUtAPZ3Zck1uHYdE9xHS0t7SZNSssQr\nw8YmDLmtaVQrlGgFX8geCPVjWl8m+UwLo9EHITMks5Zq6eH6io72TyHEiPGC\nzy399yo3QFVGKe2/iT/UmkeeMhaRoQYetn/KiyVCiXLmXTgWfzuAcso2f9/I\nDBpQXLJRdRIeu2YYdd6I4u3fDFeydmWvaS5qdFOfhWrss0FotaXj7+nxRCvr\n/LzlLqVfcu22eY8idLpcs0N4BIv/25cEYELSBAwvc6GfURZCGwfHT7nKbdoS\n9FrtFpcHrpSPaudv0RY9gCM3DxEs0G9f6n0cTBF7hxSppiXCHOS6GH2EUJfN\nkUb8svmXYWQVXROKGfm3OZORSwwn4djzHBu8lQKPW9P09FVzkQM2vbgwgMBG\nOUCFmxOar8AWf1beoru4yYkXeviA8Ni2Yk8GxhMLRZKAC3WctERnuApDkq7R\nXxSC\r\n=urAb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/touch-target":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.708cc09c4.0_1598370997843_0.7924223878336161","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/segmented-button","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2350d676ab301f6462959a6896886ce9b315b27b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.19bea2ad3.0.tgz","fileCount":69,"integrity":"sha512-xH4xyZDoz1tUa1XU9yWNnnwbKhYSPvzOhXFGZDkxGOQhqZoZNv2XtOgKawYKY83kZl/drPL4rXqLt/jogiKliQ==","signatures":[{"sig":"MEUCIQCNx2jD67cbLaWiKY98x3ZMyLQZrrqnrY6XByCj+sLdLQIgPVcuAhcK4bBpD832uzVYvCk9AX14OpfKmJhcRWs8hG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7ECRA9TVsSAnZWagAAW+0P/0gLW4B92c/PQfgs3oLU\nnJEsdk6diNVPFzwsYw8MzNRbcBGRv3Vvl552NiIz5Rnazul7J7GvZemRGdtA\nuSecaUnqNg3zln5jlFWZtWcS8yjVr5jihB74NzqJExflPDQxyeqRp6aY8Fet\n3bJeeDPRMyVAAIADOXBFtsp63sH2eAS40uFDajXk99LPgywu4b2sRXay6kb9\n2X0bHAEO4bu9O/Fj7AtwRYsN4011e/2fePAALD+VsqOShbki376BMMHzaiBI\nnj/MiUI9nLMMi88r6gsMDEYEi9r6aYLgQJ+n0PabGQOvJtfy88i3Cp6akKk+\nnX1xh3ZqrgDoTIiel+V1Qu9WlhK/Q4aJYTjGP01QZ8hhlbntO+QYPMlVLbnQ\nXnbF805arPk+jtA/YoYIU+xKfrVl+JBJOZqNGcNcG1UscQ1SzdhpJ3qkorYD\nZ6d26M+egt60irXuITDrouu1/LQRanT11Agk0pw6RNIiMB7moOUjRnJroClZ\n3ntvxunCvVcdP5/n5XC0xgpjwcLJio3zPP98lRZ88dzh06QfGhzLGlklsCPl\njCRkfzMYSSCraXKvea7G+TxrcSds9CUdleS719G0ZjuCnBG1aZvVZP6Ae0BY\ncXf4j5eGF2ebiCMsDmx36CCvsnPIky0p+WPS/Nd16qt5fvj5WQRzZtWvFyu2\n9lZG\r\n=WVhG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/touch-target":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.19bea2ad3.0_1598467780104_0.6649347914074608","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/segmented-button","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"069f3f57c8fe87f07bbaa7c6c118ee14be41bc85","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.911014711.0.tgz","fileCount":69,"integrity":"sha512-SmEvOBZzTGeYLGxHuE+Hc4AKRA763S9Q7sBXBS0ZvuSL7vWAtlTgnmCYzFlgb9GIkckbF/XHlgFf3c9cL7IEfw==","signatures":[{"sig":"MEQCIDSGDChR32hThxAp0DdnvBP3BNrUI2kIVY1ZpxWCzB4RAiB5W+/TnWsFx3fX50qdyzb61M9M43yLFdSjdwYgghruCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pyCRA9TVsSAnZWagAAoyQP/A0MMs9dK/3whGYC5Rgm\nccaiqm/izM0c6mxrv21y6S7dkMM8fun2tpAAjjB+QrjT2qmfocVrdLXls7mF\njRoi/4n+UofISyBe0A9ALTmXLK/Jx6rKusKRNfCtdPH8QnHjxBfCIdIDqw0i\ntwIwIhdRTcApsn+8SoTV2/IkiWujzUxQi/5VIgVBpe/ix74eQY+2+poyWJg2\njJ/04h3rdrMvV1vpsU36HXiCqU+rZD+4J+V6eyv1CFsAm6d0bKQhNzheuApP\ns22LIktc6qesOrNfFXAvcJgadI4HCuUcKmwwHWev4MzPlzZu5Zp+uf+EVhDa\nyh0dmuqsi+TMylHh1fDqKTMOC8CK90c7eW66k7e3Yn/wp7ZISe+Ek+TU9g1K\nB3xeY7YwdZJxZhlwXRadI0n2fJ2Al3rKEl16Jls5JvFL6mzR6UXevJ+fOQCL\nSXIZd1rue1oVvjf51zj1KXyQA69SuaTvOufFJkNlZ2z44VD0UgmJFKnNGoYe\nQNrjseWftG3QfW3AMFUd5zEYAKnnbiKAqtW4rcRRokc02GVwtW00MutkhtQd\nV5JVt8/fb1hN02CvkJJpw1MiP3s466Emo3xqPEDmFXA/KFtsq9Vu48WpxKHs\nqJex1HZlfqU+4RH1Ve0JCZHVCkmPDkPpa92UCI1vgrQ9Khlqb4/SHAsS9j4U\nsDl3\r\n=t1Tf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/touch-target":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.911014711.0_1598544497914_0.05533510681938414","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3653d42197050633cac1e24949b16f13b562d379","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d3387f54c.0.tgz","fileCount":69,"integrity":"sha512-FGuxkHxsKx/6W5IL3BLz9w2u2OFC0b8qTYPu2tZu5HDGLuCGrpNJJ9HYxP83S/41SOgN1p2RCuWZOFz9Q/OdNw==","signatures":[{"sig":"MEYCIQCq/YN4IC+vRo5p1yyI3fUK5fZ3K99C/gGEKbBXuSgknQIhAOG7RAZGoBKuKrN8k7JHEflwCS2XTyaDVTJIcOFbdyGd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhLCRA9TVsSAnZWagAAbUIP/Rr1Lih54kKtsXiX949N\n9ocRzM6IVWoz+sjVy7uqZpww0AXUDOmTT8e0mXaRr1kiKh3mUHAG6vvbdWXk\nd0XnSmLAwiY6c22KWhmvoHP8TQWgQEhXjlKXs2uxtjzIOse81fB03UIRNNNs\n7DjggH7rd9y3xMrZjpNEq0di16qV6lbdP43XIKH8it5M1f/Bpm1/5v+hccNu\nzIr4pbU5Y6UoV0os44PQ0tqNNwJsY7HIdrbTDR5LVGSpD30188QTtq/ahYH3\naAPXdAwBkwnI+AOlqGhIKFtKVIs2h8Z5idD9RKk+nujM+Wm70s/oW2mW+JUY\nK1Y+pp3JNFJl28G6OCcDdkrdrDOiTCDjw7wycTSkFSQQtfl0oFqNdmSLEHJ8\ntJsp4zVV2z1dvIOvONCA6M3sFUDt9PGbPsQvmXVO7yvJkL4z68+UpBNHqA9G\n0wqvjNl0Z49SkCSsmKHihv6b60+acviyk72AhvnFtUvFuaWH9QeR/5zfJDd3\nvaWBlyoes2swfHBa4p4iRElIiY+B7aTzZ5dwTMBihHq7Khwtyb4ZWFEMarZA\n5rE+lJymZ1jtE3YcOVI88G82g1yCqzLdizvT6OxZCjpxfc2SBYsZ2VpPyNpj\nP8Rp3TzTNHAkjN7NxZYDVmpzQjG888JeTxW5GS9mXb2dlaOdlWh1ROzWH8TJ\nFcEw\r\n=qP41\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/touch-target":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d3387f54c.0_1599166539353_0.04571509514550254","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e93c88c4bffc7db69229348d310d9ca5dbd42c90","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2ccf996cc.0.tgz","fileCount":69,"integrity":"sha512-7OkBsoNEwfXEmZjKkyI9QeCW5U0wSRkSaTrz+kE6jvvc6jGYRaui9HglyErlYY4RLqTFl6ZrHmmwmdvfR0KV1g==","signatures":[{"sig":"MEQCIAJKfucoVCwAWXiDjjeVbUn62aZuXKnB4ZElz0JAV+55AiBwobkqYcRvJ3APwgsowcvf71ysdyy7EgK2BJdZul/P/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhmCRA9TVsSAnZWagAAALAP/0i9+wLhvqDUcL9vFBqx\n11ABWojNS1GduXfqw5HWEBXc8sOwYZVGwLqYS9WtCXhDsKo5ahQbvdkXT8Dl\npCadveuPCY49s8RhQnGik14FJtYPfSsdw7ycB0DwzAG/upWVeTzvDxzGPOwv\niTeCvGT1bB80p7jtZw1h1cqtNvJBC62wM2NNQIx95mlh2h81HIsd/6XSPo9D\n8Nj0bIoCJN/PmXA+CsSJdVbh/IG8zi0rDEe0+jnOJ2V014Tx916Dt7y7EF3F\nqz6y1Beelpwfm/01RXQ5NlfWFMqvaWfjiq628yYK28kAn/Uzr9C9ESwtUhis\nuLzd5x+6BM4ALt8+K+l5ZtN3SlAr+a/5Mpo/0llWPEYmIJvyILG57O0Es6KV\n2FZ4FbNWlX7FzyXxiu7HDpbKsUJZYUgoVFJnzY05BuU95j3673evQ1DR7NaE\nkVQuWci0QYVmpkH8mzoho5hNtnnV2LatlFZwDljCLbYKqq32aM1j8qYGIitO\n2oVfq38O/vEZGet/zZKFGeGyXi2BEFFsZNd6yqWTnNriVxHs+CzIFqNk73Z1\n8hAwSCSs6t9MSYOpszscKY/9GZjp9a0t1YHq7t2z+n6OB9DiiW25FgXPhfBL\nECaEsto/GdEXgLNFCrSruhz/2FoUOoZi5D+E2I9AxIyZopnKfJ6fpF5Duv7Z\nvAYf\r\n=72TQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/touch-target":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.2ccf996cc.0_1599166565950_0.7523463741967813","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8669d283e620f1acb841a57ee32a5acade991ce8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.744bfe5d8.0.tgz","fileCount":69,"integrity":"sha512-pMkDE3ySJ7LjLZUhV7vLqE4OAgKdmQ7vQYQhjQdvLgdoyrtXAEQBobkhDsEUouHKtY+AFdkEA7orIyCMehdC9Q==","signatures":[{"sig":"MEUCIQCrTxPaJWfv4dk7s2WkPCusrFjuyH6u10hZno+Jp3EDtQIgF2m76LcelfnJnP47y5p+0+PSjh0EyOPXgLN2IypXQTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViRCRA9TVsSAnZWagAAFYoP/iehKgs9AAW4V4iPItia\nRFJAue8CeFvEU0Y+HuWOyb2dIg03RjvN7rQPBg6TjzuUTLZl5lWJ/dufN9Bf\nfqy2lt3bTF5NWciqUn9YVg6Q1CelWn4rYUeoilT4svtDWbff2ghIoOFRbr9L\n+u7EWTYkjdMVzAApHK1xkUe1DVi+DNSoDdzfeKd59mYbeGOvuXjkxWm+2NVp\nXx1/KGSCaRW8naR/EfMjpXmSWQYXFKOHbTUOq988chxwzDsI1Wxp+EmqbH66\nk7IK/NzMVs1S5vykqGsChZ0ZccKeZ/JI3nb4cttA9NmExH14wermZAn0DWfn\nV9qzI7MCHC4vbyUH74PVTQ9XkJSHV23tHzgtvAlM2KtTJKk1crYVwTYtmo4e\nzlRMKWtiL3WhODNwIhLiQhYNzDRHW4BBx8UkphpOQ/pUE9u71RNS9f6NNylN\nSB9vWc/JgqG+d3OACKoBZbj9sqI6ASm6niLAiACmVu55VpwARv8lYqNgnMB3\nhmWciMyoSTIniHdQTFhmZINbaFAFnx2hVDxHABPzkneSQiY1pILIqNVlSKk6\nZWLd2fEi4uK0dTSxn7ziVWLZsdZJvrh1Jt6BgxDPjgUGBlWBcW2TWn0VW1cf\n2pLeXR/7xlMcvHU07Tsj6SuRWq6t/hxnShrEY7YQAj+bCc33GQR3w2mamXll\neELv\r\n=5Tnk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/touch-target":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.744bfe5d8.0_1599166609179_0.490406001068608","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/segmented-button","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7262d600f329a97c0c42045df0f0d74e109b52ba","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.78da96eaf.0.tgz","fileCount":69,"integrity":"sha512-xm7GotK90VT1NJQSu73KfXR6iceyvPrEe5QmNbgKUTCQKx9v5Yq7y1rhrRRp+/ArX9LyhSDk0fp0VG4i5NB6MA==","signatures":[{"sig":"MEQCIE+ew0exz0hfbdvAyWOLToq/5VIXb6ebt9KTw37N0BkiAiB1dFiLUUArqGxxobJDM1k9qdE1rB9ytQ2Etx4HXKjPrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fBCRA9TVsSAnZWagAAmDoQAJsb3uAQam97/Q8f3aFC\nHhbLxzIE5WEophdgnIfSkNyvwjqVYA3nx9h7ACl0UetV1WSQFIYqCeiwTDle\nehC1yw2JzIrJRjGa98M6slfoxGbskuu/TFH+F4wi9BbV3H6c7+GbXi8kRX+r\nU9EiEa/OD0ckbD+YmnSnV9o52zRBR0t8OT07d6Y1jXLNpzr1Rcc62pOV+8XP\nDVnAw0hMw4OSiYkKVoITdoYmo15Huxx0e3Q8UvqRBaE2cfb8wBz32UFkMFd1\n3od6U8Cne6YlWgQUFiVG7XDrvKyzqR0i0fxRb9Ii4k9jI9KyHapuuVb88ICq\nRHnbS6CNwquRMKoYiypCCyHAjYQ/GY90TDqSdndtN24LqIxhtuxD7JJpfPxX\nDasabCk482los0DR8zfBfdxBvNEv+P9sHDCkgLPj8LTT/XbY2QrahS7P3sfr\nrbwlCZRGRXfj1CU5FKi5iwzouVrm7w/3RUcmYHPT/RpKp7Dn+NSrTPxybanc\nHKJqcA74xn5e+duqYcYrUqtU2qMPo+cjRORTbUAHja9rOGp+5yF7yCcb+EQP\nKV+nlfoRiBbREW/J4u79uRswn1TmQ2GMS+MPC/86qe+9OZjr+P6MhnSyYymg\nRLxUCmzYXAHkctY6b4PBhmdXbAW2gJV6zvNWQsfvnGn8hr2sL9tpcDTWMQEK\naHnw\r\n=gJRf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/touch-target":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.78da96eaf.0_1599592384915_0.6859171623421598","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/segmented-button","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6d97eafd3f9e0eb03e57e224b279955a5548972","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.b0ed593cc.0.tgz","fileCount":69,"integrity":"sha512-XaGb8+Y+upY0JkeeMBZj0GzUy+LBnGvXyyqMV8q1x9CxbleMccPY5FIblb+ubNC/zq0ieVcuzL6IganrSH0V9A==","signatures":[{"sig":"MEQCIFYWdOoWcBO7hoe1hgzOpcCOvVXxvd+7DNd3tTOAx+ArAiBs1Wb8iKXrS6OgbEqRNN1lUxzYjha2reI0bfHN4byg3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMwCRA9TVsSAnZWagAA080P/A1xfVw31SngVGfzgvLB\nQb8VzFRcnVrC5FerKPFPXQ/A0xPLzlMul46OealVcyzwgBq5P3oCqV+X+wfT\ntJl4fz8oJxR1ClHR1X/1vgobTSXz/pqD2yziiCQJCyS5g/swctGaipYnC1cq\n63ZImGk/WhGkZZ1xTZlDAVNPuimp9lGAWUaCBDiIgz8iOeHSTtPVv0b4OkRR\ncotku1s906j0SVI8X3W8qGo/3THshzrUut8I8nXDBAxrYf031In8e8FlMRZS\nPlxlOw+dT19353HVOXfwaHf+p4ZDtJx5OIPYZqVpj2YQN/hPNnR0gIih/RVs\nbMecLj+pSs/P+f9zge7N/SiQZUaxgs3vQs0bv8k7vtoWz7WBJHpuPDIpXOAR\nG8pziZgkaS+yjRvRHkVHja0Obx1Qy0UgyYUH35t31CVxKEzJBmrqq/DRXDOk\niTcj5CBr5C22vfCT5YRIdVzcdd0+TTt/rBp1GN88zcxNwS03zHaTrRGALogc\nudulk0vw/3WuBGvjk9CLCyn6MWe49ySGmQFuJgbMC988/XvSNaQbjlq654Km\nKs7DiWchvPDBqIeQH+0ns9+yTisQpXEIjWGUeBvgjelpfedW66CXJoZBdRhJ\nWNL8IrMrMVeabNO9TNIqkc4VVAO0x5O7mm5UAKHB7U7SzcQJnXz85Hxpx3Ln\nEoGJ\r\n=BKaH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/touch-target":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.b0ed593cc.0_1599632176183_0.7198603802466692","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/segmented-button","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a2fc1d034f3212ce699483680fc414c1066f5076","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":69,"integrity":"sha512-MY4JbZlIl+szg3sXhqbcVYpmsorJ42/A12HUrrI3RWMaf0LwV+m0OmiIyNN80nXYZcJzauBJQv8/XoPJgydraw==","signatures":[{"sig":"MEUCIQDTANigfedkCO4155YVeNZ64gmGQWlmf7ilAY0lefzoPgIgMRfH4WLoQdIp/z33VpA0VRzsRfrAbPclPHyyEb6flXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZYCRA9TVsSAnZWagAAYCoQAJJMVx2zFC/vquuxLky5\n/vuLtZN8vYBvbx2+mTP6owy/8N9LjIRWFvhL7S/YpT5+BTAZM5r1c4tt7Xr+\n5pdqsJdoPIJIGCFvz/uJzntxsj70SRv2UTn+U9AF8pCNYDV4FEiQU+iIu5lb\nK3nxgQ15r0n4WQCeM0sMm2mklxFEublQ954AgBOJ0tOnG/agP1blBAAEzS7Q\nLOPIZxz3Rzb+WohH7KK4zViVnmbfGdh/d3Js3ccIKqe+qxI/HDrR6eb9fWM3\nxpEuMZihe666C0dfnSnbljA9Z5haBVBAN+L4hKZI9DNDv4h415UbB4dmQGIV\nrJ+zhE3JnHlIHxJYFiC6zgzi15wWduVlLYoY5e5YAZgNTR4QQgzjYjMnFenp\ndRtCQQ4MDxJu/KcFhwPEJK5VGBalhOhkkHBjQ7wSTNDzomAVWp7uOG0lc6/C\n77Cmj0bOLF518Osg57ekzNGq2ah85kQoMUaIdXmwUOzwJY9JRqBa/ZsZ6fx6\nQVIpVgL/uXjexJ8ZVI5gQuj7D/epDX6S0yOfBn4W0FaeGVKkJdrEv7hN1tN0\nnKUN2N4CRTu4DvrNBxMUcBzHJn0KdOcv2MHVehP1ZV79KE7CzxGe8s8xrAKH\nRtFKRqe7efSzR5rrwgB4R1ojRVpsW93J1COocGacNgEgY8N4FHnQGu5I3gZo\nNmi7\r\n=VRbS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/touch-target":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.85a1fa9ea.0_1599772247562_0.7965745158754556","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/segmented-button","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dac0299bd87a935894d7c9e52d3f698277a644b3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":69,"integrity":"sha512-XxH0lSS9xSlIwkT6LBCFAwyZmzcvQse3vSi/z3VoQH089/Y6DduxUs+SP/+OScifI4ZKy2JPLqr+1CJkfDBVjQ==","signatures":[{"sig":"MEUCIHXjmuOqkbEJWDMp/iZa5oEOtskWWOIeCBNLptIKfvZcAiEAj8kEcTYB7luzEAJQS3/2m6zSOoHXgEgmBlgxJu6RWHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7jLCRA9TVsSAnZWagAAKjkP/idaZaquyKZWsEiCpzM+\nNGU4TJb2JCIbLV7/RWslaLFL/RfOIBRROFKnaw37LLAlI4F5za7wb3Gh3tOA\nEavsXGkwoZl6UK1UmOGZMb1n0u/cIBYpQv+Rkk5tw0PH0xDY0iuNOi7f14iN\n0HDh4ak4m8EkvCEQEL5jJuoVqH4B3T3MVuLr3XPI3jyzVryVokongS6UN8aG\nbjgt+rpFQBPCvyR7W2RI/YH6NzFVD9yqh0wNZ8sSobVD2Cb59z4n771Dv/p4\nhDjJjd9mmMqX80De7dyWYXxplvPz7tn+WPX0smgCj9IJta2SZm4BmDKK5f3/\nm9WG6Av07OR1yLeFy9MwH28yWOx9h1vWy1kGV40bmTzdETuHNdtLsqNWg90M\nbqSeaYZAKnJNUBS8AG859VBwQjngQuCyL0f0JU/ccywIswLtk0IX8QKYyaN5\n3zodcsVnsmgDv8IEbrv1qEco9R9ilMwSPSq9eYYlo6wjZaEeRoPxGGP1WdHk\nbWqDiL7DQZlUNic5+4ZAiJsU5EXxIYanU3Xal5H3K9HzLbpluAg7+iquk4VB\n1zNnyNrlO+Q/Dvk+1bR+DJbm8FD5bBx4odY2TsAAKXXKeZq8GY/EXf4/lryI\nY+ybtnKYaaM88FXiT6k+zTH1djZWoCZE1ddYTzJTCCLG9/XpCKttKquWpEmC\npw9D\r\n=Hanx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/touch-target":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.0bc41a9c7.0_1599846603108_0.2046306600697354","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"04fff7d4ef55f6408b7d5218e6760bcaaf0c071a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fc0eb5013.0.tgz","fileCount":69,"integrity":"sha512-T5unhLs94/Sr6r6SAYe9F6yZ3ql2jOCXIj4zjSPYnH2YLrx1neDOXkobUW6U5ygh7k/mcCTQ7gmz+1MwSUqyZg==","signatures":[{"sig":"MEUCIQCq0hNxttmEpC+lm48fuwlbAYtrqshrwgFV/R65Rkh3rwIgA1MgxaIbbxRPJQzTpPSANbZDuX6j3KF79T9onv7E+vI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZHCRA9TVsSAnZWagAA70cP/jV2gn6cnOzJh1FZ8VV8\nuVl61WKg24Xh1kdn9AjMW4sm4ubp2GIJs3rLl4rIXpMVjNukVQgRSjgJdH0d\nRfJ4gn45PZZ9uTk6tT6Pbm31L3S4EogHJSG9VxyJ/nJxrfsSm8pj17BZjyH2\nCOhSrWxU/i1bFrmwvhB0uJMpLKztDLS6/7MQO0PYuEGKCmp8F98Z8VJqSqL7\nFrjh/0fwtdbJDbvZ3w4NVaRSxgkjPWDwNpI7/OURfQe227GLei03uk4/Q4eb\nL+02tr0wW5bh7T/P78xGXGnPIPs48BUqwDLrPfjUOf7CmaIySBMXpWh5T92D\nmX0RAmxfvn/JpOscX3pZEecNErmAkdAg9xu2Wi/awpa1OZRyNHK8nOS1c0eA\n2QtiH7l2ypc6sKGP1kRsWTIdEom0hqld2T1ArVyulKgLUuvCY8L5VhRlrXyI\nbnO69tTLfpE18uV5AVINIGZ3uecEuT6BxWIPiJNJpxpuUtPgxhcpvto8MUk2\nUnJNwWnn77/K+rPi4Wu/r4L9HujxfoMmST07IGEEPb9i/8WIlqxytJJwe/Sc\nJMN390E51WSOBCSM+RidfANFztCMNEP8nLLpW7oIHnXzHAmKxLpoY4d6dPsi\nYUnNuScR6dwElvqOh3lKckmQc432L6/uyB5MlxBCUc6Z/+dWKNk3UMTifbMI\nKLFp\r\n=5SCs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/touch-target":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fc0eb5013.0_1599854151232_0.38936906896398793","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/segmented-button","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"833cd22273c2b1d308476e5406fffbda0a0ddf0a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.319bf66de.0.tgz","fileCount":69,"integrity":"sha512-sCRzi5vaSaScu8GZxOyagzcuxYRGI49ZLk+tJgWYqmTLicFp/ULYSsaT4D0hdW9wQd8U9yLdfKVPmweaKvmeWg==","signatures":[{"sig":"MEUCIQCjWX5b+P44mBE9iWrKa2l8rKJXTxfcrzeBAph3xPRtZwIgTpnty1TSNutDATpaZMhMf5/yMEl4qzL/peSX+MBgzww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPkCRA9TVsSAnZWagAA5VUP/ijmw/eU3YVPFAqJqzl8\nhGS5H4UjqQPiGf4bzupgwZSG/vNn1jSu1MoEU8n7wCqtLhFYHTCgVatvoSrI\noJ4PoNA0v60W3yGmrPzP8aRAyTgSTifPcmFV9VLoLLVYfhcV6E7QWzZfb2Mg\nl/a09TuOqnRQlvKlvjN0SofC7PHYeCKEZVBjHt4an9DZ61kqfwXVWIBisTqa\ncD4XYA72AHpo3tFGyjiDeQpBi9tOkC+EIeF5gKQ5aiS2iXlp80rIxAz/51em\n2w69//MTO/CgY86P23vQDO7miKF+vj+1ezJoJ0O4IO4R8HY20szc2Cj1Pbww\nwu0z1gV1IBy6AlK+xJ874FsinY9L17COvtfFUISsK89sAbOzGNJAWDvIPgBH\nserXTmKRupv1ucc5v/eRF8e9G8I7HryORcU66NagxukeD/sg4CH/8MEu3WXt\nJIqR/nqIhUiBoV6+GVQ5h21FIPBSiSFGR16WlKe9AQfk+fNdpGho41Sble4Y\nfs2NKvU7pZ65mcoubVu90QbaiKrxKdFLjcpgFJm/XW5izUCzv753RV5NUaSt\nl3GpDPAJEX1kJrDYlOrL4CgMGkggwBuaEBPTHA/ecvqgz+JRSpqjPLZQfwXw\nd0Ng6B2FMtMKNveorpfSCXgglgBf0DYEb8fAiZ5GPh35RAMpt+S/oPotikDI\nAiS3\r\n=ODoQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/touch-target":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.319bf66de.0_1599865828214_0.7427197486738968","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d2bc333308ac359992602bd2a96533fe8848dcd3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5bfc305ec.0.tgz","fileCount":69,"integrity":"sha512-qGAhJ7JuHUlZMKykeJFzR8NxNAjlgir2BHxLb7q7nTe53YecayRjBzrJ+ki91b3C7k8d2WGxdLQGASZ9XXVOIw==","signatures":[{"sig":"MEQCICYyQwUONUTAg5SLnbxWut5nGb7KRcA7riqdD8s87NwTAiBFgbqn4OsguywZKC/lK40puS0eAY7JY45xrpYr7wQtSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSNCRA9TVsSAnZWagAAZk8P/iV9WYq4dZLB/8mbWXa8\nWbiYsC9D2FA8LgKnK8f+bmj3pobhDY9q9vXLriTW1YzNXzqyCOYfy08RGBmR\nsEuvz50CbeClPCFg1gHmfLYCnYLgefDesxjIZGp9ODfDKznY7jb/Z61UuhHx\nWntQN2gWjh1c5i59PpvmU0SxNMKjE25jUnsxKOwwWGo9YqpJBx4liV7aM7mb\ng9HPc9O6E25pDOaHk5QAEi1T7VLltK9ycJBMWNksPOHYjJ3T7nML4iGH5V45\nl/WzNaVqSs220lKSvO+Rh7ok/Zl+E9M2IpEV/hvm/yEwYanf943VlR81Gm6h\n1nWpnNrBf90muEKErRn1GSTGdQEAeVrJT9ZlTJQYAklsQxQpejIgEBhIqrLl\nbjg3OolwgaMEe1bahe08V3qnabV0aGK8J2gtaHGGi4PMI1r8vVc+LsU5Te9D\n0vmMJML12uJl4JQ1ywBgGcRZ7F4WSyitDOz4a9zlHrwqlCh/+U/3HSp85Fwi\nE84Xz+9st+Hgowp7fxfkc2Qbs8cmzpHqrWtgk1RTpOdi2lqjLbJXFQSnb9/+\nGPhEog4ir4XwrUGNrKcmdW33GlOR89GOVoQ9Pp6C8j9UBQbmZTn361E2HtBz\nzcPH7FajcIZKE36PCgkK3x5Veh64zNhcKbvBNng8TC6I8gtQp/3ulFXntCeK\nknvA\r\n=1EHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/touch-target":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.5bfc305ec.0_1600038029179_0.010055923402196631","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/segmented-button","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"43f6d993e51f3dc1c86ee4ff0e5296843583a16b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.83d83f131.0.tgz","fileCount":69,"integrity":"sha512-KYr9yeqzjoJA6ZEzV2C86CIVkOtLtWhe5bowOGXeeGRhUr7HHy1KSQLJp5plixYKdXNu8Ci55rpAcnptJ1oFuA==","signatures":[{"sig":"MEYCIQDza6jZTOJgc7LfIZZYt33o1xSg5ng9xpmLQ0r5VN/qLwIhAMJcAz/A+JOjeAaSg6j+H1QnmCCZCHWslNT49I49Ixta","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXro6CRA9TVsSAnZWagAA1S8P/Ryl2EaWHGyXj03yc0f6\nMWz7n7dNLeXV5VlSg9J51vk38L2Nr0RZPdSoZ0lADszD1qFKH+DktzrT5olT\ndQkn/Z4ap/9IcgpH7BNCXXkS2rEE2sfzPn6SfIACPbkDEyqHPDTWBicPrEBP\nvuny25JQ9kXZf3XAcX79m6iYqduHaTqTFfFLrWm950LmDM8sAETMfZde725E\nkV90cIEBfWi7BUtYWDjFOhGob47jZNII5bav6YY7f2GnNw5Y6tiLF44s6NFs\nNU87B7w1FSKAnVTrahVeFeVLX77ZR4SRNetqRWfKVsqOaaZtgVaO59mF7ugQ\nSvmJvg13tO69ph7SkQl+c6Kv04xP5z6i9rLV0TydMtGMDPGyWIUsG/92PTcV\nb/Gx/IOJgvhv1WKktydTlZptCPgmMjHke7eXeYyYuRU4cdOy1SB423qGLQfw\nUgkIlfzCSSD7X6yhkZ4/wQ1VXgvkb/1K5qqOdZTSarBUqOdT9ZOsYNOgXQz+\n6+vNPLawx4y2TYWcIuiZWnnVEI2uBnch1zIC91IoZ64mBumT/w5B5nXWOWFV\nteDVPLEZ9CVFxaDbUYDx41ytZc5lDLfnEaCR9rZn0RUeHEtPeOSQ//Qqurh8\nPStf/lCK9oaQSbB264P3HL5v4nG1xJjXzJATAWqBxxucRFlnHPmlpn9H5sMO\nUkSk\r\n=mMUO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/touch-target":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.83d83f131.0_1600043577680_0.4683261696635601","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/segmented-button","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8034fc50a9ff1b74378ea3215dc4212ed72b50c0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.40d8e4726.0.tgz","fileCount":69,"integrity":"sha512-xqUsKlAbBrK3xJ4q/ncu/6SsiYGkjMlhrND3NRCl7RbFHYYerG9DUvXQpF4WHobzSw35VOAl+rNw6aqsQMRzhw==","signatures":[{"sig":"MEYCIQDOSJcu2AMbK4MqKa4uq9B0jFDLa6r3dGH+wW9jgBMmkAIhALL+K+ih+hmuC6uzkWFqbXfXJjBygHe+wg35wRiMLkBz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/0NCRA9TVsSAnZWagAAEqEQAIPN/aXQ9j2glH2ZsiIs\nfs401YflOxAN0qOQ/fflSPqhoAzmEMCGGKIPj7AZUuSw6c5i0DxVtALuZ/ou\n54WvyEZ79aqoHYaEJGuZWvz4hlFntxTtOktarNEy1ps6HbzaSBX3kgVzvbAA\n/P8bgbof+c7FdxyoCAgcxnkJcgEP3klbNN+X2ZYnUJ8Oz8bv6kAqi5fUmYEc\n+Ljmhi2H1tgR1AGDX8/f/RynaQNZKm/TtwlJbQg+xPuEjdQhrlBF5q3N9Yd+\nFKg3w+a118nVAr0wv6fpp4a4ne5v82UFzqhI2ulVA9hJjgPZZEokDAUiiJIL\nhxlzxmbIslN4/FriAYvz7PawXxdD1dXTWsAtW3dqIDa1P0xiSRrmD4IUpWAa\nL8HQQam4EKtxelRJEBQ6mV7AUMuFIO1MnK04waPnQ7pMVwtOMMnnsu03DKOc\nVon70qYEsyy5NwQT8KKx7iwlD4olbLgd047cRqsjq2DX5x51HvLbgGNVTS3z\ntXbOHXGK1TCnQ47zQoj+TkSaVV33nCCbLbat5JQC3ulVVbfPBNbYQVjd6J3s\nbk36XMTdmi5Dmy43WhaE1fOUGs7Na9wqy1wSxiPHl4hxzPU8mbQca7QGq+Ie\nOTDTv7cbEIkKVIIarbK+KAjcGI9Oju0yl3/tUhcsQUvMVB3UPOHhpUGrqesX\nUV/0\r\n=mHvU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/ripple":"8.0.0-canary.40d8e4726.0","@material/elevation":"8.0.0-canary.40d8e4726.0","@material/typography":"8.0.0-canary.40d8e4726.0","@material/touch-target":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.40d8e4726.0_1600126221154_0.18452864447466677","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d6257360a8a45ede6f0ca76f03c6865753afc034","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c25d70a31.0.tgz","fileCount":69,"integrity":"sha512-hm5qDCNL5RXkQQx+mZDylp8kcQ5700PqNhOl83+JK3DYiVaCoCgAsD10EZdG+78PD8SBzwn3ZGzGdGp+xgXN7A==","signatures":[{"sig":"MEUCIHrvuWWC/hzpKAMy+ELFaInMUG9mcW0eXlPSSULUoq7QAiEAiaYzia1FFcN7c1FEIb/EjX1QaGUafpV8lcwpOC7OWp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCcECRA9TVsSAnZWagAAisIP/RD08xM2MOaKmmMa3K4r\nLj81AhkU/U4Wquf8DcsXftj7YVCi8TvXjqOZoDRe8Utbqv1Kdm0OgbfcPwtQ\nOJB/Fsm9lkx4WnvSkJ/AU774A13f51m6Vl0fHK0gVAlUsXCwGvyNJ8ng5Ll1\nlgVen92v+bIcGl6vPuq1HxXW86ZNMcUOhBxZvtZ5FrkX/lk+8gMJEpG1hOvu\nJmET0Jqh3/G6cE1NQtA+eie0fvH/BS+9KxZ5W8tRuLaYuf3NWT+LFLco0tZW\naymbmmW2groRB4hvopH0sgzvf1ZXIdb52X+Lr03816lan9+Lix24PGRd0cVW\nkf8I9wvHOULhbWZ7ClUXKhEiTOCP5XFLwvwS912QgLiTnMHbRr/wFgWDAHAC\nxdPYFhiyzXAmBemXwbDZge+Tee/XVa/GMn8UBoxnrlE1taefgY+EpE8RklMu\nJycMSa7pbD5G+n63j7XqW3tKi0lLfVlQANYtdRkfYyNwuAgeLSEqQagzBr4y\niyyN0xKUBgAOwC1pUdbmTwSo4suWfA8aQJcfBOQrgsgd8H4+wb1FhQZFPhX2\nLcdwNSkfeYyTjRUtc4wRzZUj8KlveFLGvgBlcIcPu3ijqhvVowKd1P5ZzK0k\nbVEdoTe+gx0TV713Lj7PKZ1MOFQJfblT5ReFuPJYTVg+1eBKsV9ZLqtIm6qR\nEMDe\r\n=CK5R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/ripple":"8.0.0-canary.c25d70a31.0","@material/elevation":"8.0.0-canary.c25d70a31.0","@material/typography":"8.0.0-canary.c25d70a31.0","@material/touch-target":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.c25d70a31.0_1600136963833_0.19650140396495108","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6128675020adae2dbc8ebd2d6c62d2da3bef16d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d52b165b5.0.tgz","fileCount":69,"integrity":"sha512-5pT5PGXYHO+Ksqn9k2R7wzw13MIzGpsBDJnU3zL6fOY4wUErg54Lz9K6DCeKWph9PSgvViRiJADE8kH78XwvLw==","signatures":[{"sig":"MEUCIQC7IUaF3xNtiu6PVCio1pQCpuVgVTcUMTZxCoggzwvCOwIgD0MAZONQzB8vtxOxYUFRpAuNFfv3bqmbmjI1PmUXJiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWwCRA9TVsSAnZWagAAEhIP/jxueTSjk59+CMGbwbmG\nrwBiWt7PR0CbC/BCGE4UhZZrjgrfj3O4mMXCACTgQo3allxsBrk2nQxDtCcX\nnXDI30kcQjfETWJoYZ8h5x596b3Doxh+36cgU/9s1HceVMvvu9IrMiFC0p6v\nA4xfIAWTgvqV33EHg1l7tYHHQhB1p9VvzWbUWi+U+AFgn8ZxbCFMD2N3Xdz6\nHQ9VOUbKYTe2D1G3v62flHjIpKVkkR1+KLFmL1/WXk/F/UStP5vrvvWq3ynT\nxvenc9fz/6wDWqk89QNLzn5Q0CETiLjpmDKMOVQ581hyfr/u8hP7HaC19+ly\n1AbkZCzUsaA9sDz3pYtuhNCRTkLuSyjOJA+KyWm7B4OKSg9faryRMDtu2Aeq\naeONMp4LWq4/KnoVTm4c5hTwkiecf/cNJPRqouGtU4a88bzKF+bItiQtoT9L\n3T5r1EAc4GPWQfvlt6pOwFRTFSQTHlDDFGzgu7v2+IkmzStXSMA6C12F4xID\nGqLrLZkoanmxASrmMsBfnoDqb2nB7x3hS5Z6Lw71+z+S0x9DkGiDm2OCQpF/\nD5Qeixksp4mn528ExM6u9FbbCNY5g20LjT6voXlAiNU6RaSCEsbYpq/VbTpG\nFT46gh6u+kYZ8cveBgFcq2RAVFFm1XCakA5M8typaU+Yrpia8FomMTiRm79s\n2x9K\r\n=ojz/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/touch-target":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.d52b165b5.0_1600181679863_0.010631669379340458","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8d52e8878d994da99c9b9e14154fdbb5e307865c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a831d4799.0.tgz","fileCount":69,"integrity":"sha512-0/TLpnJm1SYq5hhX1xR7I5dFgEzYcnHX8WllDDtgMC3nCzZ2UVaYnct0NS5K/pJSJC5/Lc8wlYPnYsn7VrX3vA==","signatures":[{"sig":"MEUCIQCO3HJxrsZ7+WEsiT9X1i5wm6CD6Pke72Fe/OrDehA03gIgeFCGF2/BxqGcVH3+aJIAmPS6VfDqhqWlUHl41EjuRGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9JCRA9TVsSAnZWagAAjPQQAI/BxYk42pkUjk4FNiTG\nhktnSVMY7SdnK7b1J+Z9Z08uArnT0DltGwmKBePiuWXCAK0jVuJUeTpguDRa\nnADm9aFHCZIldeDz29PwMr/fjpZA2nNzlT87Rwl3b1dA7rStYw5/k1aCvAR+\npFpfd7djt0GEaAMTxsPE77heLRsaeuQFCodC9igK06dopI/7pR5QqGP15FT8\n/qmgD0JfGgGiXoYZlFPMQEsilIdNOcyLtoZQEvXT9+8TcaW7Mk2/myl1Gddm\nyInXA12yGyepFaZ5r8i75rG4jS3Q90g/qOijKeXfqhJxbX3dhHhmSzIae6dy\n6zw2HRAxVAfBv/4VKmTWmO/WJA/f0Mx+6sVHFDyVMI7URBknYSfUpiNGb06W\nZdNH97m1UL7ySYpIQNDSPaiaX/gBHOIHmggmFyAW8puj10MWyJye4//aQyRW\nEe2D5YkGcjT73tM1XEefJxO9UEhWOioNSb+F7KG7SjJAZhCczfpRWZNqTF0F\nKSzn1bBe27JsWLxNcjg6+gQzNmsAi/enaglAtJ8xIgn4Zr6wnRxztwUeJvmh\nnp2W0ot4YTpQFiu54C1CqcsQDw7it9h0ZJOQu7YRyGBlkmFJwfDhLhvznxkA\n/aM0KNS1Jw/GfhsVWMhZoSzPCVe4i+SXHePmAM3OeDCaV3Z/jv7RXarQ1pyR\nSSqO\r\n=lSyD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/touch-target":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a831d4799.0_1600192329089_0.450044016884547","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e9a4fde2637e58916143243bbe92e245e382b15","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a306aa488.0.tgz","fileCount":69,"integrity":"sha512-K9/hinwz6OJ9DzA+bgOu0otVxeqRqjl8FYFcJ2Ody9iJS5N6MdI5+O3N/DGwglMQag7VG5Kq8wp+GNeO4wyJxQ==","signatures":[{"sig":"MEYCIQCuecxO0e4awJUfUqEx8OCY6q62f6vsw1bgxLwLy210tgIhALgD60e6x/Y/kIMQXLijDXgproHySBNMhyKJmX96pP5m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTYCRA9TVsSAnZWagAASa4P/jEz3CjXtofKdcl6BA0w\noRLKgYncjRrzKGEmA5kOZHmJ6r36D3QfAqSDYkGPTV8wOZUE20sO0WcQo3G0\nny/X5N5oGrz4K9IjreqBw+8uDIZdh4YJcQZZBTfAkSIhEGffd8D0/pd5StUn\nI4N0KXHKvI6Fyh4lO3vF9tJPqriD+N44BPhhFIZapjrdYXudfrSqPBO5EH/H\nf9yuClNnJ5oFGLd/z8Q/5+YCvIgWxGtfk3hqxuYxGRHkIgg+G33OgRs1CLrw\nTuxGV0o0IE/RxpOv/NGeu5Egmd5DMrP53hQBIpCTvmVqWIXWNM9hIJeUrJKR\nmg79ECP5gguio7l5PK5DHPra7gSlnxenJu717YLAoOwLvojY2zahcOL05qC8\nxV5f3FlcsNn/jkCyadxm4T+bBqaOhpWSTUByPXyJUK3XbbgTKcpQOF6AGCsY\njCGSwvsC2BV3SQGShwzRJheb5ErPCqH+phTdL1e7PS+X0cMcY0EZCvpI7lVb\naRdH+gPcHCFzDBbswmJq9z0lS9kqWbb+DIL1lQBPMriyR3aQLvG576aT8Ub2\nXlrCrzKGDkaQes1OG2kxSwV4YEsxNjfn8l0nkjrLpum0Fdv9SlB/Ioy5CM7R\n50C6PvR5TFAat2bVcrBy1S5/l8ACpdrqOcZEgxWC3s87EUoCPNuVDhfFbUwx\n4ZFf\r\n=ETEY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/touch-target":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.a306aa488.0_1600304344298_0.49888103283270224","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7280eb343acf7b1fea54f74f20bab4c541a68a16","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fd608ff66.0.tgz","fileCount":69,"integrity":"sha512-Td0J6/SEzjrxc2LFW9GWfDZqzv4jOHl5vJo3V6efzdAc70wDv3QOR7KkeoBcEr7qL4QSj/Fe3M/h3HLiZ8NE9g==","signatures":[{"sig":"MEUCIQDs0TrJie4qGg10Njy211D4oWfhR0rwXge9JSYZMRyNqwIgX7+I/8vsXyeHjt4zPmm1rTy+DYd88LJ/jb0mDxT4P7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3H7CRA9TVsSAnZWagAA1kYP/0aC6u/klGNSnc2mV20J\nnXIhlrjP4vCkjRDi1gJ8Q8M/xr42uz1kcxztsEdAPv/HzbQfAn1G/j1AYor7\nTv9hjWnizt9yEGow6xe5MlQzpVKmfot9CsKHB/XNbQHrZ8RcJ9WR88QOKSQi\n55d3Nnalwt8ImRFVx7u0mtxl8CDRjzQahPddjD96lu1DgYw/5Jpcz6N+42/p\nCzMZ6FLQJ8vdPBao5b6ucYRPlDLLQjJMIEgJUx6QO8hcRNxKzhloyuIRAKKf\n/EuMfRukyXLG+KIp5SVQ9Xc8ehU9pRpS5XF8cFAETfS2WsuHLC1aXicnM9Ia\nImoAUrscNY5Zf5W5uV0lw7r5y0xClqyAC+bFCoWoIYQeFxhwv3K16qLLtB3U\nZwyq2uTOcXMbUHEW0K1WFwH8V9VzRDdQ5zF1dDKromWX9pTnUAWKC3GlpXYG\nfxdWxk4MtAKTawictGws3fJ5+RHmlMRbk7ptLJnj5R93ZsuLbR/DkrhBEZEV\npbfYdF/Xn/GjzvpmZX4cfyeTsPzwvw7BVJYOu57qXWHt4sxQ7EqyKeo4IIMI\nLBL3OSIIZJT+jfGxCfN493dl7dCBUFY7Eq79w5/K4vE5qIV92LWhUIc3DABk\npEihgAYHY6zQDkARQMwtpegFQVP/XUqCK7iF/rsgjyHrgY+dkZcl11fFP/R8\n1HTx\r\n=vhsg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/touch-target":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.fd608ff66.0_1600352762856_0.8641475592853545","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/segmented-button","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cc7e271ad5ce1fe065fc69cd519a6de089b5933b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.3e435ba57.0.tgz","fileCount":69,"integrity":"sha512-w+tYPKtJ8lurGwI7wl7S6+t23Y0mTFprQp26h5iH58RNWqOexBXUIwn3iGJxJxPueC+/o+71ZRLiOUi8eCZlPA==","signatures":[{"sig":"MEQCIE4UqiK4hDV9O1yVFHqVLdlwQnmWHwTrRmP0JPgioOfbAiARA6j7I81DJn6A2BxyyzW4bdA9PNoe+wZCBXdpRe8HsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YGCRA9TVsSAnZWagAAYuoP/icRSd0+7tON8BJ72fC3\nS8z+kJKOVkwSK8yjGWH5XogYXIp9XpbO5syI6CzNsle+PTBzUJmOcWUWHGpg\nBxGynczY3xM5PgHDuA+/ivBMSlyjnhaO0VmD7EiCeeWTsXUu8gwx3NWZRy2K\nqsFF122HRO5uJ8z00Md2jiJBRdbZrHR6qv/GQL46YOZ89CwnAUCJjA6aoTGI\nrOpVJiv6NltRAmKgldPpII4cdtaaUus8s05X2sV/cKIIqW4Tukzpz9DMzuAM\ns8JtgIIvpfpm5Vi2SiViJoYCPuA0TqDWvvQoC1At+VpD/NoaOdjDocTovDeE\nkSTB01lAOthWmGe1z2CNReoYmocqZtKhX04BZLvz+GkPgngdNDBSBmcMs3po\ndXoLZCSJiHFUT3odaCjYcfcv+dyAdnnBbW/db/Z7bki9DqAXR2q4XKyNrBy2\nMqnP2zRd3yTEDTVgGBF0iFFpGp0C1Xgn7iJMsCYkCP+UiexkM+tqRrbkH1D+\n3e9FeQVCzXXjV2XIFJIgC3G5CMCihBo9X52V5UFPuq6+Y0hc8Atf3FlfyhtU\nOb0FA1oOwMmB28kPQjJkVHJHZzwhJt6JHcIqtfZzgLP3nHq5OyyxggLwW01C\nTynLA9H717Jb+PFTml6T4lcF0p3qKzOkaq0uMHFXv1Yl4HE9KbFyVHR2RbjL\nZAOy\r\n=FXwZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/touch-target":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.3e435ba57.0_1600353797594_0.6957907407950723","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6181746fd1d17c40161dee035aa8a058d0b9357","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c250ec52a.0.tgz","fileCount":69,"integrity":"sha512-0s/H/w6h7FlD2VxF/514/7I35cYbHwpdHW0910ZsHxEkNhIJKDjr4O/Vj2vGAtjPv7YUqmmSceCJCkpIQXlf1w==","signatures":[{"sig":"MEUCIAD2PMpCtfupAn961kPnKzpWOjNrMwa49iUkrTEJtP4pAiEAjJklOHSWuvukaRUQDK76arTSDCcI8udMw3qpndtciC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LLCRA9TVsSAnZWagAA6WUQAJGhqAyRUS5BRea/U25c\nGsLgIog0rAtQ+gahvLxVeAb5ieLqNeYezKQldtmBf8x5uU6O4dJlAtEIEItx\n/y7di8+rZ6liCqPOrz8MISikAbE3HsSuagikysHwzbFVkzj+c1y72riQKsZQ\ngYVf9rwfUsovsa8lRBDCPNMDZerEOhdJLifQsrec3ucnizODXtxz8ZhIddYC\nTMu/DKw7/rp8qqIYAh39H2PKrSdGyEP+sk5ekQo1TLVpp7yZIrGr3CXRfpBJ\nLc5VAenEnBU2XALgOUiouinnx+VS3FcIIed8uirI8xqRiSmVNAiPsgimR5pT\n03tzUrZGn1LGM+TnABzeELxMjwyRg4dtmrv23QkDMwlbhNw/MvyWAFHKoKAq\nRVKfU4MfOgHorvlD/B3zed/xvH9rRuW2nNJhbFG7wwQG0nq9XDiqygSIlCw4\nrqCZdInDq+CsRBf7ZJhx7fE9OIXcilVqqWylFB5JHJkh6UnXTy1NEPgejOJA\n0wHWn9zmHlLgDBvpP22Nmb9Lp7cPGbJX0Q9KSuuLP1vMcyRKrOkFaZLTzEyO\nQyE5QxS/Hv+9/q0cGyI5uJcWNcEWvO1I17kyrNlC7yw7IhkKftEZ9V9LuUN8\noalnLY51fXftSh/XEWGGkweAm6ca4HwR14KBrOe0270460xpazTmsvhgQu7e\n8nJ3\r\n=pUOG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/touch-target":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.c250ec52a.0_1600373451194_0.9034434386933274","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/segmented-button","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d53bef2d53de11eb583a2f22add2e3c780b5b05b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.e34e411b1.0.tgz","fileCount":69,"integrity":"sha512-q5+nncCODCYCfFy5qySFHA23wNslzOLa+Ft2uOIMkZ/GCINpF3d2aZ+orX0b6DyQBBgb2Ec3cjMaiD+p/nk9JA==","signatures":[{"sig":"MEUCIQCLJMnxdzF8nz+jT4cc429qydUNSO5C7Lun/YzR3n6TswIgbOr+E30Zp4SfM4KYZukgfRi87SV5eOAMWon4xDBskdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SCCRA9TVsSAnZWagAAnqwP/3b33LWsUBRyOPtQ69ZO\n/UEN07xIv1omfjpjkmFPH4tXcl6kxyYrhrZieYqoGMee18flBcGHg6xfSGuw\nH+DB1fKZu2tob7EWExFnY5oeEqyOT31d/xjoEdEIR4HXtvKN8UOPf7E8/q8c\nTsA6ftrVTJ4OB1v0Yp3UW6TtZUZjt1CyERtthv7CyTPT3KBu8yN9UCsfS78y\nNYFpEk2J+EYWOUhPGUoj96GK76CtpGo4qBk4T6nDU0iDiH54L/0yyRvQg1qC\n0rBtRYossAixSzzHIeCGBK68NRQyQPSp7RCJ+76cTg4qaQBKwKOk3pgldB1n\nKgyO4FHwSSXvzSli3ba4Tl8vYofuv9LT+2PM5z+kNM59XXk2nm/axSRg/3Md\nIZboJ9BBkKUUnkUDzb0HIE5UllR7ZVhGDVQUhZDl/LchJ6ZlFct0fn0uAPDw\nOpFPU8wdgg0ZopqgmuH37dQVNCyWvWkdoo09pHkuOGqr+s5hDURvPVCKxuwz\noKbpEDkmbj3QObYc+25G7CkEoAVy9UQW2bJdbuFsvB9nNQXBj7mtqu7eBS9L\ndU97nDGpDxEij6UKR+vY7dajfbXlmzxrMZdSE0WOYZc1zqJFH5g+79rrDoRz\nZBqaBr7Zs1vT8MlEshVkrKkxaeMjgeQ5Wb8TW51YjBL3xXk55Y62R+nK7lQE\nDeK6\r\n=p8SK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/touch-target":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.e34e411b1.0_1600373890451_0.26847113044047455","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5ee317dc161606e7d0312641dd689589f21f35a5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4e9343929.0.tgz","fileCount":69,"integrity":"sha512-oJZTCp1RyVmc2dgfPFqZrL2+j+hwaq7EQcHs+F6MIcON0bMtbVgNO7HmedFrFnBnYAmhwcIqBPRCk48zxNLcLQ==","signatures":[{"sig":"MEYCIQCF2YMoTEG8mlbn9CMFvzbwoW+M68EDvluv3ySNZj2H/AIhANPTZvhwIBb2d5vlWigAPxpLYVy7ASmUTL8lLGsuykgh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pwCRA9TVsSAnZWagAAn0QP/2ggoDhkOs08vi/dYfDu\n859na43ANYs+q/gZmZVdDgfzHjs8rFm3BbOnG9c/mDLVVoCqk/yOU2xdb0Qv\n7Z7ff/wzp8HPJXXxcxcVuAqDXp80xodklOdoIEtuRyUeH1uxSpa3uhf8wBZM\nvP+SD3bIWOcWdCpeMzE77/PBrLo2Kb0ZeNppMc6i8uTsD5+8KdjdH5ig28U4\nSGFTSPrpcDfTpVH4gS3qxF3M8FcxEga1hx0bEE9yGQa2BMZhfT7UJmrgmQOP\nuRxbUlu9I/0DTszBM/jt5D4W3cCskMKD+jq8wi0yaAhM7bOe1PGB73lR6nnQ\nHOOn2Er3wQjkVM7B3J9++9qWedjpPIOUPZsFsuA8oqfpncjpvNTSopWKaFXD\nBzGMguuBPEI9nzOdabnZqgyU3/JbO5dNNfnPPA7PYnxXyMbc738Fw3ztCziy\n5YHgDs6XNgvInoFtgCV2QW/nE1ESyL6cgNpt4FghF3lucAri4pb6qU/iAA+L\nZ8tha3lLyioCPKwa8h1+k8+BIJyw38yt9ebu27r6LHNBLP0tkfJ6eWXbu7E1\noULnDkv9FLWWuZw5CtZHV+CBKvKVFtxwxtGc5/DfEbHt9TTfJffJ0ZWEktWX\ntCkPvGfB77JNo3ialG2ijZ7uv3OsVB3S7EX8cUqTb3/QY4NCFc91qElLjeni\nM8In\r\n=iuGV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/touch-target":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.4e9343929.0_1600375408001_0.580083797239163","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8fe022304800acc3aa4123b321a95e311621e5e2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4e5c350c2.0.tgz","fileCount":69,"integrity":"sha512-q9Rce4nDv7MKmusDu9phuC38IheLVVx2kQw9oPcSYvr8ilDJH63AaG1N907YyT/Q7rwjwbMSgoA7HRniJgneJg==","signatures":[{"sig":"MEUCIBVT0B/Z6SeooLPdMTFkFWGZTUNsx66va8YzUE7XDtP/AiEAyqdM8qytW9iWaUMjAAQhuVXIJ2dk1v2ItuKgyFD+k4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReyCRA9TVsSAnZWagAA9qwP/3c1EnZgy5r0je7qrOIo\nICWc3cI+mjpAfP7QjA2wg0OfeUoCnhj8TCY5WpNSkI6t7X1VktjVfYFfqR5o\nEL35Lmw5zFITo0TDoWymV1fPL73g2169fN5ShFJRPJJjL39ZvAN3p8uI+6Xt\nbZT2+i2Ytc+/cICdhZ/SUyDV9Y1t2C3exly40TGYzU62jljHBDwY4DasZxWK\nuK2hKKjYZAFZjXahI95HLu6TmeesnmSPMTKC/43GTzqeNzBFm902dSwerw78\nKY+6GpPK3gcJcb/I5vyeFpTfp34nvxSGnNxMyhFFObuSY+MhJjpZAF/5cRkM\nwtLaKmloqCHRAIo3qNe4XuXOFsYouPwA16lk7IAAnG9+vwzIbE/KEirxLish\n6b69Xy/zUwx4FV629j46/flNldo8LXKDut94fjiEas6z2Y4H9N4XLjNT6P7j\nCDEuYvjobuohHWmSI6x0PHB4y/9NAgk2j1hmDpCDaN7XuQwv88ADkM1Z9cZl\nbiISuIGt57AjUAZGgH8tc8bDVtDB7WeWsMSbLAJgdbemULtaxs4ymSgXW61W\nsouEea0xmMibBOwsweafpUCrYJVeFvToQC7+ttO6fOZRipo8zJfa5UgxvVVs\nWxpUIU5AWvPJlyX13ycDtJfdBqLjC1nUVr0t0jyVnrHMCYL/caQHrgvbefdB\nvUKf\r\n=mUPn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"ERROR: No README data found!","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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/touch-target":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0-canary.4e5c350c2.0_1600722865983_0.9888271553400418","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/segmented-button","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0f92fb0c09182af6c3d27ce066859a1fae0cb9e4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.16c563ef7.0.tgz","fileCount":70,"integrity":"sha512-l242NOFR3+7p5G5/ZamYlvoViiAnyBUiyIF+pQeuX82fm4C2zVTRfC3+2dLH47LXhFxHtyvifRXcAGKkhIsZVw==","signatures":[{"sig":"MEYCIQCAy1pTaUEuabAcRrn8ZBh6qNeNm4ovaA/xMIvuJj6zuAIhAK+HePMTcEP1jSBeLtHZs1nkBUTXEyQQH+I9Q1o45S3Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalScCRA9TVsSAnZWagAA1HQP/0+M1sSP1015Qh4GFbwG\ngzf6/ijgR7aIuPFdrYg1dxqXWBXySCstIvGl5QGo76C3Y++NwEIbSUZka/Lq\n+WGWgvM7eN5b3yUFWNBHRsV9vpmzWb+D7JwyjFYHAVFf864JI1RWB9FpHdk3\nqpt3+tuLNg2opNW7cwWkO8Mel4vq4rLUtuNtz0eYUSeci6/NBQ/wmvlPRVN4\nAPdRN9v0RUe3FN/jGXns//JCc00vsKv8q1GEqNi247V+lyjzA4yoZ5AB90ke\nXpLnqFD/v8PptVW3FwDFf9k8x5eu0p/VbgKl5uCTtyfYpkqvH9dTRyqqZNnb\nG+96p6pZhqn6dI+JK8rTnYqmBPAxWGfhHRfNJ9+eTMN0+oV9gh6fC0ZOFlc3\nfBTq9j/LF9PrQMxdOUqS7IQ0gHDNF3hTKa5KEgjAY17x1MYWW6PEoCLuKnQP\nMUkVzBYW7ysTofNhIpEavch5hq8polknWQ16d5IwRCCKeYEMIjbbRrfQ+ae8\nk/NfDPwMNhtZxV80vuyw4EVEpIQdsDiav4OibIQJy7z4JW4hvm1zmYo6dRGU\nbCKLL6xGGOg9IJrgg4URXcB5pfLpV3DvKajzc3IPCE400UW6IOXJNn6X5Exw\nAP6xeePKPb4pG3DzHsiZOBHcmvrvj1aTMlLBA0MhqiH8SpfO1RFd9j8h/kbo\nRt1/\r\n=US43\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/touch-target":"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/segmented-button_8.0.0-canary.16c563ef7.0_1600803995469_0.7410924923181401","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/segmented-button","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"39c03926ed409479749191c90c734bda2fcd16a5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.fd8af3d43.0.tgz","fileCount":70,"integrity":"sha512-1oTZuCcdo5l6hJvcK4D5EwCD4SiL5jlQ5twSVILMtuKaiIQICZofqWTF+QcZUB/46lBhJn/DgVVmsFbJ4UzxPw==","signatures":[{"sig":"MEUCIQDm6hu4Xkrbr9uYAk1hHB+VRmgvTekQTFRF1nUScoeqLQIgMFegb4Lz5LsykCed62erPs+AWjjQN53BNE8G3CpVJrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LSCRA9TVsSAnZWagAA14oP/RF5/phkewPbO4n9JkyR\nDYGAVyeQQaWEwaIkR+3xB9TPb5nhenBiiiRf+15sIl2iGreJw+IKcM0wFfVK\ntDDHvSPcMholXtPvVoxzC9S8oWgEB2s11ODsj+VTHh6fwedH0Kn8l/5IpkDc\nP+wAPeVoJzhWrMieRBkTASJlsQM6x4oF4SKETLtlGb7iLAd6wzNF9DcynXMu\nu6WhIH7eL+7FrSWrjAw7shlqZ3rT3FwpDHzdknvqeGd8fXf7nMQvGAa4Cw12\nhOLSaMYeAtzNZCrgkLVI2Zt+vI+Jbi4rjZSwzL5YWz+fLHWfbeh2PdrgUzKO\n36h1HSsaEgxrsB//EtZfpDjTy196kzVGmOec/jqcoh5wSr2jmhuO55yIGyAg\nbBmzBTNynLpIg6aXwRgwwK/LrHVw+V8XkW5nru/l7d6/FWRrhEHg4UoSJd8x\nEgU74oI4nadAP0BBqvAa5yvgwJY6eub6Q1wOI33GSV/xqngla9f999Bj7CmV\nxu12FBrej5prHUzliFYxYD5UTsOZZg7mQwIbmLP7HpADDTSykh7Jm5EXeDd2\nh95Lx/3QgWNzIVQgUuYLLIOoHARNpG/uij0qMSfSwsIChAFS0s1ivMV27iBo\ngC/ak3zZNr3TyVw69ZRfsSk9VjJLu7X2fgTc9nROFOpXQ1eTE1+fUcfLkKEw\nVOnk\r\n=5m3t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.0","dependencies":{"@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/touch-target":"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/segmented-button_8.0.0-canary.fd8af3d43.0_1600889554416_0.7475051700741446","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"47e121232ffc760f512aa1f5197f734a3d091f92","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d4cd83a85.0.tgz","fileCount":70,"integrity":"sha512-w9QPEZocSeIxJf2o6Dr1Wy7VfRi39QFb8XHfdcRMOX6RI16Mu2eilom9nJAcszPr69RypbnOTU3+GmNfwkPmxQ==","signatures":[{"sig":"MEUCICfQhGuKRkdKmbSa+KTV0MJqOqe8W5T27teh6jOwhoo2AiEA5n0V3G/HfInjmfg2ys6jkCVkG49NJbifHDN1+nkEXz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtpCRA9TVsSAnZWagAAcx4P/3a42UMaWWgzqE53sSd+\nB71LA5Kp06+8W/+Zvb7BW5M+TxMFIjMduQRO2XZ/8zIfv5CVGZiazjE5kiEV\nr7+Q1z16zfuIAHv+G0j6CneczHsJl5KiN60yBjfZDBmoaY8+EtNLzm1haAvV\nTe4kUcFDymShSpLqrELpvKDV48+xfUTRRq65q0MgeaJNaLJzib6pQKVkO75D\nNLBHYhXmMDbV/iXHG/EEJxL6EQbbtZDDVEYDStbmlKFCjCcHWpI5dXFdp4A1\nb5dHQDgNuPv/BRfmvTC7TqNsdtrIxeJuu+Vbjmn0UfzlXiP/na5i+oPrKv5U\nJOyfv+Jw0h5aRD9yK3FDKP5ptkRl9qQ3XiWWO/H7glp0K3nWv+wtJLBwZZFH\n/pZVF0I/SFnSeKfK+MOI4GPJpJSlgshh1cSTufqPRvB3EpA2Q/Oixlq5j369\nZK1rPCP442YHgm9ZyauszMnNL9wfVKJKtREhnNqkD838R+w8xOV2KvI5+9xv\nUqjyZhlYZ0kWMX5OiAGQT5mO2cYl02lkky1HJQC9n4WrZ3metIqL+9mDDiBB\nvUPrHWaCGjdDR9npadEGA1tARlBEEdAeQS95S9o2YPPDI4ArbkZJHFWi8aBo\nz0a4+mC2RvMwNneWsbkojjHSN+hKmcMKYvJ3Dqv3xL6+HioctExZcGg66vos\nV40X\r\n=6rui\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/touch-target":"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/segmented-button_8.0.0-canary.d4cd83a85.0_1600994153331_0.1704977043690714","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/segmented-button","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"189a27aee090982769993e6b9a5085a19a687b72","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.199aecdfb.0.tgz","fileCount":70,"integrity":"sha512-M16eHUZUn1tE1zPVtgXe6J+MDcYaiKHKsE54J1+KvAmWlGrOzp7NGNXRKiekt2e3sP/7m69In25U6ebh6c/EDw==","signatures":[{"sig":"MEQCIFuH3lqOrNro2adF9SXuDf0bk9OqymmIcep7k9s/MHKoAiBp64y9RfNvp56cxY+e3DqNWcrXBpa2uoZ63eyYjZlR6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIJCRA9TVsSAnZWagAAtqMP/0e7TRNpNYCUpUA5xDnh\nh+1v8uoCPJUN/ViKz8jc+lSlARgZVhfeDllPJIh6tX//NaGlC9dCBD8fIn2m\nic5jZEoB6hawnS2C0BTJX17m7JWGIZDSBnYz8zT/SZ52TCJga2zPdfiRFz7p\n9XSFOb306XFJZ1J+j0mion0z7izLLYapw6Gr0C4+aBT3bgIunFv0SJ9o/Nj9\nRBBztNB6bj4ZAIEm8wKQVw0PhzCJpi8C+L3gMVIZilD0D4z+mEIOmybBVxSC\nFod4ib3onpQKOQZJdRzEFXLdXOG20g24hx8Vhm91RU/nLLzlRW3bykOogHDx\npa/RVsHbz3nRedGLoGUac8FhiBeGLy1nV6QA39MLRgwtmhigkjlh/n4rBUYf\nUb0s3d2uZl0xxxNPaR8UsKn//zKS+jQj6QPz4i6Igroc8iZsRPSfSSQQzm2N\nL0AyDxUUVIx9f+DIC+BEhfjVFxDvdQ8pIEYPhq8DgNrKYqYqdp46cVCIGUKj\nJcYno3t5HRvfcwB12oYM0w/c/bdqEbLvPQqaWPKWtAeZxufxsJz9RufQhZ9m\nCMrQ3vsbhHW7dkVuCyBB59mxjmr/P81TU/FYJ/OG4vdq8YuZmOAKFwES5cbR\nzApTFEeCW+9YVTtE2zJiw2DC4eIl3VTEdHNTyxxKgJKiTyCEDbpWlFNTh4vE\nkDzF\r\n=dSP7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/touch-target":"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/segmented-button_8.0.0-canary.199aecdfb.0_1601049097082_0.887526038601429","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b147c2f349134e813b7418a5069bb8f7f2d14623","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.38ef4501f.0.tgz","fileCount":70,"integrity":"sha512-z6mPfhW85sfL+QXAEInzL9kRLIZ46dY1J5xCQEa3481EwbPnmldGJYr43NDpKhPH+YOUYeR1kPxF1YfIJyRcqQ==","signatures":[{"sig":"MEUCIG3I0BYqNqK0ETcAWDKZ7HJEJ/GHqhyBGaycWG0hg02jAiEAm2GfYBtjM0flGqBz+FTu/NahlnA8pLI0dKNuoyMiTnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM12CRA9TVsSAnZWagAAAioP/iVkL9mqS/UE7YdQyHnC\n4OB4Cbgif9K1pEd/I1qbvAUA/+wMtEC4fRrQ4mDXz+jaW15yKc13whXqOLJZ\nzgT70MyM4gcO+bDmGixLtprwEPyaSOIkQE6ag7mWWOcTnhgTRpfAD+EA750L\nnmZGaTjDRAySRY22888TTuDAQ357iH+ypd/EYPXSK555si6twgvlbL3gv0ue\nZWHudShT/nMuS88rUOoIDdDmMRSzt0hnkfQnZ1RG+mJiIcZ/pIOWPBbwhALm\nrJQ3EeE9JMMtj28hkhLKe7+pqUgr445qe+OFNYTjPTylFEsqeemQQbioZJ61\nOUxlZfVJn1C8cdIhWjaW6d5Q2q+I12gjVSDioUm9ShQFU/WTwqP8BvZOowrQ\n3mTZAXwoFdms9dSJzt5UprBGRI4sGuVSkzEGaJyZcD0j4PMVa8eGr2cIkKqu\nHbLw1VkwEDo8I+eA52wYRdw8KlcOp+yk2Sh0D/cpY4wrHVY0TnKTXnokCut6\npysH/a6fnY7zWmuVEe0Ynn84bDEEbI8oquAIfbEop4vbmKDRxcNYr4z+rFmY\nkzB+yZNP/Td2V0yR/6Vq/Pj7CE+Xq25S1LWgnPAY6QQge7j9Bb7Sq9gFBWs1\nIy0BJq3Cffv9BLLMNWg5cQ67s1UAxSiaA0j5efuJL7+TfOMz81FGhczgAaKN\ncOP6\r\n=bY3B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/touch-target":"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/segmented-button_8.0.0-canary.38ef4501f.0_1601490294096_0.1593226036354063","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/segmented-button","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"95c0102ee7cc70e61bdab8e896e0a61de00fe04d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.774dcfc8e.0.tgz","fileCount":70,"integrity":"sha512-Y7QwRLmrsV9wzgF4HmiJ8sc2SEe/K6DZCoxoZY/iGQArnxaEqBU7whCGjsKXATltMGjf2An0F3Wrz1a30cnzwA==","signatures":[{"sig":"MEUCIQCTB3LoEjiHNY/NCot+doWTVAoEE5XPkqpHMkGoTivvhwIgWuQTP7m+CfO75qtIuEMnv8pUy7yFBHPohp1QhOQwteE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadUCRA9TVsSAnZWagAAk0cQAIa78hHH5KgtITVMetDv\noOjKgzHn47eFnkgWhVkytn26eidi3q9Ia6NaQsbz4CbHXNR347dYpumQX98K\nir4cA5a4oLcbDW8XmoB2mVE63hhgHgKMvICitrddfISPRm7EGwJTYmgMeYof\ncfkIxFUej+SqOp+Ypqae6MqeiW9oddqUZS8pKAYpll2XtfgJgRhyuRj4MOOk\nE0VO0ydgfnz2XCvSN/q/I/6kzvWPR2zSybVZhDAIK2O/QpLlrYtIb5zpgN/r\nWTIWm9OBbitNVpAws+MRRAzE78GbvZ13gu7cCjpfJmNPY5sHHSz8LayIiPwE\n4XSSfHMVeXCEjsDrsHRMZI4ocdXyPrPowh2cuAnWV3NNE4UI/4vXRZaxRlFz\nCF9SgP1HbejKuJJq0/l6TFqwHxkiqSag2S+DQNIRdF34V9R8WcrKwiTJFG1U\n6aYjjJEJ2KxbcD0fosYHIuPBCPV6liOXRcpOdAdXTO6w+03rhZqxBsiimcmh\ng9qpBbCAs6pAetpE/Pz2xvFkYdPjHCMgKj4vgw0smcuNYA9WFta/dcN9a8aq\njCXHBt5bu0fTmHIZUArP4zak6XNJ1XimyqejCnhUcsoV5efecC14fwMHddUz\nXUHzyMjdMTOIzIBUgVidEG6k/RDG9ww/xdqGX1HXuOW9vcAPlvqSm+Kg+QgU\nqVJn\r\n=XJNh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/touch-target":"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/segmented-button_8.0.0-canary.774dcfc8e.0_1601546068126_0.046477278247313514","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c40f56ad09574b1555907c14fac3d9909baba629","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.0f60323a8.0.tgz","fileCount":70,"integrity":"sha512-fKoz3FYYREiEYnMGNrw6rL+gKiutEW2VXMZ9f9ygZL9BD0Vb3IB70R4LuQ5UDLMDwJwyyOiQpem07N4j3nJAKA==","signatures":[{"sig":"MEUCIQCm0J1K9wm4CQIHnzGOhqkF18xlVvWQYkiHCOhQ/q3BsAIgHp3nF1qOmb8OpUGZSM/jGFN8K1yeCU1QyCCIChTGT38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4BBCRA9TVsSAnZWagAA5NYP/07GlKTXpccyarnnB6YJ\nnXlCblxrSosulWQ6D6Z26U1whfAqF0PYq+jadMNesYM6x+I6lshvKR4ZujTR\nvfcKRZI3uYEmNxRrbPBP40BxBFpCJvInf3DcE3XvPJo8pqCQAcgCCvoDBbYa\n/a/6JuyZ8HEhcL3anQ7pehos1DJTILJ3NWPz8bowGFNv7Xnjf+8EEk3x07Bx\nGRRuVWb7HRylSy05c3hRAnVaGWLKb7YKJaFYf+B5mOymkdBTAIxSONcoRzOB\no31KGhOMqziIZGY2/fHP7LaaSql8hCBIJ5R1nVLstQVgiQN1iYhFX0T/l05L\nbN/T0WYQVH97m5FM0xVIDyRlo/PWCmAzty7RHOMZ9eeuIGUlV3/RFUUEgi05\nsCBAkAPyIGXEFTLF2XxFgwFhyKHiXw4IuqcOMX9vhjmjvPeP2bkIM7OQT7Qn\nfxxyogGKN/HdrpK7aYPJRZk03ynjp9fr+t0uz9RvAA8pU8UORUnRG5amG5QJ\nnN6hhu77LGG5vLHqgZalkwHqajOKTnyDQAAPJ8iocp80UsE4fFDy829JTgXg\nbI5KecPD3ZcyFrbn13W3z/Cxa7RLfMQWQB0HPEMRd0meFZZL7WlZ5qRR7Qh2\nrcJO+RSbmryJx02G1GbjAkxOtEVA2Yq7Nm6EKJ7W4jcZKkpxTtDHQ2Z7okGs\nKbdN\r\n=N/rc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/touch-target":"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/segmented-button_8.0.0-canary.0f60323a8.0_1602191425188_0.11482069159075481","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/segmented-button","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6bb3d54ef89398e05d130ab9e1f4ddf2778d260","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.d71622574.0.tgz","fileCount":70,"integrity":"sha512-7IuOAS+ND/pQQ8EDHVpBzLQS6l+OcbIX1gjjpzFtpNqx7v6TfVLaJlwBfwAOKmxKx99F/Rszc+g9Z9x71KAB6Q==","signatures":[{"sig":"MEQCIB7okLIloKNlbVaQIb5sMaG/P6A92lHk5DwscIUk2AfeAiBdQfFgU9AoZ+ZyFzRH/ZNsjMGtnbP+94D8mJK+Bz86BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCKCRA9TVsSAnZWagAAsHsQAJ6jMvDo+jJrJoq3ovsJ\nxqrmHcDmLDPibLbCw2ytMbnj7pQ6Tgqh1HSqkT2/H2qXthLHimVayzCSBKA3\ny1BWvVDPqlkGHGOKS/eKFL81+Ik+2kSoTf/gM641zyGzkP4nogCd22UQfU91\nD14msA6FSALdcARRDpGgAYIR3VdMZAig76aeJpJ0yWV8HXvBl9EDotg6EgxN\nlY3Z7P6dSQLfOYm1lBQ7wTErJwLYCaijiJSPQBXAlvxJQcf7Ix172Wkk+CUq\n59GXTss4U6dlOGavXx57UF7Fu+A/JNcggtr+1SklIfhs8pMPERMcVa+daRyS\nz7cH1TnVPcwr07LJ0kW+5xQCiWmsOt1h/TCuzyi0IVDXRRiXjZUADX76rf1M\n9UEIV8dO1aK98cXrj2WSUCVpQ6XtMIpyAuOsaz/Pbo4l4jWQhlVDzAVW+FnH\n7h4BcDc10HKRKWl5/HLvuXzbjh7xgTTmur+zvyoxVvJOPSf0IlJ5Rd9LrVKZ\n07PHUS1zGFmFXA1kFVitFqPNQ1UNMJEYn008MffoyhW5TOxaH9c3n5aj8t6n\nkd1NZKPsPIsRbsFXNHPVWRZ1j5H1XV7AryJb/X4zmCxvuag+EBcsq57F65RI\nMc5oGTDo/0McRS5FRatZr/p0aiL68N2LAsXyRY1d3/6P0ywKva2MlEq/+WNz\nDTcy\r\n=QBmJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/touch-target":"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/segmented-button_8.0.0-canary.d71622574.0_1602261129940_0.2082443571458732","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/segmented-button","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6d25b995a89f630a50d74bee357b3489dc08ec24","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":70,"integrity":"sha512-HvR9fb4PtcZa7Vi/LEGutOoONZNDwU8sni/0E877br14fJC4QwGlgVvVrDoDcLKP1tCK7HLbUFYVWi21RJljzA==","signatures":[{"sig":"MEUCIQC6bExDDun2uJaZ7/DZSSRQ9e3jwZhDajng7NvFQigt9AIgb+3asymGQhPqcJ0rjW0kf0xBNETEUxIikn+hodAawaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoZCRA9TVsSAnZWagAA1iYP/1VY8tNVihpnffoG2q77\na4Zzxr4ntZkS9O7/fzLjPaSUP9qw86q2Vst2kbkHax8GRBFlLuBzyGV5lCah\njOO5kQYS0sEFXrq3Nm7tOW7Henu7sePXDePriNI1JkXt+r31Ler4orPBOlrj\n92LhBQgn4imu//VJqn+DypibuB0JU4xHTn3S3EvoPryfjYE5NDkV2t0TA6kC\nuiFUfZGSCBvqI5EYINH/PViPjuUFUmJH61VWcFG8S8NgYpUC4uXwnUGWmhCl\n36P7/QugpTfgXCf6q6CKInDAEoFR7971qtw5V0uOrH9R8bK0+TaAJ0xyjqpz\nB1W5HMgo4gfNOhqHb7ZiCG4Z14PX1smzDx8Wp/2w7OwIOmVupUI4YWkc0mKp\nWfbnMibpZ6hMxPBYi8rPMDG4GwyqoZ4X1J/Gio2emf9GshcUWEP37XEfzPeQ\nqpm+ys+YmsWywSCCXx3jmnQGrVVyJ5MclHmBzC8qS/tI8T3DTU0cNo9R30Ja\n9Tf+3w0xapURF3VSwO3CbKRsuP0ZMxzUOPVSt5VhbhITy8W6AEPb3xcY3B5q\nK5DikU28uZegb7zeRx661ZVsfyi6ts0uqeYr7+UIKu+aqoeU7jR8AJgZcBO1\nRcc8cqP2eIKJST864OKblV7iMvhJQa2Upc/nR/xg7G6U7ml4Szjrld4qm0yg\npsTh\r\n=B3jn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/touch-target":"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/segmented-button_8.0.0-canary.7a9afaf4b.0_1602284057095_0.0692555306421998","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/segmented-button","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"70218afa0369726450071f9e81047452713a0a7a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.8a39352c8.0.tgz","fileCount":70,"integrity":"sha512-3DKwawvv/3qxelDwYUbT4a698GilWzj5iZQ/KKjVRkblLkuUbqBK8XUVlMO1FYT6Y2/HDmV7TMe4zBeV4eDzpQ==","signatures":[{"sig":"MEUCIQC4y+WJRxspmFZS8KIdBDm+qkvqNoNNlzqe9tECHDPQ7wIgDlhXz2HINL9R+FioZ71zqyienjo9f5/TOmp5ooRMbt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJaDCRA9TVsSAnZWagAASKoQAJ05YDV4iLOwJw61K9ZV\nLvH+zzYeNuLsZC3Cm0Q6VHDw4x8rpzgSOuJ0D+5vi/gZsAKBaWiR+Gj2DhBY\neu8XEbcuGIsEIeQn7O9GFXIWftkD7UwYL3HzEAgQOFbqoRPxur+pXxbRTdmU\n/xUN0ok51OoQaxlaBdvtpM4BaDTsaq6DOEC+oKBfC0KCPjvbth+R/uozdiBc\nL1nDorZUgR/Uo4oZgqoomkwvOWfNb8yE52DC2/ZVaimh4GsE9ONDA5GIEVWS\ngdPS9u4h+iRQLDQDvUDhE7bxLwsLtfY0xt5wSufThV64YSZ3zEo9N15JuM2S\nZVa5GewPUl8nOvhWLE7fsuGMRk8J/hX2tER9DV8BaO3fSXTwZ29Q8KOCLsxf\nMW3rfJmOeO6g0cGFShUMdSWPAOqVUi/eAdt+GD50V7jLQyfsn74me7CVXvGd\nFzMlXfQVjLGV1YZgyBhMKwMsqSsUn5JBrpvp1PNK+HMehPotwS3hvSg9i/87\niC1o6qp2f8TWPvJiOgGD30TONpJuI33r1HlHmNoduX6ZjnQas7PAs4S+QhT3\nQe0QdfEXpAxtQS1YzpnD5OJzUR7fFQrrHzjl3EprY207TDm9sPLFeFWJctRt\nidXoQecH+/gboPbDb3xhoHGAqnweRB9XE4seLVxb4F6z038lOMN8YbJB6n1a\ns+pm\r\n=tlcQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/touch-target":"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/segmented-button_8.0.0-canary.8a39352c8.0_1602524803254_0.2664051020894682","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/segmented-button","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"432557d4eb900e546e3fc1674abee322319372e6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.790ca85fd.0.tgz","fileCount":70,"integrity":"sha512-4yQj5hkwoGgDo/dl8P0d4h3YzN+d08ydcvooJFspLbrrjSGTEjv3nhM2JOd8I2KggBV5OkFRy/Y05ddixNRE6g==","signatures":[{"sig":"MEQCIF3UDhWylkgt9peknqdkBQS/HiKaOxp7ArBEvwwvdkb/AiBo9+b+MnnjBskTMqzN/97YmgQco7Uf/01eMhlJEkKKOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNE2CRA9TVsSAnZWagAAmrYQAJd6M6Lu4ok57JwWHYFH\nSk+l3Dd8L2yVf+IS+2g57wUz/0Sr6sO0izTYx5pEfXpzkcIuo9YWVIszL0A+\nHaoc0KpyLszHcRioQ8q6lG1zuIZoB4GAdaPge6gBMJejdE8oIXnymF3j8KYN\nOaiIrhfoGBxTPsPqM9csXmOgdM2dX9kWUgXXl65/ENg7FYblk2TNqbH30IEJ\n1VtAcX08+v8PdaOTrdpb3LXvGQoY1bWS5DzSlZbhgJgQVCgVrSn2XuAk20QG\nTPdlzUqvSVBDu5eAZD6J3W0vjyninwYdmrbYLDi386bVdiA1KbLyPXM30hTN\nmAaVp4GjPoZfZOceRWuTW2gzSl6FRFhZMdAXtxks9P0ifT1bSSdk1IKtLyIS\nI7Vx5DUjh3rf0OemOG0WV/57jS39jjzKLgUO0MfUxCEi5Iks/7cGVslAnaoI\nqtZlaIPS/D4ZaJ9SixjJmxCJmxVYmMT+m1AeKWnwjrL02zi3BhyxBrytu8r4\n41K5jTxrunKnTWEs0xyMdwfCg9ZYzZvQl2K0ofHDJ1JSGQyuB1GGdy2uTec8\nzKcrijJjeKkNAakNtasqfNByCQIPMmcSOeB8I7LVn7GFhm8PQ1BduBFlsE7I\nTNMJcWKzZ1vwunGbmIRE9OWxJ0CZzo6m1DpSsMCUuXe0atYvoVxlezpmA6Ll\nCA4K\r\n=n1m1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/touch-target":"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/segmented-button_8.0.0-canary.790ca85fd.0_1602539829555_0.5215808352134039","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/segmented-button","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"88ef3cc237da4f41e19b6fd25cbcff02d6fb00f8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.174c0becf.0.tgz","fileCount":70,"integrity":"sha512-HzuHVWpfwWR8lhkrRri9b3p4qfl9mAEHtjOcpcxPgTkjnK3uEk6HnqZFQJ7ZE/EKyBkXynh4HkLPwf7ZPbyBpg==","signatures":[{"sig":"MEUCIQC4llKAlwhjiY0urnirDsGJ3mIHbx5cyfojMvTus3T2VQIgVKANrWc4fC0bvAbvzfiphaKsMlKwHrDhgaR1q4LhGoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9kCRA9TVsSAnZWagAA1S0P/jAnGawNW1QX46MMT1q3\nQih0In2qNbIr+XSRzi2vuTBcZvd/x6YfJg+wN6aVd/Xmpwym+Rwhv1owEjgr\nmSdxCETxj4cBOCH+wLpWJvUUyPf5opK9IOGJpHs5wscbKAVqrShkOpBbOp1+\nfcP8yBNT1SGqUzN9WXjy4Sc8Xrc8uS6HEa4Vri69aI651gdW+wQu1l2f2uf+\nrG7u6xM69igMK5Y/mmyMHhR/CrFIJIP5g9NuA2KYlq7soJ2I11B8YdLjLDV7\n67J05e0FDJ/UtLSkSAjp85wGUSO1OsENbL1JeI5tbv1BWmHPgq0SF/JXIg59\n+gutOvwUnP9PGbjhO5RWe2VzW0fBOCesTnO+T5RdWUrO4Rlw4dNg5Du4hhaB\nj0BI86z55uBT7RxvZzHF0hQKOB1XETSktAggqJZ2tBVmqzfabZQX7A6SGMvF\nkWqp+R/fpSUwGARuKCc8eHK7kTQ8jLCK9wq3El5q8SBbUFXDk3i1wJ5O09k5\nWFc0pBzunQIqF1mwMO5tL4SHigXMjjIYzN82egzgJjpH2QdJOBL4xBqBowpb\nxwJU24WgNyO/iBqdpONT4W7wSrhEYQNH2Xhk9HD/DlbPhPDAkp4VWGAmcPo0\naEiUoRGJhiCbH46Esuo+hwjnxFQokknxTdO63orIoYXZ/jzazMfTHRs2Ln2h\n66TQ\r\n=YoAZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/touch-target":"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/segmented-button_8.0.0-canary.174c0becf.0_1602641764264_0.5949428589473948","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"37cd9261fc364ceb753dc8e122a0198884a2df37","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c71ebfa02.0.tgz","fileCount":70,"integrity":"sha512-0jYruThhCYPWc+p4yrIJ541BEcR/zzBYvckPPvjB76fHxmc6sJTpR2qb2V4dz/E4i/YMvp+cc41jHBUrlmv9gw==","signatures":[{"sig":"MEYCIQCRVGtwMKDFj1//897rOQ+yPSDgsjFDXCeZtZ9Y5mJlYgIhALCRna1FYwCN6p+x+fP/qIKWDQ9CxazzfMjdLQY47olS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvzCRA9TVsSAnZWagAAbHkP/iy73C0lsek1Qi1h4zLk\nngEOnvflFq4MzHHl0sAGonAyVe3zutEPREcl+pahLde1smxEr1RvB7zROxVl\n8ok2BlrCXXBbtf5v0PQ4E9j7I39c2Wh/FLQuOq3HNvP3DuzvqTW1tC94Xica\nGw6PiNiM3tOZhBq3wPa7oyj1BdatbHwCYlniGyce+fSA1xbkBVUuRrSmz4MC\n4Kp1w+9TlHSRoiStbrFkxRbveB22dXFJ/48/GEwFH/YXpgQZPtcU8E/2YWhB\nd1dsVDb68R50muvq1m7SOyChW6+4LSkl/6bVa+L9/kJamHST3I2cLOfpjROa\nq18y6i95b3DIJHzgQzpilWYwusIlse0dlAos3a2PQ+jKOSxJ6t+iNBhZn8JA\nR3aGJe+XTIUV6Kao3ihuG2z0CVUp/u8UvopyhQ+ZYmYfXVQd87qRRohnpHW1\nAtBQSyGJy/r1bS0psuV+9Doon5mgmommw2/DQUtA/dlSfNoJFpbRuc6n0Zps\n1TP/6qMYPLsmh32EQoyuo5fklkyoyP4xuhY37GDGVsysarzAK9pjfawkYbGX\nQ9GpVyuAHetnbgzXLkZ0x+odi8IkeSxrDa6PUyVqSD2+Kn+nGXq5mUhN1j5Z\nJUDsUw542VYhfTeJ18WVN7IB/GSAXd8UXeEkcxxNk5I3lr1pvEFjaALfErmy\n/aEY\r\n=MxA9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/touch-target":"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/segmented-button_8.0.0-canary.c71ebfa02.0_1602649075206_0.3818923395673619","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/segmented-button","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"43510f7861c9f0372e9baceb8a866e3bddedf283","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.2ab716cbd.0.tgz","fileCount":70,"integrity":"sha512-uDqTnD4Tk67QtgcUvIpAEvaSPtWpOsA2b66s7nCiPwF1kzuz/p2ZirZPhM/LOc/u5bmkdmNARfUudKsuzkqkoA==","signatures":[{"sig":"MEQCIASOwZzfYDGSRCuvghZfc3EooG3rk039oJ/eCkujStBOAiBTpjZJ12CvkVZMtVqykKsf3LjsqU8IKHrzX49RJ1tXQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOXCRA9TVsSAnZWagAAIsUP/jFKgzkKMfSqzyFntjBI\nrB2AvdNJvZE/3dOkZhQ2YSEagZc3sP2o/ropYA8rEMEYjw5Bmc7nHKTEcTqM\ngT/VjGSnAHhbFJKcxPkinLSQ4ud/Ft/qUmztVr0bU4fZwG6trSj2B9tI5pug\nP1JxZMkYnKFQWG0K6ou45g7NrHrfCj5U9rGLzvGxlv/9OC8z9IkO64oB0urL\nLFDZ40vwUJ0+sCw7g7twsETX89/FQomJ5U2nM/4bNdzzOoT1FXbWY4eXpnOA\nq8QwjzauZ/h25SfGgNuesD2EFgFncYK8nEIw9W7NAe1nLe+G1OljW1zvI2xi\n4vORpSq5dSeh38FmAo+CqpG+K3nGFdpQTaxWs78oM4Iumh/VmV0SJ/yjP625\nmmLmv2oKz4IHbrJDw8UAgltP+hiIyDyxKT1lXPdwuuAkZR/SyzKMEJWa9GSK\nu81yEmz/cFke7kx3uac2z5oWt9w2Mzo+HT0aoEQNFxMnqhpfsaZHTPhIYwGl\n9k61wlgDu5D79FDQPkaiUaY7JdZLGSl0IRh0Pa6K03t89xYDwd4HtYusz561\nG708OKClCZjc/BEZU4Ogd0Hhbt0D6qTLKGJXA2B3DajRcc9MqTJ/P7RU+oum\n0SztyX3zdQdVojImf95Rsj34rgfuIFtz0NfFtAYmj5ci/ubPXYv3VtuUNYTL\nLono\r\n=bCSl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/touch-target":"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/segmented-button_8.0.0-canary.2ab716cbd.0_1602806679034_0.5168871381218301","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/segmented-button","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"806374d8ea81d833eb84994705ce13b787e8588e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":70,"integrity":"sha512-SOqzVyXO5+KJ/H30g4pWo7xXJi9o7CYJvYNAy739vAO5W9ybV090tH0Rt404oWBRxobPKx00jsWOs4bhyBcL1Q==","signatures":[{"sig":"MEUCID23NIunrX0GTwARvgwsLdO3jwJ5sBb4dxBJ0cMsu3K0AiEA+R/7hmr2BHXGlrTeS3VzfAuDCOgZ8uKOQCxZwyoXUwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3ZCRA9TVsSAnZWagAABv4P/1I0iyGEbAY+CPzllhIE\nGE4s68j3bWiKG7/RR6ZXlDWzrwDNHKDvYT10jIKQIrLQoqrUIlsguM6lUFFh\nmjkdz6OdM3tBgU+nRc5jNSFDFMGN2mdMatmqOajKHjykgTCC+oYC9FRhTNlI\n7+zxLfqqZ9IeqxvwofCMpFrvJh3c3IJQxpaY8x2UZvvuzc1PJ862KvnOl4B2\nOz0Yzb7SV7R5xYOVKmM39129RT/iSUbg10mdAnDcMC+0d0+E8mkp+KR1/6uU\nYNJYuJYir+w7AokkoTbIevuuZJgWQb5/c8OnRrQtlAbytElW0w/9OTKoZCw3\nm/fPWUs71+lnQnIb+/hciM/mhx3tb4qY91ni0zfx9/LRXAo5164qUYF1XovD\nIFglcyfI0IlEcHQpHNIakJubpS4fYaYOOg71JFUp4EIdJpSFk/K9ETsOvnZz\n/SvcaWeg3LxX/3fUADpXYJ7GCo3bVr4C6DudLp8lF9u0lkVP9imKqcpnwaYP\nvsnYxjZEJ+DqGqkOXRvucfyn5aRZOCE16vLoNfKIFllFZKl9Ymho9a3t21H1\nK/JJ7a97gXoTC7OydnTm1Bju1JSPL0yWliGtiTj8bkvRVLaJYgu1ffWajnq/\nTZH3CWxIknCpuJkGKHP4raw0EPrZWg081iCUWV6vVxamEUrMNMRjrOs9NkrA\n35Y8\r\n=twoM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/touch-target":"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/segmented-button_8.0.0-canary.43c1c5e2f.0_1603116505443_0.7190754286761132","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/segmented-button","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2a4050f4a3da5c7675fa75434ca94873319be83a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.ccc64eea3.0.tgz","fileCount":70,"integrity":"sha512-j9dr6pNAhWdI3tWLCmVNWoNyELsdfAtQSESFfvIPaqIN2mWYYee31Qi5ze+45mL3z0aS3CjFBeFBkrjmhdlcBw==","signatures":[{"sig":"MEYCIQDVLi4w7/spWW6dKqlQmWrSnz+gyXdod084sTM0fzvZywIhAOe46bs02ZBLQvlJH7qFzBO7KdatFbgQ9QDMWAE6T0tP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":380181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MKCRA9TVsSAnZWagAAIskP/j7Kz+3v2FFUQbXgipWZ\n+TJ9re4FY7GWERmBb0Og7PNJ1WuCVwDpXyWGN24pkocfUWfHiSEXeMn6itsn\nLru2ZEvtEmCatihv1/F1aWS5xhl6SH+arpFIjzObx6RuEWvXzW/R5TaIqaKo\nCEMIWffUUhQkEhPjC+CAk/coY76rIk5pVqD0gzYRw8ZuFHM3EViBEpzjcl/c\nc2GKiQ3dbm8zMc5nGMegGsq0Gv/A8XugL09OYLgEVoX/8ozotaLft8kYxk1E\nxuNlHw7XOHiUxf/8neZs0YXuwDqZnrh3zJPPtkFu7ET4fBkvvZKmfP3emDit\naHYuTFwG2dLvmK2kuKeYZyqfCLpe2I/swoN5+3OUjJwVCMTnY47ktE7lDHif\n0ntC5TgcR9JgLvMznTim13hV8lyeT6dlSdvnlhCnZsIqIb3Eqti0n3N/JQPo\nxXO5s+hoq0Hp20deCcHd/ftzOoTp+oAyT+RhqzT4efF2rjKvfX82q4mZfXMP\nOwEhV531Y3c0bUSBo1035v48w6xv+uNYnN1dcFxOQgky5wlICM8KXUtRu8U1\nJ7TWLvjTFcsa5AJ0+iMnHqml9KJFX/Ti/yqTcixSDnTKUreB0I8LFW70EUR4\nRH5Li7nL0Ya3K3EGDXQZ8qeojFGadeyxg4wOs0AXCOYyE1T9tWAMUWsx8nDm\neCRA\r\n=M5FP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/touch-target":"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/segmented-button_8.0.0-canary.ccc64eea3.0_1603752714465_0.14520503243788774","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/segmented-button","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8cf968494e737784108d8f55d36153389ec05b5f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.a79cdd019.0.tgz","fileCount":70,"integrity":"sha512-OlaXrPG9prkAIFFrBFlPhsFE0iB6HaPWhQ3ePDaqX8PhWBzsxWwS4t/z0qYumFELG5F6ip1PsJwfOP1r8sk9rw==","signatures":[{"sig":"MEUCIQD3dhRZvTuEEuiL1xb6gPOezWybYB/i0fixVNssi6MddAIgGp3jOJOPKwyBGxQbt43mxsdP5gTC4NR2f5/M6nZ361U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtyCRA9TVsSAnZWagAA4IsP/iKs8NSkARi/AujXBVzE\nsKLSozDfe1NrqSDfboOHIdvmM3ZHp66U6skhPYdfOChL6XeA2U78KHfyvFo2\nT87qs5RpCDcujUtjWCoEhrcmC7lWp31Jv31KGtUV3BQ6czrpUFHO0s2GYX+n\nco5eueKXrFDrcV9QD79LDjVeMCRrB6q4fZDmlUveSrkqFIjINoh5NDlQJJIZ\nPdGKd6JHNWpjyWyg33GgzlDGHUfpk2MB7oz0TQQPS5AWMpHKnn94p3HyUrS7\ny7MCSszTt0zu4p+J+5C91jqedlZ/S1UYSq/7TqwB6RFtzjjGukhwrZK5k9+P\nC+QKiEhC8aFF51NiWCnJgFbn2cNrpSEJrVhZTw/0QcZoPImqPjZxXSeM3o0n\nWdCO3f0yILBzquQALKiRDhfkfekmiTAKilRsnCVDDxYpKHoeunlgTe1uvyVZ\nHXnh5d2dvYBzhKdODLLxBpXfDvCoSWTSKUmNKjcf2cA8HyV0JNsoOSUgY4+Y\ngCocr3BNBGcHjby8VdEQBlAWs9fiJfimGNaMMpgzEOnkkovE7E0fIiFIGzpI\nAY6bQW1WZqNp1DfWPR4H0okQPfCIiVA8lw2x5TILwzsCddlgr56JjRnl+J1k\nGpZPHeGRDuvZvjlJylz4BteAaUIcK2Y/0m40kuWVKXUGXwNfHOqjcdyCR8ZW\nUYTf\r\n=bP/B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/touch-target":"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/segmented-button_8.0.0-canary.a79cdd019.0_1603816305748_0.9855244383507571","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/segmented-button","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63c7067a2eddd89e6278741dc47683caa29d6e61","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.596e98424.0.tgz","fileCount":70,"integrity":"sha512-5DaDuF8Z0aNP3MyfLgjAwTFCgOFzmC0i9MKZbOHZAqQUAD6Gl2AQ7DJ1h5/uvyjPiHidVQB3eLNt8mscqg/v9Q==","signatures":[{"sig":"MEQCICVXKP2fJSLncaTaTk2iUDPH9eX4KzXarSgUPigGEJygAiAiZZIhjbPgire2+Q6VfBgR3nbI84CmZvxIqUcZIE+jWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZuCRA9TVsSAnZWagAAGKQQAJzhCziEGiG2CCx2732k\nAAKkGuDih3jup5b6ybmphpJIo8GDUnkFcOEEnJYnal+uAujTlfE8KqBekJIT\nspeUkeMQVHLrbX0WhD1Fz39vMaIVKTXPRiBcs7/nbknSxeJ8ViWsUOJSj1WR\naXT0okREhRQ4Y9kpchdx13H7i1zKC8fJaEG0T9zS6AIjRDh7KR1nyPYKqxj3\nCs81wQEnAnZauy0zPcu76UxH4pkGtYu/vvvS7kgPMXb3cGfA/cD3WhaEXZ1V\nHUFCoUu8ZAQ5McGLGEa2/vtokcuTi5t+ng0VQOwlsHTkKG4f9QGmQevdk3bJ\n0J4twylirrlMWCiBZUXcxxhBXbTTuE/o0V637mQcYRc62k+ljSD3OugUJFjd\nPwSBnGmT3X9SI4s49TqRfuwqKs6gzy+LW80+/zFrBfniZ9EXA13UpU938Oc2\nJZSSOXh08PDnXzLQFlSG142v8PUcFdURxTLCNK6JG2axspdSgkGxl+/X1Jt7\nXyU1pYm2cU5yS0PjXpGc4w4fS3dwGXwcT8+V1o2LEKWwsuCKr8UAf4vYyEv7\nipitSIXnLOH/DXRxGkwCRfVZTnp3CdbG6rlNxmpMiQyPpYvR+TFWWbV/Swoz\nHflgsddgmfcOnL/cr27TXfbbVTk7rpx+qIpwFX/a+Jr3UPcLOrXW7SXryo1d\n9QRW\r\n=pj2v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/touch-target":"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/segmented-button_8.0.0-canary.596e98424.0_1603901038293_0.7962412939682901","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/segmented-button","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"32f18f9acc9c2a9f315b3244511911a64ff8159b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.05d5facc2.0.tgz","fileCount":70,"integrity":"sha512-ujWVLOmv/rqOM+68DcZDvIk2bJR7y/4uO1V2/EGVbWvKN5AQHwIvbFQaPkesMy4SRA1ZCHwW4yMRhU/uf8JqNg==","signatures":[{"sig":"MEUCIFZ/AG3tHgLpFICpIgVL5iRiQ4wJqfWabXX3zJjiMQ+xAiEA6HnRJH5KBJ35Ks9GXHsDgg2DhahXgvhxeqmvZPoRx1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhpCRA9TVsSAnZWagAA5ucP/2eBEG1dkPRlj7/cw/RX\n0kNiunjztJwbNvW4LcCOZmU2Jb57jGpoMB8WQFSP8MHXDIzIuHBmSBx3EHrL\nmimstuGjPduics+RbI/2fkHIR++i8LY8oecGMYIBIHUEfUw8oMhhUkDUuywW\nCOxNIbPrQtqipIf3bR3Gnd6+KgjmGZJDtBBV60EmqG4MH55MSMWob9u+mpIz\nRm0O0HevnKH847GrQjJStW+yHNG1mDhtkfaUY7o9ewXS5NhathmyQ3LWMPSi\ni8sf3F4ltsCAdmDULm458zePZhsY3TQQj+M8fuKpKb/PE6SCck2wliIgO0Nj\n60+t5hcfQsdtB75kkZpYXh+ZKU4q52wwtIDIfdCR+3w7Et4YsgRlxR9BeQSN\nvuoCNjfsCshV+ImWZNFLjpcxBMc6TKBYvXEMkAimoTlnZd9D1QDaPi9RsvUY\ndjf2/apcsibeuCHo1yUTtl1RyfiWS1RlGEe6Wj8+iWNe0Z90QPx06PkWNgxZ\nvCKfBijL+ohsIqd+8cTiEnWkNRBVYn9LAVSCFz16VXdOgV+T+puXP0j8jaI+\novKkShuV+J5jabT9WlMz2dFT+BngY2fHpiP3JkMsQ/kgkbJYVPbPsPCcOVO2\nIc+FgAa8GoUlwQZIccU4uEybaJLhEMoSprARChcHRHOMSMh31urJfdBh9DEz\niY5J\r\n=t8+c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/touch-target":"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/segmented-button_8.0.0-canary.05d5facc2.0_1603901545044_0.13721171159421908","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/segmented-button","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"febff18a94aa02f12907f6028cd5487dd20717bc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.291b3553d.0.tgz","fileCount":70,"integrity":"sha512-Zw1tqAfUo3ZSCetN7XNgZtO8eawG9A0JOVaozYjt0lSaK9cpUHczrhFPmrofxHsZtHhA519qSeSxD/Ja2oZa0w==","signatures":[{"sig":"MEYCIQC1Qz4cr2dX3A6JDkR5F1rFPR79N90Exc6hrn+y490vtgIhAMIJKVE75p1mF1UidQikLlYs+WW7dfsKngwN2RyqKl59","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":383935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4yCRA9TVsSAnZWagAAkQAP/joptDgA8nZ1fKhlsXmL\nXyvBpMD5hevKSvDyqHWq67kf0A/fVGWgWGd9R0PVcNdAlbWt+W5DP28nazEV\n+tf5gaQ7Kgd1ui8mVvBZ8qRQbCJgKxTmVDXFDWy+Cvm5CEQIxHZNbLiuRpRw\njsH2iBLWVPAPDiGr0miO8YdjbZFz98UFcakcHEgihHbIdgcIlJeroL9ulJBe\n2jdP2n07czS9xGukt0v90VSEthGRF8WhidNVfTWOsBhvDzva0hlkuBpkg/gi\n3ZqKcZDmOQFKbZa2xKyG5x2yDv1wjVIDjpXeYoHI/y5rpYJL6He0lv17LP8z\nyhnZmdOkegueZaaMBHD3ldI9dMZekG/QBA0bbX6OTAZw8f7mSFz/rPyxsYJB\nFnRQ+mbg3fzq/9Ev6MvWtTxULpJ8jpTeR8TAeuMDN+0Gqvm212z1pVg/ynC1\nQuTV1sOwH9BVCUVapyMLUljr4uNubVo12XRxnYTTTYGJF6/zRPmF91CkaB9z\nhL6laR6qhdgKkXockns9j6IRpbhzSidws78Rv7jn2zz9AKeTzmCnFxnzoIbA\nIRjxN1XlDiNSY+kKdLTcfAzgC4rTcLjhLBS/3zxJGHzW+uE+uL1YSX+vmD7K\nfVabxOzV5ZI0hOfm6zotMJGSbA0f/iuYSBBVAIsomzIPpaDCLLgqLtGR0KAY\nACDA\r\n=72En\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/touch-target":"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/segmented-button_8.0.0-canary.291b3553d.0_1603907122028_0.9412586092172568","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/segmented-button","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e948128f1617c7cf00a1b600c5875b685f7cfbe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.dbc449b09.0.tgz","fileCount":73,"integrity":"sha512-59OkGaAebKoGjFFkjgrLnUEmVaZc59qSF3c1OevhAbyqDmk6xgVmkGBVkNmSTaZ8fj2TEME866mU0VkKMfcKZg==","signatures":[{"sig":"MEYCIQC2jd8XM8U6EptUuKPyMITR59gspfTamXn5bvCZntDugwIhAOS8OEKauAcA/JeD3Vv0+omtKJMNyiOo805ZOhcFJNwK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbS1CRA9TVsSAnZWagAAeY8P+wSJbh9tJKhqe/9Q3UKQ\n0Nbk4AB4ASgzwLVNpKVzYGCdiXwaNV8A/pa3QCVNzAqbkkrLPjS8KfQGymcl\n/MTsIhcRilRawwj9QccYeNsedx5k/s7aY4oaNrWZ/fSItMRg0QW+Ol9Ngp5g\n1/ESR4NP/b7StR+7eDrCc+PSd5ONHftylA/v7ci3OgtxJL3gQoovKbbishV5\nxfOFTRwCjlo+nLy4JxOLMVQimhW9vxb8yJLXbt1Owf5vFJuYEQKSho+WoAyY\nlnwQfrDocKQCFEGBaqBOFTvfXJdIapQJ5gzgOjFS7HWjOFsRAJmx3VqNkVz4\nLtEPk7flZBoBvgfDqCXdqrtr54PWh+VSbofIMzR+qYPLVII0h90iR45oqUbV\nnyk6Q9JexffgVFngy27hQCdD2Ze4FWxHAdJ/fiHQee7JDhY92jspyFgVXpZQ\nzUGV6Mrokxi3L0wgKfj+Z3Pe0gYc6RKlq5Ltg2i2RXTlrNZgbR6CO5vThYeH\nOf35huYefexjFderz8J3Dqsp1mQsbUzyJXcPAwgBgtusfXZ0Q27sQfIpYv/Q\nFrqRdfUoZMIRwSP9YN4CTE83rTBhtjrZDAvNg4J6XJcaFcOpeyx5ESIXmUbM\nQIg0laAsGK+YbiZnU9rdCpJ/7wyOsAibMrAVxjBNrBCcGNKrnLi4BJsinJ9p\njYsZ\r\n=66EU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/touch-target":"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/segmented-button_8.0.0-canary.dbc449b09.0_1603908788583_0.6139712736414362","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/segmented-button","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"208c488085efca7535f9278f7793b60411eba2ea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.4794b25da.0.tgz","fileCount":73,"integrity":"sha512-6IA1QcdPYL+MdRPOjE++vXq3SdXBG6aRkvl2qtWezUGW1v0+vuNzzrSB+mTqTOdsWYtG7bSJkWoNZrWrwkj/vg==","signatures":[{"sig":"MEQCIFkYUQLO0CnrSPAWrdVpz2eBuxdZlShq/6K53XSKME07AiBI+J0A5dAE8d82TEW5HHQ7Tx5t0ZHeORFlqwmyug7pSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtdCRA9TVsSAnZWagAAJtcQAJxYWqKXmXMbSiAogB75\n2rWfgIJcMNZUTc0XUpbp/blUj2MPeFV7cYFrTlbUQmGudhTVLPCiT2+fs83g\n0J3mTZy4jLoxl9W/p3OdeS2ylkvI2g76J3tgpHynQI5ARZgrP2I9SoR/VcJE\nuYwIHLGkAT5xMtAsOvk8FONHOxyubHZ9k7wcfap10Hfmw2Xh++qcMxyPUwYt\n2gIqUotKZMx5ldPGENo5HOADuEQzRJ4g2Ojnpmv9FhAGL7w4pEm+yTqVqbQ+\nCHbexQCPzpJraOTlgSuR5eObSwMIoMC+41Mo0xwS5uEAtdsccZgMGFJIT5pS\nDYWX2Ei+hj/Y9143OySI+l8yQTbj7GRYJINHbsiZfd0jLmqNE7Onq2S9cbNa\nlsxH7jn1NR8dl9TwJh5lihWt+50p7hWRmgZGntgMVfThDcHPrK0JfUoFx//W\ny93/QIVJg4xcfU3jo3Oc4FHrfl6JcCU6ijJx84pDYjDUl++yHLprzuC2c/iS\nGwEsUTK265zUhlPaToEpv4xo+uZZRiuQC2bcd0q5TllPaH6EM7jgBjkWJ8jh\nLgMETESbTmJ/ZWDszzc+ulCjCC+vo8bBOwRSHw69skaQ9fpJ36nX2LajKoYO\nolEz8NUeBqVWtCb6XctOT9HXNFWN7boLSKPCiilArtcPdyiaBMO3XXTmo3Ww\n8O3g\r\n=2UPB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/touch-target":"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/segmented-button_8.0.0-canary.4794b25da.0_1603910492546_0.9835924000341931","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/segmented-button","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"02d47b53183362fda2e9fd135ee6d8b84ab1a6a6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.c61db90a5.0.tgz","fileCount":73,"integrity":"sha512-xeqjX520fNwhHk7GGjZlpEvpdC6L+/HN67xfUJW5ykRyLWZYRnQL/dyOed2TBahQPW3USMe5w7axHx/Qprl5mA==","signatures":[{"sig":"MEYCIQD14DNmJeJNs4hybZ/jLAjRU5RDgNRsqqRVV4s83VTPJwIhAOGoCLIm7LoolUxk69z1fuJFP7JUX5MOOq6dSrzi3Vh2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+7CRA9TVsSAnZWagAAReQQAIN3tcsU+cd/X+2BeihF\nNQtLiLjEAfMIIHR6b111pTSgC82vbAccI5pPDLWFb6pqBFRo/9hdOIXicvWW\n9uSbO0qXk2DCSrZ+63ZqH5TyB1wzrAE5RMu8NfaWpMdAf/Hd8q1UCqoptJdK\nwSSn3k/XXBDmrefI325nqAv029kd+/YiM5ikhELMvMuWbUuyOXltS/wQDdjh\nJVNXXdSfUHSkhLB70hZuT4+SY7xqb9r2o5EknHWLWb+0OnlsjX15MwpG1UM2\nHzx0mJYfzY0bIRNe6XY8WnjCxoo5nZbLT85cGpvH3tyXuo9NpJeBWv7b4qnx\nelhZo9J/D/ZV+Mlz2mvF+P0KD/HMy57Smj7mKYZaa2pPc3AK6H0zRLjbB9ju\ntl8ubQ79lq65xNwyREkVOvbbYftfVQeBq7rz7Vc0jYiAucYbTbNvBAcp5zap\nnty1fdy0g25VHwfH39hWziVt49pSeHl03rsshgdHYCnrPJkfCQ3HvMfhZKcZ\nR4PTix95ZaYJOrVdhgmeFg+KbDQXXbFnTIcWckVoRhO/q/I8FFtF3QCYxIhx\nUyTR7VYoBa8JfNnRGr3kTofB4N/1BK3MSrnm3QlAdI8rNil+4VlgQUDqA+UZ\nbQ5EeYDGwhGHMrZwoZxb7JvdC+6K8Je8z9zWFiLPI67F1dpNQliuAo9tTV7C\njAeq\r\n=l9O/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/touch-target":"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/segmented-button_8.0.0-canary.c61db90a5.0_1603911611075_0.8512250070993241","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/segmented-button","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63b169e6965291ff25b0ac3d852e3389d9851af5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.6d9648ab2.0.tgz","fileCount":73,"integrity":"sha512-9kI268QuoNpp7XZWuzhlSOim0ir8glcFSLXSQnTUv/QrkWA1eAO3JbUXMMqgAsCfSTR6JR0QR6dZ+P3of3012g==","signatures":[{"sig":"MEYCIQClxfCZf8oJUKE4D22oUu/eboHRWs1h5PD90XR4HZDZSAIhAKiU3CufreEiQP0i1dOhCJwvtvIqWwXF+pwLzZ29dYSj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyb4CRA9TVsSAnZWagAAn1wQAKCSU7CpxVe5QCuZFqlt\nm9YsmI9C68pBH08AxKqO8LCP1qQWIE260lr0csDiDHYbCC9Imkg6A+azAMrG\nqQe+a5sdbhwUmeUu7YHGZ2D8fT5VmEzAySAm3L+9FlN46fSsp2nQN9tYOXTg\n4w3gAlE6adax+hy+bK40wiKJIWTSwd9/a4zqkMiiftfkaruKv8i7h0ys+CUa\n2Jit73C2g5d8owUF5QGMI52YD6KjgA8f4Jj6f9vclcBMHmLxkBOkBaysN7Pu\nOHWxYp6Js6K9bgPCCbvzca+RFQx4Pf3GIDp2iXT0S5Wi/dg4IiReyfLFEBbT\ndrd3LmvHJV1lqHdtOUUNIEKh7M4yhaME8SMbqHHJBibaM7qQf+1Vzc+ssGtr\nW1DIBbshbxn6LlI5hixNxdsIfA+F47TjIfll1HZxmGGzrc+9vOyDzBvYaMI+\nOcmP8hu016joN6Zfy8arToOLJqspp3aA9cbkDC0jpSXHDFN9InkHG0cwi1zH\nB8Bu8ocubmy61TKKbMyEIFJo3ENRsMB8fOvXM0wSoUcKFXkE7hNz8jdWHmWD\nGNQcPcNEw0x004F20HS41TyIPmIsE8tWrgLT9DqtqcmUUDmlSD5x10BN1Ttg\n3/ReyAiic4Ati6EhwVrlbIgTblFSrHNdInuOrGvvJeNngoA3N4ZWH9yEp7dF\nZjZ3\r\n=S+HR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/touch-target":"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/segmented-button_8.0.0-canary.6d9648ab2.0_1604003576066_0.026654682191744827","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/segmented-button","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7b46018b317a1f47cd40e8a7e70f350316bcf0c3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.5511c5254.0.tgz","fileCount":73,"integrity":"sha512-qD4Al3mSGO8RnWBZmu5GPobvQtpIeJU4CECUgwTW+Cgo03G+aiUABwC1lvVHMhBaWB01WMJKdlFJlgh9zdMiLQ==","signatures":[{"sig":"MEUCIGwRmqoyawZ7l2ttXIYR975/ZrNgGDuAQ/mTeobND+a8AiEAvEhkoQS2WeY7JZTzhcv5Waja25m3NO83WI2uiDHww7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTICRA9TVsSAnZWagAAkCEQAJAd6LgzgIf4ADeHMTkw\nDes06faz2KswFkJzuUkuAYBG9q7qy1gQu4xhAb4ZAwNJrAP8mXkyBh8vkvqQ\nlFNQKxCHHZFrdlAMoM3USFOuhLA7GYrH6ltCDB9OQHByvkTxsbNU79P7s+D/\nDM2ekHhN3r9rXflZsO/wUsGuvLRNDplSZ8zVcfhgum1vPSr3mNj5+zA/Xj1p\nm0L4jvfbKWc5wXgAPIRG3XOMIvP/5K+DAx8S+0gzpw3CXWJ7HjDBlUh52Yp8\nEWfbYTqx+fmU7AG4jEb8xqZhICqM5zYT/WuxeYnQk/SFQz/ExWAYVtIx2jHF\nGNFl17oCF9KJTl/YpfqhEYltXYvjp+0QGT+sk7zlOEQdaPt7AeOnzP1rkcyt\niQtuYjEXb1DDEM9wANAmBBE81JZlP47eU4Dv+exFgElLBXBYIwKwWHpeu1bl\n8hAcxMWuf3Qshf0VjF3r4hscxUeivGd3i9bOpvjc8cWrLbZOEH1qEVUDvrMi\n9xwrd+i70KTLBkglhbaa2GakWO9PXkHJywlat6zdV1kwwwZyZJLVYwmbzVdZ\nVt1CxT7sXUW5DP0gxCPhqRwb/bjvj6CR9ziqMFYATIgArD3QU15qdOS7jp4n\nF0MHE0Moyl9WQN2G/Sk1QyzE4Og4mZ/Rc/vP76kZCUysHNJoM39tZskxzpTM\nqYRv\r\n=gJNN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/touch-target":"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/segmented-button_8.0.0-canary.5511c5254.0_1604080840073_0.21948458360384526","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/segmented-button","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"56e71974805c413b9a27ee89e58ab93391338dd6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0-canary.bd6e302a4.0.tgz","fileCount":73,"integrity":"sha512-eXViKg8g0qOvmKLeG5CeHCgJ15S4raR3pqwTUfbKvKBRE+YWpDtntdRLuYzTmgKnzOvdmuxzVWWuAivRk+mt4A==","signatures":[{"sig":"MEQCIDuH44Bt9sGn2Z+5S7dOA2ulqK9UnBy8uJj6LUyf6W/bAiAjzZFkJI7Bk6N/ADgth/MV4lJKjDcjAL+3esMMuydwhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxKCRA9TVsSAnZWagAANyAP/2I8tnvEZCTlWRvP6szL\nBU8JwZAv9b1gyI91tL8dmyrnE8DB+/bLYMctl20fR9sA3btUKMvQoS304CRM\n8WRFfcyGznOOZusrkCg+mpRtZY229kJsTXOYwSe8ZBA110drZhkZhYiIukQV\nX+UEcU4RYtuoCRWTokbUznERi8qESMVrElO6y96rsvIv+QOL3fRyKeVZWrly\nXnW89ztskHZ5O/U5xthwVb7wnzBcq+CvkZpaX+C8lVZBf7xZXFQTgF97+xnx\n7ykUR6nyFQMTfOBaxC3kx3XlFOGveGZKjzyKeKpj5p5Q1VAmqEsNZyAFunf1\noE4gjXqRI2qxPB3lYHYEXl2CoJ4HCvnxLLI5wOWj3i8JVwomaTr+3j3LvAvb\ngdLQucmrFRCHH/RCClOKXS4v0gQ57WVjQr5LyE52hG4R2KcDNRPZpL5OcXUN\nhTfw2WGpp2Bokb8xb77DlwZRljapxlFVUlIX/3VqwXDPJ5/3EmQYOJvM3sBZ\nOG5+/SFZkubH/reHwozx/Y3kZcc5ZHLlU/mEm0eitY0y7cr8RsLhv4aawvB+\nr/lFamFK6kbaaCXI/sSaEG5LzauINaP9pV5mVANbP575jJH1DHXrpdKpP5AR\n9kBuuK/i/wySobguKK5F8DGVlr7+a/WzG9d5LwbZsZHlRZGLQXAuA69ap38h\n1/IH\r\n=iOFo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/touch-target":"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/segmented-button_8.0.0-canary.bd6e302a4.0_1604336714085_0.5633852037182883","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/segmented-button","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"285c9ab69fe5fa407f624a76a5faeb7858922c82","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.d6b5cd418.0.tgz","fileCount":73,"integrity":"sha512-FZj7LcyOMHOoW+7yV8jRGOSDedAWyC/ZHXbScCY/s4AydPI9mlfUSYG5X31sLjh8tMgtrkZJI7o075wz97NTtA==","signatures":[{"sig":"MEUCIQDCv1vc/mD0B0Y65rSDNUZNp4oYAk+uDXqwk6dgoVjFVQIgX5U2hZER5QyD2xMJ6jUGz1iB4XqFAvIhjEwK1k2fJgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":613603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9WCRA9TVsSAnZWagAA/jYP/A9ABxnVBwe22HcAiqqe\nSjBimIhPpozq6GaI/YmlKgo2L7O3WAYWAl20bSwAvtiZgVUVwqi6X8k02f74\nfo1K2fF+ccmXBjBUkJcC9ac6R48BL77IdQlIumKconAoSrm61g1E0o3GuhB9\nkW8wiCHAB/nBI9x41RDOqGxM0WBufCiDr3s8hEhole1urSe0c0ajbtswZolz\niNC6r43j1qZuZth902ocSXRlj8wpMtxxVy07olGlyk4fJ9yfpVGVYfqkNQ+W\n6EkQONfbKLZ1Mb5sADz/qUuP6lKNqKPiv98Qp3q4oBHkuodrOd0RJstxPmTA\nhnhAOirC1742O7TNKk4YA7TGwGBzZYRQB/H/JXJlaPmmGRKdXZDIkomK6/D/\nCuk82AtijGAmBCWx53c0omQ9qyZts8gcNdE8Qy8YLf3BaZsz8KSbTO8LVqqw\n1Eci14nlAvuYaSMoSbQ8taFCqahQkmNNAlpEGVYJzicEPBwS28+ETg3yZnol\nIE+VQloQ7PC82blusifiPI87DPtDd1BLFvxLvlifcj0/U/cOgffXAZGUC8LK\nmCJT/9z925gsl/5T71rln9DXaiY2dmlV3hpBHg8PIHxIurhUEXJC5F8DxA4b\ncT0Z4kGMv1PdQrafmChQrGejq/mmlGuIml2syqdfGDt81LIPwtGQQ7czHAfB\nPC9Y\r\n=stZU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/touch-target":"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/segmented-button_9.0.0-canary.d6b5cd418.0_1604357973734_0.5942584979153105","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/segmented-button","version":"8.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af872b2e70a6db4b84fb35982e0c78a6fd50c7ed","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-8.0.0.tgz","fileCount":72,"integrity":"sha512-E25nXvNhRHYqhvwWXTxYGylNwQFA9tad0GreTf6eiyQLsQmqnM/BKhnqPRLYzX17jitgyb7GdY/kQyzUmwFzFg==","signatures":[{"sig":"MEUCICiNKlDIYcKlLgbZC+0MjOfICV3MLu/c99frylhWMPz7AiEApDqopDl8gh5BYsld/S73lazAyI8PZ3Vehrp1QQqJeYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9rCRA9TVsSAnZWagAApXgP/2RhDvkQwXwPnPwVss92\nQjNFniH7zX35cpn1lbdHOYnQDglce7PCBrwm32ODm/8XtbCTDjqmV4YZ2s0O\nimnfjStL0AeTsLAYsyJ0xlLuz0fnZeLafeuw0a9Qr3KJAswefrKQmvbBjHnl\nzFSWS+Vurym/k8JTwvP9Bp3J3hy42p2yP9LNlx7bSBS8/CQoZhrXmbkamfrM\nuw598uhJVf/XfsbsHygS9w7SM/dKW1LEHTHM9e+aYDpiPquUY2Dd4gV6YCKz\n2g0OLrhfdbqsXsiNyTE4jAJNVmfgco1Ku5bBGHJvbILvj+9thAEfj34dDfqS\nG4KQMtKmasmPDqSevibzi+FJt6JG4xYb3ZpBSU7PdZMranj/YuDCrxNdjXBk\nxqSYQYxfZ0cIAgNMRyTEQCLepdBuq/dSr4NE+C+VEQAsYA1SebdCCqSULJoP\ndXJgbBMcPd5kRnhUwa4528qyUKCHl64MKfsOw4xh/QANb/ik42Tfy9jLM/03\nI34Vej0jQAZ0J47a4C31zC6FotTCOcnuRrWIA7inh5j4wcRSDsqxnmTlyPAu\nXdZjDPToYlGoYMS3vZZfM1o41N28aF/5ZepcCfkQYujqtP2iHcqZCpF62xUM\n73srVYmbSno+bhACk/sqNEg36YYy6YeWg5pCe+KPnaYhPoXDVCqZCDdKM419\nziLZ\r\n=pciC\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/elevation":"^8.0.0","@material/typography":"^8.0.0","@material/touch-target":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_8.0.0_1604357995342_0.20136949859873843","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/segmented-button","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"34c0bd937163b59cf4d016b982a7a60f236cf5a0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.fdf9a2634.0.tgz","fileCount":73,"integrity":"sha512-zLugyIb90rHReVla5m++rmpf3K1ItK1fZu5qu6zO66PzQCyx5wrm6lxJ404JspLMmVgtfMxit/AcOhxOg1/1Lw==","signatures":[{"sig":"MEYCIQCNkhwdjOIQ86sPmixBKkx1wsCDoQNIEkHzL+x+ofSfUQIhAPHUK856vgR3zXwLeZ73THbNQvrDVsuWfEO7XLXrvuKI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYOCRA9TVsSAnZWagAACPMQAINSLgrsbDBp6y25z7Lg\nUZjuucfiRbjVjCEKBr3VXi4ra7OZWpB9OKmaNEP87neHPcVraxRD9o51P8kv\nEKUPHiEgqye7q0bMEp6ZE5dAqW/HerxEJliM2lPX8reMhj7/ovE4sPXqZYeN\nV+GcEYyvWsb6YoXwSRP/mTH7BE16KFDnQXEmSCEO3w4l3VobEQxkJlB0mT8V\nQ0OIiloHYCZIBEaaaBfWm+rWJyq2SelSdpOQzGEAL37lr9Qkb2q574kL05ab\n8S2q0qmcPAkl4pDoIqzSx6uns6cQgAS1bxFjga5x4aFIDlPzvQRV0DJmOfip\n7U6IxM9RKoVvMkjQCyKq+pBc+FYHk87N31YSShq2indS8rSTYn4wO6AUPcHk\nXQNNTSYBoLavSubx8fkQidn2i8chS+1+iULNKMO4saMFCMPMovbOWUp/mPJ1\nUih1O0qhVZxSHg1kE6v/B1AUOFZBrHeYRboEaKlL7/oUdvGPsPjSOhvik25I\ns9ZVEpbWCmwYuoQ442221UHgGAUEs1ASEqUOAImlYWTGSZHlJdjDYt1df9in\nWGjtPtaHuuWQ7jfP8bX4y7MwJldI5bU/idoIELTkxZGIk+8kMHmTtECiMgdr\nzbSGgIRgU9AsvedF4faQUqYcAc7E4R6Viy2bJE8IFNiE/fdlFyHCC0vwZnFC\nrcXj\r\n=oatP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/touch-target":"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/segmented-button_9.0.0-canary.fdf9a2634.0_1604445710121_0.053386299168769025","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/segmented-button","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5f3b511b80f8039e093f92f1f1f9a87ff95be013","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.4a86f30a0.0.tgz","fileCount":73,"integrity":"sha512-8YeKwhKsrggiT4GnHkHAR4gxqN2R9rOz0Hy7ya9C+3LP49G41ZqX+1Kyxs6trp7+8pVm9g2fduogtqRSzkmPBQ==","signatures":[{"sig":"MEQCIHBBl46DJ7b28n26P5+1Tu7NmVwLVdoXDmxHYk3li+tIAiAY7d5MLpNNsXU+hMYA/6M6HjKi3RSSSUtamWlLC04O+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeeSCRA9TVsSAnZWagAAFyYP/i6WuDPHp3k4h7E31IkK\nNqkwtSB3Tzf1H2ExXqYtPTBkA9+D90zrvomus+OiOki9bnZJGhE9KKzeC3Hv\n5PghyNNxSPLnFNuYeY7W8en9kDMyT+69FuDdEp5T5Hkk+XVGzc0ruNNCTaOa\n0gqMszF6l4IXx0Gy61Apad4USZNmRGoal3CD+ULA/aAreND5tDptFzNpuu6q\nY/7wzJYdJJPaOnJe3dAn91AlXkzPsTBTXXhz2df9W8WPfNz4zf3uIxMEebw7\nsGQ1WWz4N2j7VDNMAGxF9KC+yPPz2oxYXJUzrhauxXqiKND1AQ5mJTvqiE2P\niYZVqipJsN+N58QJtn7j4s5UsBe2fjSZMKQ0l5s3cyaLuML3mGhbPYuVTqk5\nLapwNX398bWSWV3oqKv8ea+vPlsh26KMC4JRD1Bmn34pjeZ8B9B+szhS+7i5\nVtTPhYqTFbCBlwnYj3XM7ZYe/XWldQl+BwzhjXbTrGgDrp8qr84GcK7hYf8J\n9Tt2CEj2Lc+hFO928YmKStp7DLlEUwEeYeGtTIA1XluY3eXXOyi2KTgmbCUo\nSalmCJFS5GX8n4vvOV/Jv2tcuPgP55FQYZNfoWeFi2QQcca6S9noclZl8o4X\nG9Yy4Xh0rc3Qm3hnXTfACbTqH3un3zdBAduyAKPPlasP4YmyhfcixfY1K+JJ\nx6J+\r\n=n3/L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/touch-target":"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/segmented-button_9.0.0-canary.4a86f30a0.0_1604446097874_0.7458267258963414","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/segmented-button","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1826a915add331dbb10f3172f5016196792115d7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.fc8b045f1.0.tgz","fileCount":73,"integrity":"sha512-GA9LzVptXKGSL/25P9QAzfp+ldl351xVlky17wVLDSCh60whn+h46fkuWWrfGDy/GD387CDGS6tFYnUCMZG6mA==","signatures":[{"sig":"MEUCIQCYxGksco8HHUx0uH6q2gh3IwDYzAEA91+Jvxbxqq2AWwIgcdA3YZvqnvWNxWov/S0VoM/QK3UvGoR3x8zc+d57SWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoem6CRA9TVsSAnZWagAAc08P/3oM2p16pDw/uTy/RZKd\nQ8gD6dO94rI1apGZuH5Prsq+0sOQD4YXmvfkQN6S/nr00J8H/4BjTNvE+bP6\nFtoZ9tvcS+qDgavYIH5hiEilgyd6LGJnAzDQOYfB0H6WRyhXbOec2Yz+6H/Z\nTwWzK8qBW6e3jK/yLa3Z46NA7NstRuYWf95YR75U9r83vaUftsDMLSmQnr4J\nu4WMce80JvLByWMvOyv7yju/CVZQ2OKc5V2DhTi+Ir/yTXtJBfxceNpM38B8\n1MzdTzqwQWLLs8Lgi9UuwJkkJKUBi64blAW5bYHeg2w7oYzQhIe1yP4eKkuB\nXTQIvfB9tZnHqhMkGpCceiHU/VoGnWpG/TIJ1dDTan5rvW7g5oFM69hBTHh9\n4OduOb2VPvxxiC0jekfNIREeloPXHv1Meyoa8fQfxbauTRoOOZWLMU0bpQUw\nKo8w82TY/L2RXQZpgVHLRhTdPqGZNmRKIkRpkFvGkBSjD/dA/uxz5k8fYvCJ\nOuJysUIInqwzaE/vPWdngQGFrVKR4bLshPBVGx1Rt1Cl10xb/lqALNVblwfx\npgoFO1ktHzOQPTaNk3wgYIl2VhYQXOPwtz/+0HHAEGiB2P6Ffq1hWnbjC55g\nSWMoALGAsuVCJADtgjY9EV72Oh/Gq3X4eGHuob33Lsf2YZ23vUcmQ8SHcBTU\neL7A\r\n=jBsp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/touch-target":"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/segmented-button_9.0.0-canary.fc8b045f1.0_1604446649781_0.38426896169307145","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/segmented-button","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"373b949ccb0f8e7d6c4d4eb91d2470cdc4410148","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.a0b2db26b.0.tgz","fileCount":73,"integrity":"sha512-mVyJLRuSZvkclYb9x+hn3VADIkdIpUg3DTFKsKhdgXkkDVX4GtdAWXrX4OuZ0BQ/+hzA8boU/2XZcebY3jMPPg==","signatures":[{"sig":"MEYCIQDtrNfxMBhhCP5qX9t4/6pnaD2TaiP/oMf5sTmDWYCIEwIhAP4A9MFaKhk6PlFdL2uAYNJJOWC1DxV9ySmqqnWB3bV5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofE2CRA9TVsSAnZWagAA+hEP/0Z69D6S9lepVROAhoph\n9ijoNlsmglhBFHJINu9RPFsKUNt4VI16c89zgj6dn+6RhQkAvoY3bwzbulIv\nWHiZLWhqNGJ1XDxL67b9pstMKLn7hGaEvPqUY4Nc7uvFxCVB1rG6t10yXNKz\n3eOAn2s5yUfrxGot7IbsxFa8joVW8oMk8FLIqnRL5Hl98Iw108hhnK+e4Exb\nep8paJ3ewcv8x9yLr2DoG5s+jp6uWzIlbYRsju4quOgD1TP5g3iDzwkyeel+\nqSo5PweLvZospwYJHXJ3CGofBlhLiDGpcAz2FE8qQz/A5avSXu3zbdiOcfoP\n1bGO8ULFkhA7kU7/Et5wZXmM+M2J0bBKovlJmmMxbbIDvhuxE4Ag+Ri+A8f9\n9F6grSfBHDvv00KqWI5uC7srg0kthr4bBrZr+8SejjlC/2qrcHVm7/oWfInb\nC25qwE+qhCXbBtIGcSsqsuAeN2CB5oo2QqQdQ43YcWViOGBLk14btkAkVi0T\nqYK87WignYClXqpvd+pVOFLP210/jyuDQfVppEIvZ8FILpVt4w2OM32QYezc\n1pNplIZXTNJSxLPQ29uPXZppJJwcf5ozNSEb4du/9Tj0yo8ndvqcugtfNMxP\nIP9F4laAGtBLioYuBaYxSmVPAOPlxUa9LIdNoO17cpl9wGEKy8qhOdEHGakB\nCUcy\r\n=sWFi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/touch-target":"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/segmented-button_9.0.0-canary.a0b2db26b.0_1604448566193_0.44021762744363513","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/segmented-button","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"efb693da932afa7c4f686a264bd2c4801719e97b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.419e03572.0.tgz","fileCount":73,"integrity":"sha512-g/lAICU1r5MARKNRuaNXHBs1xcfQOUKpbzSSBcI1OYrlcjsqyrFaqrLfYJ2jWqAavqrbjdWpQG4Q32lB/po49w==","signatures":[{"sig":"MEUCIF/bGIGUpkS+kS8L7FfhITIlxgQbwUHDNTnlKXu0C87qAiEA4tmWUChS/pIh5RmfjZw8LmuCrBn7FVNHorArJjHqeRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTjCRA9TVsSAnZWagAAImwP/0BTIc8yAOn554oJBywm\nacuAipxiCsXydAyBzgDfzqNw2dDiZ7LEWeF4spGOiW7huI59qbaAeroVG3zC\n+MUaoVUExUVOWk1Eg2k+EIogmNkNTubOX4/YMmfpUvOcP8EF2TYdjA1X3eat\nczkKqLXdfcSvNPQdIORac/jKw6XSVpAKv2om5xE7CtMHHUMxmSP9ZYG8o0Yj\n6C1PmskN3MQsbTjcuJd3mpPNqb/FvrxeJJ0P5cFZoSxIkdYv0TA5hwEISHP/\nuVDJRDLTh9HIepPT9BSfKuYqs+vl8n1S5vVg055U2i5PNYkngzasRaCZnqBk\nV5KZyqPkfPgfhScbQIYNlKaewm5lVNtzYG3AKf7vOPEEObctqkqPsmaOXNd2\nb6BWaXuQAAOf4nYNC2PLhGZ8bGerMgN9eJ/7kNu0xSue0D4kfMey39UxNAEx\nyflVhJrYr59Vk4fgZT+vgEJE7402LcUBm8UanCcvuwU66RbA0eSdcU61dIIP\nZVNQlLxjsp33D+4MTA0tKdx7ovFeRNSxIiIsLvTByetBQnn5vSNFXsbqUoQj\nlWeLOhxfOpPRhpqFa6qwFFPZz4jiQuiYUCunq0VKRIftTLIRiffHW/jvLoeF\ndBEKXjGItLlgwzzV+21DrYUVtMhBS1DjOrk7WvhsrlwC+5zcSq8tUawaWJ2v\ndE6J\r\n=bBlx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.22.1","dependencies":{"@material/base":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/touch-target":"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/segmented-button_9.0.0-canary.419e03572.0_1604453602512_0.5993464971009959","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/segmented-button","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5c77f14f91a279d8e9fb5744b9c89e74882b8621","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.a432ad542.0.tgz","fileCount":73,"integrity":"sha512-8HySzwa8wp1b2+xJft89TEOuSaD2NhOIXCdOCBMhe7UyfD7EwBjw6HkQYPOFYPpPrqAGKL7lKBFPL37jCDnZlA==","signatures":[{"sig":"MEYCIQCMqHqGpmB+i9IzmDI+leuhj/LpLhNAQrzhmb5ky5vWqgIhAItCek77qYElB01w8hfLPm9TqDnHrfV4FyNbBvMC0bQS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrmCRA9TVsSAnZWagAAw7UQAIzaFmEXDvmpm1iDDHNh\n58u9qf23jvUoV7zDr02/6gMXCNWzOFEN6ueljTXTXtC2WwEd950tEE4T2tym\nTKlKt6i8Fxzoy3nGQui556ait71p5I30nqjKnHvQvJ1hB1CeU/fMCIdkr1Am\n6UhuRbrBthcAIMLXVauPkAnOWEAJlDl5d0B6iAv+AUqOFzvGYfAHooFMOmn5\noSGsFOO3IyM5e+/uoe6qlb0TNiypokua6RjOyH5Z8szWGzjU1xGtnzsnEJ/0\nvwRnb16jcKHBZa4MtZFn4Ul4afy/tPTad/3PGYnB4KjP5z36jEBTqg+o/ulJ\niu3lBCG8uDZXinlvTAGyfKFCScf2By5SGIbVNB0sbO6kl4UzLzlz1eb7WX4W\nOP4ZGZ4DyHpRErajd3EsYMvEunUL6LT3M//ecK/uFkXyId2XroGQIVtECr2c\nA8x597YYDa5Ws1fRLgS0kif7bFMbTWbpLMz8W8whfJui6Iyu3eRkX1Id036g\neW4r3MPTXKZAldPtWjOYgBkgCMhB1av+wSlkpma0h9NO408/4zcwfbBLBVT9\nxLGdlkna+5TA+40/5cEQmp28nc2Oljmj4iB+7fng+rlFetp42m9OlrnpIenf\nfJdrgvv+/JWyRTPoQKDSi5AlS0Wg3ZCUGm2glB1qoLes4IqAeI3eBymRwaRq\nU9PS\r\n=nGio\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/touch-target":"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/segmented-button_9.0.0-canary.a432ad542.0_1604627173633_0.9678031075325304","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/segmented-button","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e3d3d4c58354052cd68282200563c1705e3d15b2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":73,"integrity":"sha512-G07f+fSXiv/TWOPd81x/n/NIU2qj6XqTM2vc8rDftDXgzon/m37KjHvKXBYTDXyQjfnl9AgK/8FykSigppWKOA==","signatures":[{"sig":"MEUCIQDA8iAZph+875arqYbCqFnI3ge05DrEugYGJVQn+CvZJQIgNeFBDqyPK2pOSNHDyke5YGUq0CEVYXbX1Vw6P248bag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":609951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK90CRA9TVsSAnZWagAAL0kQAJfcOJeQTaEH37mj5PlW\nhc8TRPTnzmSQ7zxg2V3vdTpnOi9f1JYVlrjrd5R5X+RfkUjtKo2BPJPlnqTK\n2rjfZgY3WII48x3gB/ueZkH3rR4wWa2rpR19/1+98bhoNo55Z84e1SQnjQ9r\nYrGrJ8tvNeXPSbZ3/b4MyM3dNnEFp6LRWG5F8dgxmde8N0PMXqKcoVw7jhyP\nvyVH/taKIh4lF6HrWro44oz2iAcOolidfOlyd5BD9MzZ4ggbSuUGVe1Inbvc\nkm5miuUzfqjnUvI5+wBZmNF++mczdWSte4xPPDxTkLkFq5fHel9FoFn02e4E\nnfzYwvfkHw3nnASrchR5JlCG1r6lfW5iSzSVEOFq1we2G2V3M4ND6xx/zDkO\ngD1j5lE8hufTWIa479hwWlQ8fQrWzl5iYLMKAVTnPh9CKZIV8cSW5Fh+YCmp\nrPIEyByKVqn/KzRStxw0Vw8psU76J1iOopXB+gV2M5u28LPIHMtU4qQRkU3C\nJqVyMr2TjIYq8Mc0rwW+WxMvXqDgLDr1wWBi6zeTJe8aG995OZpoRGJVbmqN\nAokCdqxofcXjg0TuvmSIeHnYMdTAGuEyDZdXPkH7es7cAQpBg9dsmWaN8SC+\nwgM3twp1AizcB9/oVgEl9RKUYWeGz2GgjvTQVj2XZGoyfHMYPPJewkfAEt2f\nHJ95\r\n=NRE+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/touch-target":"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/segmented-button_9.0.0-canary.e2e8aef1e.0_1604628339810_0.5134906040104315","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/segmented-button","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"abe0e01c6d963da49da5dab7e1d744d05ffadf13","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.ec6b68b34.0.tgz","fileCount":73,"integrity":"sha512-Q0pbYS45busf8ggwKLe8OY8Cm8BVIIkluhsqFRbzLQVxN4NcYuzqG7RpirBbH4yOdI97KFTMvsdGXMzCbgqDNA==","signatures":[{"sig":"MEUCIQCRrLGFu7ndNHDnEYW2mqxoLZmixT3ZM4sPg6GiVLipowIgUmYZ8/bcuN/Qa8ZHr/NedDD/RQK0FPt3a2E8vj//RaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZx0CRA9TVsSAnZWagAAgUoP/RU+EdlVbgE9NV6/EHXH\n2/HS8SdTO4Njz6RraiOPme0BhECZ/IrPX4RdCGV0rQHa9KkoFuPas8JntBfe\n3kE6JwhJVFrOnzvq3Wc7Ea4PlIpOekVJAW8HYF3Xov6FbAn2dHftYuqizgfy\nNDOfy9wVLByv/fPCKCTpOZRMvbqm9Dx4KNw4/EKQB6U7Q2Lm9FOMdZeNFLYQ\n1MXXXE6xmnxa9a1WX9NCXO2EGaZIW6GJJrKBasorKu8ykok385t39kyR2rfu\nfnbI7OtMTKVx1TO8yuKQsQ4VD9XgfHcGx8Z91B7rgmVOLgX+U5Ke0hbjq/S9\nRq6hyNgZDLBl7z70vKo8Vada2amph7R7+v5mgUDf5sUhymxJgEo8WEW3Qg1p\nUu2HA1fvAXT3/qm7Ifyqj/gXEeDtu2vPSpeV+2Wf/JQywbIrdJO2PQYrJaBJ\nzigsr6mzYmq7wlRqPgQCYXJfinSCVQ+lWWTN0+l/cT7/g37fwRFjlh4YdpL4\nMchsa7RP/A3kewqJL0XWwSVYvxCvxLsjPpYcV+PBs4rHumjFjcLypLc7xR2N\nRi1wjhKBrcsy+H0zDUX5gr8Wr3ZCgvXFcqS3YG3jQ8czA9gcBXvY96Z/qnsY\nfLHgrqpgi3yQ11m+Shaqsuafap+zzPqTeN099Kre29Uz9zDePQLPvLZ1NIoq\nxYWw\r\n=JbDQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/touch-target":"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/segmented-button_9.0.0-canary.ec6b68b34.0_1604689012474_0.3163934093101075","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/segmented-button","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b0c22f3e4a0399d783bafa3c55959574b1e1dca1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.b39094d14.0.tgz","fileCount":73,"integrity":"sha512-0s0yUdv62g30Sn0b6kgWHobeBYnEYzGkCYAVJ0TsBAO3hSg+vVwbKsMNwe9X/+aip60xZJUdPs1MPhFRyXDuGw==","signatures":[{"sig":"MEQCICnD8jGS6SXAlMvX5fg0MYoYVkZjHZHnxxsb0fcLmRjgAiARwIl3iQAMo0kA/zGGYQgPXPbw1ZVAiy3Tm7aNzyMryg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0pCRA9TVsSAnZWagAAVqgQAJ6bX+NKBB0amTpBmZJs\n74J+aofLkNU67o2yEfQ5K/cre7jXAEaMrJ2aGddVhr+Ibsq0Rhn1CU8ZJOgE\nDH/htEAwGC/VnbJcAp1L4aKoYMXcY+zUR+Th7+RLP5j4bbcXolsijLMMvWcJ\n+evw8a5HroDId9GAOuUTjLMjOW6cQvNhuOnvgEcTfSJeFF2hupgwLn+uWMFz\nSyMaleL3q9ejmtpSpnl75PrQhVrqSRjFBcvN9BZXmSNp5f7mcLpfk0u4hHq6\neOaDuvF97UYaRk6pSL/z+nas1X+HMntQYBbOT5zUFcKg1WuedrsEn3A+i/Ic\nXfznNp/BwAcbDAUWqaH3AFfRrKCaiXxVhYaDhvGJiizXekH+1Bhd/Tj4dG9O\noPkoDX/4hvvfamABd40rL0Dm5ipfRpxGyKuppOxzH0AHq1PEwKDDnKLiZgam\nwuU/lz3aiA4VcOVYFj8j/6vvPH4H6SXJGqGEdbTFQMLjYNmRRMoGIuS87tvK\nPRjfayT4ejXrEdxQtK+ZZIpZX1yWioedFXfQJ4FUFuFqnsVPZBLAw0MA/Tbb\n0BrXm67i8uo6fbyIlK+UDG2ZsDoteq+phVAVvljM1KpRyu7fEkX8Jcgf93lX\nM03Z9YSlDsyY4P/DKnWtOpGRhkNj0+V+BRvO2M7HONy7bL0zHITbOm9PnXAZ\nDmly\r\n=xHpN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/touch-target":"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/segmented-button_9.0.0-canary.b39094d14.0_1604697385443_0.6089144584561055","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/segmented-button","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9980f755616d52df40470e0a13fdd16b9855841a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.8648b8258.0.tgz","fileCount":73,"integrity":"sha512-wcrShKc+sgWGgZLzY6LqEYvLeO0TOCp/C0UcZtX3pKDma9caDU2wwI7SYPLwklt4Y1RgHJBYOj3sukzP80CACA==","signatures":[{"sig":"MEUCIQCavBf/IptoGyYLYcGgzGH7CfDEe+Mt7ZWiMux14r2ysAIgTkMeFKJ/YbHXkLpzYltdHoszl2HxLOEDzhVAfP3DAmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIoCRA9TVsSAnZWagAAzVQP/Rz9wzg5ZOedNd0x7bb7\ns7brE5JOBJlNF0bsnMYUp0xeUNApwcA6NXRaE/RTFz2gA1mHNNB72ldf8tqY\nghCGzKOkDioMCGO7pUC15nI/i93oQ61kXvtynKZCgswV87r+JxACDxwbzoBQ\n4pYy5fub+Xbr++uG/Suujky2w3F/8EqIFP9J2WF7XUsT0b3P7avDyfoDxAaW\nSt0k1oNIkqY6860lt1CyJUt6Lt0wqtoJEndfWALhCjnSBwLiKqP3QXnusk3J\n4y4gFbXYd8KgcDSqe18l6WN61Q3+r3K50LVZIRivpisLypBnIMW1YRqvtmeP\nL0aw01jnjAA/Sm9Jp07R0KOrYUWKM99vIrUCFS8A1hUu8W1FiUa80pu0NiH7\nCFQxo+ttRvUTBQfUxl15MUC1b0juKoV74ILvcpQIj7k1kDFn9gmY21OQaZzv\nvUVoNdokffDxVuwHWSjDfxeArtTayDuYbd4CAj5djL9zK/wXkgEAMC6OGvOH\nDFxoZNam1YxgfEYm88ee2PMr1be/UVWgrFecKd+YDZDAVESSlW2YZWD78xw4\nGF7nPxfsoLS1qkuIFyNFL6IU3jdk68e38gR8XwiPNSNu/pezZMEIPKoQK9WF\nsuwzqgRLKQH0j9RE1Je1dfnf/A19sHCctaDUN70Ckdxw5fl/sJVobtOospdU\nLkKK\r\n=/Ij2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/touch-target":"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/segmented-button_9.0.0-canary.8648b8258.0_1605177896401_0.6340767449696363","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/segmented-button","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad0577e49436c79a41d56da4675c9a0eda046b65","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.240c5f74f.0.tgz","fileCount":73,"integrity":"sha512-62G2ChWLEJIbKIREQdcro7yuaZMHUvgm96KXSQWvLv4Sx0vIcnhilHTe8CuS0v8EbeDHLerK5Vkc0yIkO75nAA==","signatures":[{"sig":"MEUCIBCDTh2dcvJDruFYf+zY0po55kbafK8dpTK3jdZa0aZLAiEAuYWpgGcouZrNXD5WfL+WAjGuc03kbeQV0yCDsQ9I3eU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkzCRA9TVsSAnZWagAAFGkP/0q7Z1l+ORtmVgoIBe6/\n9IhqSgMAXHDVvSdqziHGhKdSwHdMBDGzGhvuAjooHulil7AWvOAvckcTEh9w\n54wPnqUtMy0fLbiNKEL1Y6nyoSnVvEzbCweIqgSbsy7uxqoj6GFAjvSJYjsp\nQqIIbl1PMzByi90cPjW8qH5Ql9e5GMX7SJXGUQy61asa5JV3FRyLrLlzz0LP\nd8RtHDroF0HSh2kywGWbHxwoQc2iwHu1HoUX3Ywa2Zbo0Kt9fMd/+iMHMV9q\nJeIU6BXLOwN7RoF0rl7Oq1BOtJVs42mI7Xwk7JHIrx64Ts4DPt4d9JgJLMSB\ncvJ4HNw4UU6O9BYIv3cf41AETIFI9bzAb97ML+0/Prj0WOi2EN1KXVEAyK0G\n08hmOIJLw4p6ae1pwJYFqvuQWTnNWgs7IxakG23zGGO0GQ4MHrM6IxeWa/pa\nKYedpQKyLxdy/bK2ClCN2n5kGUUiQyf+N8jNzc+XNpQ2DrG2xF+V/IlxIk5C\n7KGQiB/2yV6/u7QqKVPsowAMHX9ZW5b1J3K6j3+7MapywShpCYyesSKtpgtd\nxZfmVRkL7IEdqgO0uqhabnwYZhGLsF+16I9x7ihcCG2IgexgC+qTVEB8V4Uo\n4rOPL0Azn9d0UBZYYVlDWhkQzDL0Bq7PJqUxPLWd+UALpWL2AurB+ONzEfm2\nF4GH\r\n=3aoa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/touch-target":"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/segmented-button_9.0.0-canary.240c5f74f.0_1605212466606_0.5424301925337216","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/segmented-button","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"34e1d8de96c83f00a48c050a13c7eff2955c5538","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":73,"integrity":"sha512-8t6pVxJjhMFwHW/hLlhF1W4ytLF2ERM1bCNxfu3cv8SezevheG7HMEW/ezied7bHmLmForpu8KyaC4gmxT4DLA==","signatures":[{"sig":"MEUCIQCMKcT5smSnlhv1j9VCWYmwQpcd9D5rx2qhotMvCRBl2wIgbk3vC/kL95fiQhR+cI4vN5jKVUhT975OcKBH+ZLR/8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnqCRA9TVsSAnZWagAArCMP/RxG/f8m9vsfO9opuO08\nRCsPq3K1t1iGc3K/kNbG+n7BPqR8Mo2cuVwf/jkpBA5jPuULl3+lk0dt/bfq\nli1VT9ZQr9f2lGolvN8tB+Y2R63tmjYsnVzcnjNUNJwT7p1TFMlZkhkOBTPg\nGNp8SwURGzQoHjJOMSpMc5IWAH86qZutgm2wWoRMgVy27lz+VB5AbRP/fVU0\n7Ca51mURJORKoKa2ppR4RxhE+yb0oafrkW9jrxnn3U0wy0u7Q42i1xXad01e\nQgrFVtL/QvQ9D7/FGyOyFbdLxl80GvbiY1pA046Wv4PyzWqrur4oBmMLB+Vy\nXg6VBErJ5P2HIofY176U1Ze+UieWG8HCoZ5tLEayBTQ10rQBh5Kqo4B46grP\n7p/q5+pdbY6KK2hDWbOB1QWPVh5mQWIADDfvlEVpCjdCGSRJ/AVbzoRL2ltg\nkJRfk8JPr7yDWanD1URde/02hOjgfs4RKWY+JkDEyxo8OW1URfUOhDMLLllS\nfBvSX1P4GVdq0l9z9r1KT4fsRYeH5Eyg/tcwSx/KVXzRPUOQsvgCuXrecv5r\ntUnlKXFnz6v0s8AM/yWL9hjpqMUS6nDT0gVjgMODq2JM0HFB4o1gJiWcFgVc\nbsFOAJ7cu1p1NuNTuZh7g6PKpWwDFG/xT6R0Svo3zMB1DzwaUIhBHfhKSOz8\n/2Gk\r\n=dGSi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/touch-target":"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/segmented-button_9.0.0-canary.6cf6ba4f4.0_1605552618240_0.2673753747971215","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/segmented-button","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1381d705d74f588650bafa05e8c713c1281c54ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.07f3e01b7.0.tgz","fileCount":73,"integrity":"sha512-F4b9muTBGULbch5N0vzIgIPyH1hEv72s2BBtRvoIVfHKBA5CL/v8umnryKPf+sF5uvtempIrgQrunW0TMomvgg==","signatures":[{"sig":"MEQCIEr+O3POcau3zmHyW+t7q/puU8TS+AcEpIXfxbFX4NIbAiAusT8HaCxkCQGET5JBVArHB6RH+khjrVt1DoFVCP5+4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMgCRA9TVsSAnZWagAAoOMP/1MjL6yPvY8Z28mAhghu\nlB7nNC2Niu7yzutNlxctuj0qd0FMmRIu/dfrz/dp3wGN9iilgN8z6slXa+Bv\n3C97RfqNWzbM4RXrWYcFf6fJfnW571Pv09mWjwT6knsMohvATtgKlnupm8SQ\nWGC6KqhtgjpeOn9AK+TpHuczglso8kN865/DppcITy4xOWPKj+VebSafhP76\nYEJjVj4xSDoMlxTl+Vv38ql4hpcDOev4iYosTD4mTZsMJqOQEBKGGhSeVa2I\nxLTR7kebNH+bKoVKya6dnRYPaPMmTaB5Qadqw7JsX6Oq9uY6oQkxR/CkytBp\npsVJNqrfo0lcZ+Yfz8ndFnuouI3iy+nAOeU8R3SQTdjASEYkJ80S+BbUbStl\n7mVUnGHULw5GLY9vO0lvCvWKq2VfpVo9dyR2MmsI4FIwbwyGScye0FbWnOe0\nkDx+PB/Kp0RTYMo8BhPX/ZJuAXFjBcJMp1+/f1e727CRGrxsVfHiX6yXWsjo\nrVZhJ680+2wFSWEnVTHTdzeABbRqVDVI3dwJtrsCL94b82lgKwACNvdv6iHV\n1B39xznzS8x7DwD2TBquRxwmlaJBI0k/G4lKxjCNXeabdu9Fb64rPlG94ndh\n2VxBp6PuU1zxQkIYhK2wY5arswB/3mzKcsXjG1D9pYHzfme6Rh+GMcPBS9vq\nhuK6\r\n=HDeD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/touch-target":"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/segmented-button_9.0.0-canary.07f3e01b7.0_1605563167508_0.9490386733699732","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/segmented-button","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3ce4dac3341f3dcc8b4a2c3cf2fbda73bde86c44","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.23491cf85.0.tgz","fileCount":73,"integrity":"sha512-g36+KK+bXdhYt/oz4TmbDI3S11hRtpBlCnHTrXmLHSi2epRyqQL49HmkGJ3Bed9CSaTRU8T6+nvy/qbZvA4oKg==","signatures":[{"sig":"MEUCIE4FY31J9zyPJA/1FYv7shzmoxqtU/RpbwksS/e/AI7BAiEA4B6sqBQKsY6ewlvdMVfL9HOkqP5ndXbjGi80hDo0HgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxagCRA9TVsSAnZWagAA3XQP/ip4uzRsznZcdvYx7s66\nnWqopPK7t112q3xqxsWdrXCMPyXtGv8tAct2qzHvBPT90fwmBOvroxFYi942\nc/kwfxUnJgGVMn51bFH/o2KikKjzQsfqRJjhoIpRNg9tBw3lUP3yM2BZx2RG\nyU7rR7ShQoIfTk6ioP69VCxHVo3ayC1VpALQ/IoIEnRa4dQQSLyHyRLJcuus\n3RoJhpex8Up+sYWtl9GG70wYGAdUpBkBIpOQVdJ+78aUMDwWb6DsbYeTfXf+\nnL/9CghdrxZLT09xSI7QoRi/67c7wmmIAkIyRNnYlVXIHtNuwr4EjOj+O9jM\ngTS95KWCzKiy8oLz14E9CMCMFm1qzjxe6OwO0rGvuCwhbWM9KdTSnl6lRt8O\nRxaUKnDn0JxhTb12RnJ2XQyHWvUDIAeXxWxS/Is1LQjBM0vkdcZKU+CsG55m\nM0VibhqbbD8U8vB942hpJHCkTT/9rpuTrX/fCXzfw6gh2wiEyotmlJyBiyPc\n7vecuoyAKrQesyP3dLzsI3bJ4nfpHd9q9XuIxkFi/H/BG7YEtd5RoKU7swrd\nztG8uT8Gj9OAAaMvby93wV1MnwZH91zix9XpQzuSD+xaUoetkHAH7EGdwL82\n3SHTfBqUrI+9/P3bOvvSJOHaCVIClRv4ss2+SNoRp4fGEhJd50LaD9d0jriP\ndS45\r\n=Fc15\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/touch-target":"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/segmented-button_9.0.0-canary.23491cf85.0_1605572255591_0.8460295895442944","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/segmented-button","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f84cbc5ec1a82cde69512a2a642255b0f5a92850","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.b659d4fc3.0.tgz","fileCount":73,"integrity":"sha512-W/QnGoz2u4yNAvoVB3Lpt1uZA6s+7NlZVqZgVdtVcZQ/UXcBG+oYyMZeSiEXzEExJTWVEYk7WxR5xlQjoqOlfg==","signatures":[{"sig":"MEUCIQCkwbP77d6dyKYhd9ZZJ9Se70KWy8qDD4hqg0cjGWP0nQIgNWAAln078uZ3LISa9cgwHnRNE8+M0M5sB7XRZ2csWI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxh4CRA9TVsSAnZWagAAS5gP/Rfu6crHb749PCVgpfPz\nLhFwn0LS3YECM/zp1B9tmVQVOVbQGLxCQ6dfrZ1fsbrcomxqFYY+9hWiyIh8\nUX6CFYBx1i7a+KKDaFEcOoKeOXGqoonHnU8bbUWIv0M8gflil1E8a5Q1QrU1\ntNFMevnCsDm2DV1MI4l5wGzArt6yiR7zif6ubvYRmgmlibjtK3zlIlUjIvbN\nTHhsOJpgF8oF64wEqvaVdzDQ8XOiSqIyPrWLDK8OHsiJyAc3T3sRLZCbse88\noC5nYtwjQ7cFun8PoJd5IEzYS4cKqAO8rYQFtFjUEGlnckOUpCiGYdFYIfRP\nDunf8A+8mj5RILkaufA/3hcXL0w3Ps8ZP1Kt/OBGbV/8mh0WWusDcqDyLaJ/\nZh2UartPN5qYGT0bzu1ODljhzHp/yzN4eKd3ORjC/iXXiqTbygYm3tjatFfk\noGQtdV43J/bMQaW/KZsiOR571ahgeD0sMZm7akYaY3b2+HlmPOKDrknbcPZY\nhbnGJAPxJXrlUK97f/p13wnh+dqmol2U1g9sUb+ZpS0k8K8hFb0DsS1cQtVp\nZzJGPYDcjb54RJdhrhWgCxxdKUkBJT6CGbTWdT9RjBxSaaLWVlHfK0UJSX3e\n92YieV6vqhKS2mMVzk+BwB2G4Mux3okvZ7nH6Xrj1hXsY88oP+CaVbLRH2gJ\n0kAn\r\n=PQEc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/touch-target":"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/segmented-button_9.0.0-canary.b659d4fc3.0_1605572728602_0.8664269212223799","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/segmented-button","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"10b425ec9a897af1aa610f75afcf9613ace0a3ab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.d8a3aed67.0.tgz","fileCount":73,"integrity":"sha512-0XaSCBLs1pV4TfdYuQRS2PKLkHvHVHrkvhFJke80qMh2DhdvgqWweHO6K0vUZGQAVy5L0fxzgpWTvXnyQ4azXg==","signatures":[{"sig":"MEQCIAQknyjcN+opURUOcoK61FBE5cc+vhkUkqaqYNscxo5iAiAk0sxn9T+3H293GBcobDuz8CW/tDDf1CjrWg13TirNvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wVCRA9TVsSAnZWagAAyesQAJE9RwbYmdgVhxtX/66K\nXXDHdlor+eaHhg7gqsT444shbTmd2/J+XvrW1rsnpudByRhlUwSdUO3vDZVe\nsEQ11z1Na53SxqPVYhLPmKZxQ9Hi95HQd2OrEkF63kHH8+6c8qvSQtsf2SuA\nutolZ6G8XBrX7v7Za78UnfEZ5WnKLuq7K+ePF2J6V5JLXKxe18qe1/8jNCFt\nj87zNYwy/FB6iFRIyVJvh4Fjouo4M51gAxdS7RCFnltF+0NyaCPnDrkbQziQ\nJwW4cRgZEVrjw8B9sFtTthLm87Sf/JNt9tzeO3rfi5HvaIQrp2MMbO7r3iBn\nMcLi1knswd0K2iI2dp7mya9LU7AZ9MMV5oBNE+NE9Dr/q3CzLpAeUGV2vnvw\nhGAFmKa74zBt6F3c462L0REdOrqmymGdePr7eFRP1H58gbu9xDHvXwOD7tYw\n8HfIvc0OB7bMOXSuIddSmAMfc862XbtoK+dDmYzui8RFB4OxjXwyyJSatZgA\naYFWBTGhaOOzeLfKYqanbhprAkBAAwdRHYCJLdgUeeKNgB7b8evpUPbpQyjX\nzm9Sz+np4pWFqXi3AKOggXKWAR/+9igbd9HyTRmK//rZi1cW+NqDI1+AjC4f\nNMimcojRknOOD/5AFmLyFIAvfhc+K+X9/z5ee/WHaEo5flIaSP4rygGwrgxP\nfCI9\r\n=SqUe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/touch-target":"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/segmented-button_9.0.0-canary.d8a3aed67.0_1605626901494_0.6627143080313862","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/segmented-button","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5d42bcf3030e3b0f24dba27fd54e8e8b00fdd787","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.482ff9091.0.tgz","fileCount":73,"integrity":"sha512-SQRNzMgAOMBS5DD0Rq7NCiwrBJbSYscks5GlpFWZvmmgMwikwAGkvTlfjVle+MRu40tPohuzVPeBMv2pQxdFiw==","signatures":[{"sig":"MEUCIEtMJWdILXRBJF/iXkns0nf9WkcqrnsnvNl/pLe3bbZCAiEAmM3+U8YnSF02xIdUn7QGueocH6YDuJqDWHRAPbraBdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA9BCRA9TVsSAnZWagAAQmkQAJyreFvFtBwgKk42fpbE\nNUb6b+yWAoEx9jl1TUMQzGLhWQiTxhemvvgug2fCvyEKekcj3rzIuvknmSzY\nNxO4ehELvM4iX98SFUWtuX4qC6sPziWgpR/cyzn0GNNR18QPWsvFGlP/Vwr4\nQNNTwSBLA4P6Mr3YlUkiO509wC+b1a/bs5urZBWdqHnhEgSAJtAhAu/FBOmM\nTKQW4y3NXbzhcoZNMRFh3ixZzM/gnLZxz+m/JH3zPLvk8dDO0hzIlFmW8rGx\n76Dal/S2/GyYPfBhfiUpdVs/X3Fv9RuztKCA9HmpBQB6207AEmk3sqAM6/Wd\n7nSnRx+feACuIoow2dBgy5fVPwVaad0J4tCQ99WxwvuMwBbzRefWt9E4ZQjV\nBrG3ti0W0q/cXXmet5Pij9SwS9+vdmouGXNYl2/wZzPvIsNnVyZIhIa1JVtW\nKB/+vtM+k9LIzpnGnIXSbD24Pn3QmQphdqzYjzmvYf52I+tmSw879VgjJlwD\nwnhnfA8JT61wlizAm66hjDtnbfgzGX7d2jwUKnNn1iiBwoLSxsn9W9Auvo4H\n1p9YQuhpEYaGXan5D6kZnMASoz3So8KgIJWOfQo494nidMp1AJ4DWt5THH+5\nK61Umn0hf7HlmIK+I1GXcr8aKiJY8HdN1WRM+58hyuMIAzuzCTzhjZBiPTks\nlI+o\r\n=YDLQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/touch-target":"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/segmented-button_9.0.0-canary.482ff9091.0_1605635904716_0.6316263028382072","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/segmented-button","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3edfad7347b66b418c79a041cfddc64f1f4a8176","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":73,"integrity":"sha512-ZyA8ySagPd2PL1MHYXyhd4Ww4cdggll2LGQBZS/3MuSy26qEVSctRB/BRJbeo+kbjd2twbzYv7jw1ugMSVNbVw==","signatures":[{"sig":"MEQCIHZem8foqEufrO2nBCr/m7zktXw3R27ntYOXcFL59rjaAiANS7slsCDuBcgKe9A6wHyNSZcjBP4jxvPVmgCyVRRzww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWt9CRA9TVsSAnZWagAA2IMP/3ZTfEgVr5BQBVg/9cfF\n8r5MHo9OXn61LJRcdfT5RlvbVeqygGTOlYHxQRJRMB+0HslEGhprVwForbvg\nHe2eNdWG9bYG1N22DdRoMbx9RYtgGZopjLlkwzLy+SdO8qS9IT2GcDBIgJ+O\nbIBtGOGdhZLzem6YesRWapk8pLli0s9D/K6srlQ4O2W/82RcacedLWNwTCbX\n31zSpLrmUUcNFiNdlp6TywV+mFFwzy4Bpyi3ckpbPAs6HZ6WkqFOVzOKcm3P\nWLKwa6rG2f3kY/clhDWTVnFqUUinH1KgaAkVrYy7c7A2JzhpmPx3eIfC+4wc\nAsDU7cBI34HrF/4a4d8IMRNmDrtA9BDdlaDqHFtO0DwzqCMuh4usBz8o4EVn\n9J6QmjiLKfM+eAggQgv5AUsY3dflx+93QrYHOKXQbN7lufW0VkPklB71RDmn\n9CEyupTIzib/6mFIC1drYrvZOMVVBePNtvGF0ZgPlYUcSytxinY/MtcnaBGE\n3GZWJzKo+IOMnJZ0promO94v7wbxiyz25HCCp97fFINaRDmGcxxA3onfxGDY\nblFU/mNbtDDh9d01xk+bIxEzHwOwx0OINXUjNpi39z9ziRCMj5YXdMC3biCq\ntDdy04JrI/a8eeeV/Q8cNOVou0EnhX0YZOxqsu6P5L80xAw16uhChvvLk02m\n+I/L\r\n=QiZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/touch-target":"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/segmented-button_9.0.0-canary.99cfb6bd5.0_1605725053078_0.9075993225091195","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/segmented-button","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1e308a40eef26dbed415068bf529de4739e32d5f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.b98d15d90.0.tgz","fileCount":73,"integrity":"sha512-1NvskNU99BdR9cssayADchtpbeOGmmQnjE11Uo05Gx93vVl9/MRJSGIFg/RNHLyW3fyokBK/gxpgP06NkQOfpA==","signatures":[{"sig":"MEQCIFhl5q1CMyeGnKYRNY73gxO1/MAeFOaXhsznrJAFn9aEAiAWz+S8evOE1LfVrEztpmjtI9RaYqFSqNU2fc+1H0JCWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGeCRA9TVsSAnZWagAAwP4QAJZAsnvXDmWf5zhPEyxB\nkJpJluJiZ9L8+qPrlTJHAn4tDOM20xAKdpgL4GAPuGG4lj/CsuUmA77T68uL\n9yikxNshJ9bJXNHvgwNRk6uDRhXIW5DNKl6CSgKTPwJG5UQN+nZoKlsX5vJQ\nvBfs12G78Ulwpdl5Fkff882vOvf5KSHRZ2roK0VpIoDfKIqiyTS+us3F4PIl\nPMSbaOcC5M4yIr6X+kYF26JvvhAfT6stlwnAcjzwjH4sE1Lh9AnNYSqY0Yg7\nixnOYSeeDe/0Ppo6iZLrLnyVixaQ6k0f0gA6AURunwI2WVmAI9i1LRsEF94k\nFg1rfKjKFshYSLX2dOzWyfDm4LoWDw1RCth2lpOeeHmMfcH/gA3ay4+7HirJ\nuxnVMwoZPGLa2uwKHTxk7Cfpg4YCXKBRFfWR3i60XrW9uTy6ksAtO9LyQhg7\nNz2sWOoG0VlKIX7TlneGTwM5ZL7/TT9cWHq0xspX+0+jraqHDC7X1j2eeXIO\n2XEvUKqSu6YyyTVgIvV100idqxlr31jU2qf8W/VvYP23L8io9ORcdXZoqLy0\ntExhaYvjhvKp2rMohMhC5NvW5kGJAkHXA3NEElxsflu9ug5nr9aeCFf6gNWe\nVuebgVvXc38tOMLNWz7XpSJuQ+KeO204BmKq2US+qyh/dblZTAjgR2MO/LAj\nuG/2\r\n=/3UL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/touch-target":"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/segmented-button_9.0.0-canary.b98d15d90.0_1605738909993_0.06411385002781267","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/segmented-button","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"51018ebf46c817fb3b6fc5c9caf0fac5d924c10a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.30c11bfc2.0.tgz","fileCount":73,"integrity":"sha512-AlgqGr/l7kpGTZADhukvRK4lBTr6K6o5q0+jAXa4gZ75D4wdMdMUA+MOdlO+71JRcppKOP4dRora3av8qiCQIw==","signatures":[{"sig":"MEYCIQDlxD0oss5K/51a2G737+KjB+ucrG+b5J6rJY+Cd6Cg8gIhAIhRK1rNZzClXDsPrm/xNYGCUhm7HkxDM7Vb+S1CpPh0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcm6CRA9TVsSAnZWagAAjREP/1jILtvsHp8dknllbgFN\njaemPfRT0RHdF2F0SjSM37EZrEoZ3AT5VgqHwRfWRxtZbmgB4Q+oFNnmbfn0\njdywPqAh9Ca77ZdvIKsUY6gtl6aUy1/3G31aExf9S7bMv8qa/QwVacRlQ+J/\nUsXo1fCeYyDQW61UUw/s/3UrgBRJJ9vgNUyWnjUbep9bMcFA8pTztccOF8ph\nvm8awlAyveLr8/YjrqDFapo7qY6i5AzYONEYKf8kr98H55MkuacWSeC34TwH\nVBg4Fm0cqEyUnPhxWveGl5Mig9bRiQe43fXXweiD/S8WQpODEDTJWPQVApQn\ninbULWyqCRS/hDOZi+s+7QPtzq/HcsH2j+jXH/gCnkVmLNGYfAWBZwblkDDP\nZlP+Wes9EmujEvtE3k/AruBP34ATuatSYMdAeYOZTIdw8Djz/d3mXawn9+lP\nXPoeQe+bayNLP51G8VD1LNe4pj6+Zh6HY52d4QzZdGbISnSa7QU/l4sqhBOo\n8eULMHJasMeGpAOAShSCfQOwALHmGvD1SwL1PfmzMKWLXWdOpp2+R/ab+SZ6\nOqzH0s3N1X9dyFPiMglFWm8R69muvp/rrSEk9GvVSJF1EhfwXo7QjkP8Bn7J\ndQIkPr2mVKc4/5FGP4oQl+4hNEFsoenZNc0IArk9WLCU2V9zTy5mVh0PhHZY\nxF2D\r\n=llPX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/touch-target":"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/segmented-button_9.0.0-canary.30c11bfc2.0_1605749177984_0.531329911628803","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/segmented-button","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6946cb812dd778d1cacd2b40e8a4b98480a969db","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.1b731d51b.0.tgz","fileCount":73,"integrity":"sha512-oXUpMr9HL7f6vcsNBb1CbunvwXEK71zWPSFP7Lur1XbiCU5KtZjiKKjae3hdpW7MYP7h8v7n27Go2ylMaYunAw==","signatures":[{"sig":"MEUCIETfnEW8JD9U44Wl22rH/sMpgCO7tnwkL/MRReNxPcatAiEArjyBQ5/XTxS+mT5mNcyaMwNZTYKf0lPNkV9o5PoX2Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr77CRA9TVsSAnZWagAAaDEP/j44Cnk+p/nKpevlLNS1\nG01WJxVRgkdt2NwuNzeIgi9s1tADWinaSu9NyRRySLUZUVM3CB1UygpLa4d2\ngxGtSSTaNCBAkxKAMYH7ggAp6oJ/Z5aA1YP+vN9P2AxJxdwo2JVhXuD3KR8X\nDu1azJAPoZWoleCer7+XIz6aoTh0Uf2PaFlSR6bEfCYL6FJ32nccUO7RlQup\nTkD9icI7gGq0pGN9KP4TJMIDVosW46YSmE6nZ10vg2mQTJndoK6AkW2+NoT0\nONXiYy0mMVYYOJ+WbrnTEUwhlQGNc2kRTyO1hXCieKWyTM/JIxgL7Dr0woCn\n65xT5i47CR3o/lPrMqv4wMLMK2U/VFnPyiq1a6hOVrll3vvf7zNAcmXd+tKW\njbap6uDEc2Lw9DQ3KvbZ68iRiq8rmq3Q0xiUxZvHTss9zjLAjbHZH/4hyTZi\nGBay7s+ou1wrLKrttV1jZSKb/P59snemUIVeddYwV4updDBPu5e1EXZB2fJk\nmWkFuHTNPCPB/7R/nO4tltz5SJgQUhEMxZ9Pq5htf+L9mbzclAzd6BLDZYml\nm+IHlza6Php1NtFkt/j263l0dpdI8B9tDiS26JhqbrmqNsdmRTDPAba1NCFB\n7hque/Nl0iP5DpWUKmSxy3tXIytOnAq4iL0AU2y325Mqj22a7Is7JDkCgNan\nH2RS\r\n=H4rJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/touch-target":"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/segmented-button_9.0.0-canary.1b731d51b.0_1605811963398_0.5969564171923951","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/segmented-button","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dfa3d6cb8e823272ea1c00f8d7ceab5b75c8f883","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.4ae94ff78.0.tgz","fileCount":73,"integrity":"sha512-gcv9IwbOhHjq7RZClpDMDyg8tfQbiRl3R0oMFOLXx+4+vjew5pXI+mawlnsxqyhUKn1y+BAXOqnOcveGsvHqUw==","signatures":[{"sig":"MEMCIGWfE0UN526uzVvjXuzauET6uYGNhrs79gDofhzemiTSAh8/q3sbAq0VUOvFc8u+7FihIyXKItyOKeuVzP7cPMRW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+qCRA9TVsSAnZWagAAOxwP/jXprwzCcOZXCftGIUGE\ne+13ZbfgtPtCGwIHsrhA1wjz2EmtOXtNgTlsi/vkxAU1nAzH4/WI1Ga2c+dN\nZ5dYpDwPblfreH+MZIAB0VPU17efFN7gy8X7fCDJtdN+9x67sdaxFKmFAp8i\n8Dl32TpBQM9NaDJGdbpUoMmdKNrJtYFb3QINWKP2DHDvRfZkBLMCc6Y1/46K\nw06yv4llX49rHNsbGTBVWnufXa7ofgHhEdP5KfpyuXkBDRBH+Ntu9NNV196g\nY1gvMIezBhi3nxz2ZfUAX1mXNrlAfiHxcqcdIpTC5DNTkI/D3jJ52mTYcvnJ\n2ljBJfeBf5Y40zivrnRO0L3xnrFpU8J5mQmfIsCkXsNKb6sNF0fnqhxgFovP\nC7V9qr0CQZhpO/anKLXBEKmrXUT3VbsZYsaqZXAv4NLM5wp0h8AIHBUaKHX3\nnQHMHKxshSGI6nyI4Jldwf6dOWe1xRvIpnUUaEuFkxgsA+8B/DDDIneFkaEk\nn19nbvgN96FuOnVjp7PsQVVPTI/vi9jz1trjoShdesSODz2IxruGSZLIsWyQ\n1P/nYDi3WUrhIY8MHZTqUtzG1RpFULcd31tfw+1c8mxRV+h37WVkkFT+kHKD\nwJDWvnE6hzzqMafk46b6iJ6sx7iW93TwBfPNe/l0Kxt8kh04JAFuvaDgKb6f\nZOea\r\n=GW4b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/touch-target":"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/segmented-button_9.0.0-canary.4ae94ff78.0_1605812137591_0.5346131133189844","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/segmented-button","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a030797d409c8482ba93273e19c533053eabfbb5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.7ad038e1d.0.tgz","fileCount":73,"integrity":"sha512-Dk7XurqnkzAoc4JqV2Sg4p/jeTxhtnZIzfqJBHwDZ10VLSliO4JGVPBZ4E3+gOQr7F6O5FLDt9xPX19USvD0PQ==","signatures":[{"sig":"MEUCIQDdVN4k8SIev0+YDrbigo6M7z93JoLsLKEFrngs9ov6agIgZOsbb/JFpPXsOXo0LowQv8rayNvb1NTR3ghEMJg3d5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUTCRA9TVsSAnZWagAALMgP/ja0rdxN31Poem+rg14A\nF9ZTAezIR3ID8wOyy9977txpVPHWBCThQEngnVRgSYmVsYJ7RXwETBK9hRu3\nw/WzzH/XTCaUalxpHapiEUSKXF8b/U7EwqtuQOAIj+3WnTF4EqY9mEx02rEe\nTWXbvwJJzge8Wa/mEWtMSkycbznFqcKfEYmXd4h/ENZ8GQw4kdGPwIIi46H3\n961w+ayqxdUjyHaDLlwWIrf21dsGRCVoyEgL4bp1+RKajZ9JpPx1f8m6Bez+\ngBRDoPI2qeYATiug+sLzDW6kilMaHjMDsgBWoyLD3cxDUyVTQo5wROgAXh0Z\n14vTXhfiFkFVNNELlTvP7PutJC8AIRTOhl9qhSMuC+wR7+MOoHXU2/2JvfEF\nflfUemOTQk6MjZTBZvvM3p8VFR6QVH4eEBWX703F9/m5F0yV/Temjd6jhvxl\nKNba982A/IiiZrtIE+5fsjok8ZkkYG/CHMu1jKmyCrUsrRBK80reIBJIzAEO\nKxXItAUjpv3KPW3CjnnLAu1YIJVdRh7Xw8RGsEQ3wkgIuIi8Lkl9eGA8ytME\n1xDU2TDN9UrBAW6gxXK2Uu0FW9rrz0L/vC6wlcnfZAG2Pimt2ZvETziSRll+\n5F9cWPPOvwf7DtAqpKxF8Z8KJG0D7gRX2bWSvRu1Ps3yn8bE3vueDrqGyJWH\nm14h\r\n=+c4t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/touch-target":"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/segmented-button_9.0.0-canary.7ad038e1d.0_1605813523132_0.09894776377003223","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/segmented-button","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"64b7d0ca42d9688dea55b3ac3a06a8c2b87fb96a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.a41527604.0.tgz","fileCount":73,"integrity":"sha512-KeVlhsKWYq4WqfbR9xEimxg83BKg2Kp125C6GVFSa1agbeoxBpBLIleupjqzxsw9GNETtiG4umGLjTfS9CC+bA==","signatures":[{"sig":"MEUCIDGugB5yAUcNeVcZv4zMkMupvbXeoLB8QDt6S2Fk5YyfAiEAoQaWq228U40WIGdSqt31XjfsGbHVpRlZtv5IRyv6exA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7hCRA9TVsSAnZWagAA1zQP/3C3VWKXEPl8qj6RCbI6\nPVd2ODbTz5VBEi4jv+Kuruth568VQ5ArgFqTHe7yvfzqsYuJIdugau2NfyMu\ntJ3cjj4vGQZUHouSOqSYcg2tr2aWHjC0AytGXk73aVzF9sUL6iuWTTRq4jVR\nZx68zA2F4TZqNyzz7rruHM2x3kq+lkgn1jQMyBntKV0M39FUAJqC07ZFy+09\n6YO+63mpRC+hyPdHOPch28tIR1i6O8PXCuduwB00Kaq0dOkvnb+onot8mnX5\nfoJrC8gWxIExstuEKhL8SrZ129Z6c5DaXJskQJpBcCpeksMB23t2V6M8AVGO\n5rGRSNpUxfO05y/EyrwjyM1a/4NHyzGUpxVjqbySWPsA26pgx2AgTu0/Gk9S\nwUWhXU2GNJROsA2Ax9NjDzw8m03fNwGh2LTzMQ3NV3ZXA8Hl1ZnTWNuamn2C\nY95gOl5dLTJFN9JM7DIcUovq8L+NShwhpRWmlT/T9DnpgQuXfLLgccamb8xG\nFa2MvwuZ+uWAZ1PkHbX0fiE6BZI961KedOgxOp1U09hqQNNPAbRRjFLCB9bR\nTttVCcbRr0EYijy8njBH/4WqgHwaVYVr6ylG5+hGj5ruSH/MJSyX0L75gpB5\nW/QTTrp5bwIR0YEtQ0/4rX9eYv9xU58qBZRKf9kUcCK9+LzyHpUowfcpiQdA\nmCKU\r\n=LSK9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/touch-target":"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/segmented-button_9.0.0-canary.a41527604.0_1605816033083_0.9892313153621095","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/segmented-button","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"16bd5d891aba61705e51d92e9829b4f8ac1a9eea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.7b0e2b377.0.tgz","fileCount":73,"integrity":"sha512-tF3e2d7wRc+iwozF6Y140ftwgjjZKXEyu/mIBChSvdcmvodB/kPps6O4HeJLRirn+uOyUB1Dgl48BnEy9g21/A==","signatures":[{"sig":"MEYCIQDg9mPxgI5E9MipTfDfVEv0rtfvS9GTIkweeVDcxiwKeQIhAMOVffjo/2fZ6IMGcx9ANlsI+GHl2pXrADbeI8yt6crN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmDCRA9TVsSAnZWagAA3SoQAItghfseSU8BJ9imLDOP\n7VXq/1tOklHimOQYVjTCWXv1DX8WjwzxXz+0Vr/o1ORFyjR4riTAI7s33sYs\nWHOhIT6tpEPvVQpMs/rVCB5OkG3GAUhftQTMmnpgaKm5864wdDCVrxzgrOXF\nBoLwF7rpaG7jgbW+y/e47sjUu9r8qMmdPiNJKrY3KtjG83wKA8AVDDV0SrEL\nnes7DfxNgQC/9zP1gNT1FQVjuHydmps/d28UUhf4ERDURYNwKDX+2XRayDIf\n0bO9+ixBAlG/j2NuuCxpRRQxqWAGBkWL/Ag+SsTVX3ypmTubt3OgypiBp6fz\nun58nuTCqomgq9TYpGGPDJliTfr7z8usuI0qvdyXjUeAlTqmgUUdP0D7Uuug\n4C/1yRfbgPNqK0MZ3uE/OIFxbJkrk0ck+6ogCGfJvM+nKIQG9qbWtdggxDX8\nboMJCft4pXkV48G7YLDDv/x2JpyfNz99InMK/ZmFuqUNGM4KCXc29f5i9hn0\n3IRTBFRsUa/mLdKyztP6Y4qpMnmJyk9gZw7MnXKc8ksfhzGp0U6A674nN0+Y\nN6MyUy+Y386ji7SLUO82vZqUz9Qz/hnOwxfxNyDI6RV8Ph/l/x7zUKGOtJtu\n3mqt5SDRujDofFXbyXnqalPOSxs2zEC8n/FlmDd8hzcuKQgnb2DWO/tipsRb\nmTQY\r\n=pkHc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/touch-target":"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/segmented-button_9.0.0-canary.7b0e2b377.0_1605912963110_0.47497092708926325","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/segmented-button","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7c30922f8091d6953542b0f8161a950035a8a644","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.c927a5d05.0.tgz","fileCount":73,"integrity":"sha512-v59wpZsSR0bv1ko22746MepWeMBEJSwNATndsngGFZjw0wtoNU6Htwbg1oXjSNMQkN+RTC9ckBFs0+VAzsH8XA==","signatures":[{"sig":"MEYCIQCbpq+b5osE/GasfXxAIJiQLWiEMjzkmASikNRFHOJi7wIhAPARuTaglXu5lGRNAqWUeAfGYTAFGr7adwOQUyuhQmAU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":615228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHjCRA9TVsSAnZWagAA4Q4P/0xKPrAHkiZiguqLOMyR\nbMv6Wd1teK6otCwbUXF7SfC+rRbIlXKNmJZb7KLpjL4jmCIaEDyorWvXvFZ3\nTHxKmGC2Eg2vDKCKbFFKPUHc61qQLXS2GNC/GHcu7Nnr+HpSLjikrM8IQOPV\nB9FBVlS0k76k/qlcNYXok789DZbodX2w/FrihumF6LjMEzKBY7etA1fPHz7Q\n7RdbC0/elfAEZk2jwhqGBY3xLgmkXZfwhqNjN9qGSNULubHu0dhWExyVXlRu\nO0T/fsz0VVw4V+I5ikJCEgecI81EzCjDY3U8EOGyv8Z7v60gTAJAa8xWQBre\nM8mEk1nFHJzytbOuzkQl4VSRUlLhZGMn5V7Pj2ycYz0IGWFMpVKmPLcHc2ND\nsC7oFe1kczeke0azHMl5gj7OUuw+i9RGSnbb4XQS/3NtwdAtOFpMvEXJVjKz\nn2OcpvMtchgC2FvSntH7Na1vlF1yiUctlGTDMkpnCHW4aalrpDsP7riYqFxr\npstIfBOoPYxzpsweWKt2P1QIp5YDNGepuvYlN4vL6XkGjRkFYpYC+eQh+OPO\ntz5iOsDau2jNPsSNdJrjrTsT66cwjQUeWnzyObQn5UQ9C3EoQN9cXaZaYRKX\n6fGx1dqvzqG1FFQzbOeyOayxN+zKqgnGQm0rm5chTnvECdLVEy1JwXY6fsb2\nXcyE\r\n=8Ckz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/touch-target":"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/segmented-button_9.0.0-canary.c927a5d05.0_1606160866844_0.35676682449795094","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/segmented-button","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2e39bb0773a63bd14570355c87703bc9528eaeb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.b349b5185.0.tgz","fileCount":55,"integrity":"sha512-FqECous0i7pfYJB3j/Ob9W61Q44hsQn23KbjwcWplLa2wSoKJqfhLchzOjZeaNmxeDasqcl2tAeR5KkiioXhCg==","signatures":[{"sig":"MEUCIQDGWXTubMkkP9PpBhd73i6oOnLQ5RZB50CvQqJxpeQnZQIgRqM7/XmmANdVgIeo2TWmlCF7EjFsumYfzK4m2OYinqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT44CRA9TVsSAnZWagAAHokQAJYZixzVpedZLu/foYuk\nmmffJkJk09+VUTolFNFAwyVxhLWcPv+hJZcRPxAvFUvX5NYDFk2bQN4W3v9w\nKOw8OwSP7viEv9T4rJoNsFge3DihLga5VIxvouthvSFew8Zf0Rj2GZkBHzrL\nQuT9q581/JtuDPHd9xgGMeZVXaCD72X/Ij8jQ352Cg3JYMSOkI7jb597KUud\nkP04nE+U6t28H+PMh8F6pjtZ/P4a3VXLv1hRZgfngZJjklTg9yjNaqMaAh4o\nLE1xr3b6DGw6FnExBE88tTf/RycA3Np2vk2HKsOSkmVbsl5vk2Nc2gZGxjz7\nt0i7uhkfeixW4NE/eddc2ioQuvC2uagAEKyrQcU4o0Q26Xu7YXIXGXOWyJsi\nWziW0XR2FUMQXOR+OVP0h/Ni1eyKs+la3Ha7bmTmpNmGmSc/2T0Qp999q9oF\ndv1r5s2M7ussYstElcw1PTiz8TpJ09aiSkuM//QpJsa323rM7phDHd8GsCHL\nTRLzeiNCWmUc2QSkYX7BxMgh9HbzNFxCSrkci6Aiz0D81e9BBnzGtk5GYx55\nWGYuo3nAdTfIQlAx3kP4FPKQDnhvNcUGJGOfy7AkBcYMkCm1OAkhVotBNZgJ\nYUnLpLijXBfIKp01Er909nt/iKRqIVJxME0PXVU/tXTadygGW6SUW7z7A8Yb\nkJI9\r\n=9L9R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/touch-target":"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/segmented-button_9.0.0-canary.b349b5185.0_1606237752510_0.2406553187645315","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/segmented-button","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"242d83a45e7be3f75c7756783704c50890225d4b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.9083b7d61.0.tgz","fileCount":55,"integrity":"sha512-05U4W6Zr6IfePwQkWMVXpOUPTqIzfQtozzq7xtFN/NA85+6SOcmF0kFzLxcsRjqzLKX5y1ZomDBUeojwCCeyqQ==","signatures":[{"sig":"MEYCIQCcOZ+kpGkD1edzau5DHOBChbHY19eCJzNTelztD+RYWAIhAJgzJ3RB3I8IZo1p3n8D+aLJ6JsYaI5u8r7NXSANjBd1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgrCRA9TVsSAnZWagAA8zkQAKHOVfg7793R7Wu0rCeI\nrtPnhDbHwU075h6KyCcRwKfQakcwKrhaPIs57AO3HU8jGkxQUcdcPbRzeMIK\nRK6kr1Oew3tsMTs+ZcVNdHiF/bI4vc44ajfgPv6CyO+/aYPSMAEHFKpPPxQ6\nDVJ8bxxJGaRvzbOCuE8CHfVrawlaYQ1uifLrLMOMlvQ5RUA7Qvd5Q5Xan0eW\nGrujiK2czXkvO9nUHV0tYyomAJcl3madYyFAFJ+HYD57kCWUS6Ms4mp/xRQK\n5H7gWGTgE/XDpep1HyzMcqM5MFrUHvepEXyHR+9CLj/jgLe7ttCfTF5nAA8h\n9E06zu9ztREeKfJojmD0HgpDeT7QFRVpGMxarJugvWAYiMexy5JemoZsKfE4\nhLmDoGoFj1QH0An0dtP4254CTIag/vAeKTFfsdmSQdu8hQA2R7iEbRz5NnZ+\nNZzgiU+0Tz4GsNSoTuCJ+TwTmj91KVFsYBR4VMpA1VstKK0St5AbORcjRv0U\nD8rEk7uES3cBVausH7ohQ97kNm4x5UIUVqlkapDKXxlNS/hfjN4+moycL3mq\n8IAzAgnQLN2RhGDcnpAU0d5dKq3/IzjPj/0J6h1Gr1qenb17R1aTcm90bzt+\n+AwN9jm5mlxMbFoLl+CDm0t2Tp5dh3jEZ1mza9Nw3j7/zNGRG+6K5x+6P+kw\n/aTk\r\n=rxe0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/touch-target":"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/segmented-button_9.0.0-canary.9083b7d61.0_1606252586602_0.691950965467399","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/segmented-button","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cf08ed4ac7cee505ba90dee0d5eda64e4dab0c61","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.eff7b46ac.0.tgz","fileCount":55,"integrity":"sha512-RKeum+6pHyArmDhz5pMdC51KJQAgNupbfMl9IECfH2sP1ppKaqSXyzsnQFvlwjATAO2WouwuFaVWt0Khnkx+FQ==","signatures":[{"sig":"MEQCIDKsCDF43MyaqhIYwohIfHKw5sbnX9Y7LyW49wFQaOJ8AiB6X5qVccdxbtCuiWJIrF7fF7ZWXEDKuJMuiociPTrnHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfGCRA9TVsSAnZWagAAn7MQAKBcL/8KaI8C27hR0HUI\nz4AG6pVp3h1rg3ngyKsaRwOBMkUWKxwX7NqB3jBJUYnOQNzNppSPnkR/EUTE\nENVgtfwX2lECzN/L9zbnN6Xc+vxiXding8m3Y1kvpnT0DNsxX2C5fNcuvOzU\nCJA3tlPFoNzr5fuqfkuhAqVtl9yY7bhIvMCiBke8h7BkmG1ZDPCdwMLC0ng6\niEhO9i8g9DD7U64aD/fUfSFfUSVLMXgCLna2RdgY5Mul25vjrhMFslE2TKNb\n+cf2cq2kK/WuUmpVBzAB0H6N6Q5Gz8jpC7SxQMW9a2ElPuutXnTuhTLkBLB1\nqIyhs5tmn6C9SheszT4BZhgUVyD3hnTwcwOwz56mcncP6bb28ZJ5GjbWPKo6\nwnRL9GMSYfrEMCEpoC31GVJliDLwOEDMLXiqd3+WWerVMWCwZiwsQU326XUz\n6xaxndgZIN3sM1eCjSc8dsYBDLRwd0J0govp6F7gsbaM7oT1oHYUBHtCQPFf\nxkWsAjF52hEDccsFaPH0Q+F3VRSmGTjLKWzNNlPuSRV4I297ztNkOpcgnrTa\n9ZuW2g1JEoVsVQRdcMkmC+inZmhGkrDqhaITrcofxZ7HfHisC1GaafJLwZ7B\nie28b0xSq9piKWiWecYUjCN+kbrnmUhLTKtUmxsI5B45SGZf41YmWyaJp4kx\nzf3U\r\n=pLQn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/touch-target":"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/segmented-button_9.0.0-canary.eff7b46ac.0_1606260677731_0.6668251356650954","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/segmented-button","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0893cf8f782b9908b5c854b671abeb81ef566c39","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.ae27b44b0.0.tgz","fileCount":55,"integrity":"sha512-Sro2Sc/5RNYezYftDiV/ct0aenLa4MlyRS/QHlS6/mnYW4TVtzpFegvrlxQSaxU/C2PxkfjNt05isM2+keodyg==","signatures":[{"sig":"MEYCIQC+o2G3Y4a8JFLQ4iVXVOixhZSiDFONgrMRCuzKh53LVAIhAIT85ADNkqlgMXeKmPlziGSw91qGuep7j8Uvh7C7+rVl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnlVCRA9TVsSAnZWagAAaoIP/2xTb50Q/jKdQ9+D1f+7\nbRE/hXVunM7pEUmssNefKK3NggI7wsFRXIw4broWh4atZEluKErcBP/6tf+8\nd7tl9ooKQcEShTONHiMk+PXOQk3p5eu8QhlBi1rRy79LUQddwpBzQFHR8fTV\n99Oep1llnTkVwAsyMrom/CagsLVlS3DCCQPJJdddhRn/RvLjJbQfmZFcIzCM\nWIoJT6xuVMhVrc6B5vblzwUFJrENghlguUySs71Pl2me+88kiCLz7i933cnc\nwvKCDl4MdyXhYbqY5XDeuowggWgGG6Lpwp6M6XTwp8fY3Nv++4BjHJ0KB5wI\nM+dxu/uZgRl1Ra3g2dBSHBAZt9MPc8vAqvUcdlNsvUsGDg+bC2rr59YTpflF\nRJoO32BHzaX3+Ibz6Aq5jjuLp6PNONJ6sXe7AEDmN1J0z+pdBkI6BraG1tYt\niojQ9zhOXBnXYjIozaMp5h+Y1oCK8sAOBa7x28o5/S7JQ5zNoTpT+WEENvWr\nwkdFTUyLCoM0llKbjH6SEoXVNVvd03zayzctJBI74bRFJp1L70Hyys4t4KPZ\nPzRdVjVgY34cTph0DzaGwOwPvHlmwu1bb9NnHF5FNlfr72rWrg8ZMS56Xx2E\n7qzBZYnrVvfUIRJt9RFmhxk7YOfOPbRRZKgl77gMWm5awDwnetuE6utqoHnD\n1ykf\r\n=EnZ/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/touch-target":"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/segmented-button_9.0.0-canary.ae27b44b0.0_1606318420886_0.19643494099413172","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/segmented-button","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63356660e813332b0913d1337556a01ed8aa1fe2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.2fbba2554.0.tgz","fileCount":55,"integrity":"sha512-bzk5GasmOefj5/LW+fCxvXaaqtDTTHmK4TkFpCiNlS0e9JRSiCxoZ82eaW2LrLtOxMwm3IGqWVaf1yYrozqS6w==","signatures":[{"sig":"MEQCIGvfzWrv/ogEDapmzpmRhWELNfDM3B1FsOBjjkRqJ0KcAiBFHbBQOILM5GtHOTqOSN0OHJUmSPDxsXlRobETitvjbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6aCRA9TVsSAnZWagAAPNYP/1I9Fz3pfhFxgHPops8q\n5SnJpVZYGXto5CYd36DHou8pRFc5tzfgJ71Mst14eFbRJgKwx9113NesTxyB\nGeFXtJ3y92tScyxb/YDuaKImyHB1NFeQWFFjsR4+WpZ10kPzdRJ4FigC/QlX\nYZvM5TiyBUkfvrLH0b9UeqIroTDvLNJdNb9WYK2kyWlNrJ1/dK1gf5KXvO9i\nTzZy8ZTUXThu1UieAdhWN10Nyo5p/tO0TyCD3McSxQdxEsVZxyz0R36mLTBu\nVRRYRvohel75p1ASu1NW/D2sZPVT1JnJxqcSU8sDSW7X2BSDtYyOqd3G8Bk9\n46lYXzdlS0ANItQ0UhibFcmCR6Wpb/l12weWMyQD/uSLsa0l5y2UmcaThzH8\nkpeQdvtaCrHaLs1l4X0EjtmB3i2r308yrASDmHIgSD+hc8pTznj2HAk7yhj8\n3lX3i4sm0TcAyJqHx/Cad8+xgqvYyoYpGW8DVvQekgP7kIecTMhuZ72fjTIk\nw2iao62UuE4CCf4aeq+Ne68RWMh8YiFGNGhHDWkO/eJHqYUuPI5RXWhJN0P4\nlYECnKWCMIfcIt05M4uwJ7oBTYemUvaTREAeeVpLT4h+KcLCNH+z1B5xmZ8t\n7gbu117UVoeqsXCobXNa5ZxzCMQ30u4GD5SqkGkBMdsAtOpoLWCoPw6SxeQZ\nKvRi\r\n=gNOi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/touch-target":"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/segmented-button_9.0.0-canary.2fbba2554.0_1606758041760_0.3388153816473696","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/segmented-button","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4998389becdb7f9c5d581e7db8630a4256ea5d7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.6d8574fe1.0.tgz","fileCount":55,"integrity":"sha512-CLrC9BHnyQ9DFHTb/CPvms8vhU16xCW1zOFELRcfkYiLWgVzEGSIEScBscJpgVP0k+4pzXObZXRfNucUd6jYew==","signatures":[{"sig":"MEQCIFIOQ21WlFFOoVXhwI65nnMiS4AU+homB9j3f6BBmtYwAiA+qa0oyL8aoBYYyLNS5l0DxL63l9IRg1RER/z19Zq/aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEsCRA9TVsSAnZWagAAO+QQAJgzjmbB96u0SomprUeN\nvkbpmcm5pLHRReU7Zt+flSwkV8l5hqJChvQwtQnL7XerWrWK7TK3T3On6Nde\nQ3HVPc6ODNOQUvF5+vIPdO/0xHUUVbbMFFe05SN2SMcwy8TJhJJ+Qo8sS+Dc\nK6I3OoGuWn4Vzmo8k7mIaAEzdZ6fx7FT7JlKoB/UTRbQ/WVhWB7T8bbUB4Zo\n7PDrYXBFV44pXAA10bA+yMM/AVb07ORGZuv88QMHXp2W3m9Hkch63sgIE3cp\n2lYVx6FiKOy7lg8jZel8NccpF5YTTwaL9/J/1DDqJniW7MZcj4met9nUQ1vH\nFSVhPJuVrcXR7rq94U6yGFk8c0Kdj6hjLvRLHQv//1DNyEXlONakFQ2tj51b\nbQi1fuswRaicJzxczg+DWAY0bPypBE+DyvGvTq3YNoZFNSh3xfiwLGEOZDRA\nwdcqoCwROI73Ea0d6TY63B5ZmNaf/qmhSlD921+l2nKNmdbQr7BsgRaML1Yp\nBUmAQi7bLmJP7lz9puOQsfmO2KiGIfaa5qEEQxReA2Y7hmfJvhUJoJdSb7F8\n0bNmj8bjpO3KOip8htc6XdRceZOOfw+He6UHjy9jd6CKWL8E1FO8kwRiBQUk\niffnkOE4CA1hz7yw5HdjYJMsbIU5425ybxV3pVX/Nz43D0H9JicxuboARHaw\nKFcz\r\n=1udH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/touch-target":"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/segmented-button_9.0.0-canary.6d8574fe1.0_1606758699557_0.791319206732273","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/segmented-button","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec1b5c9aaa8a3f1a33f42349a164da60982c442f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.fd22355f7.0.tgz","fileCount":55,"integrity":"sha512-AuMI7UL8fF8lrGl8lKLPjmzz9Ccl+nocA3IyISpf09ZlZ5MNlhm8u4cwD59mADjAhAJziYcWp/VSKkIrTnbyDw==","signatures":[{"sig":"MEUCIQCH1P9+jx6L2wQTmUYOK3AL1TxGUL4kLJiuHjexrzlSjgIgZUey+lKLuxUlA5wJcB23yVlBbXbgzvYI6PGJnRMPKRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlpCRA9TVsSAnZWagAA1t0P/3BedfXtJfHnIDxjiFoe\nQrx+caACJNwJrcbaSLT5f9cehEDO16enCq3gPi7WJzX8mo9mHIcxzbix6S8P\nab1lejfdDPxwJpT2m3EL6pmcyhtcVVHlc9LoKyfkWvbBsiLz1y/LWQJWXU1z\neVrInDMiNriEQpHJjrpHuQw1TpuVmFvSb05M+fCws7ULkODGV2so5vzhjvSX\n4ouzetNDUakg3u6DvVtwwdqcZxb3COHHIopCXfOxyxLf4LCWAYe6bEa/YzJI\no1pEO97K2NAIbcx8tEv7cNyX1awDcKR0iWzqcb9XVUoLU020czlWtkG8m0qX\n19yhbc2qKnUaFavXfscVa3rzD1CqCXNfqMN/whgq06zDJCzt105WTA0Uf1RK\nkS5qyDrX3UzDqKAja+qKWoRrN6jWGYapXKts54PFIynkqooBM8TFfyGn/OCC\nhjlT9pbI7V4WKGOO/WMJ8fPtvRnLCGMzn1dITcK2DVygl2uQJgpeIdErwo5L\npUmaogwI0w9jJ34WYt9CTOLhnGQbbAJsJHqTnp3in2/8FkrUBdEGunOZp2oE\ndaFljhaZBr2ESdEUREiBqO52/Nppb+8seSuos9xeJ6AxwISkhsqd5qycPxP/\nCX244mVMJ1mtl3laOnFC/yY6GQsjCa8YwZGHC2Y4UvqnfjRl2KeQJuxrcBpw\nJrco\r\n=Ilyn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/touch-target":"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/segmented-button_9.0.0-canary.fd22355f7.0_1606777193039_0.800086034441228","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/segmented-button","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"309effa4ac220daf60ac375c6c53b6d7b1de3baa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.c4ab98722.0.tgz","fileCount":55,"integrity":"sha512-2BE/EueL5jaQdbvQ7Szc73kBpy/olFWdy+D0/MZaUZ55c2611UGSEdQH44LQgD2PbRaCeOFvqvbo1CAbaXQmEg==","signatures":[{"sig":"MEUCIQCxdiVngoGG2hLoYtzUWtQYTpSSrs5m4Aq21vRcB6/TnAIgTv5owQ4hMoSxtTAooY2Ho7OSEfmhEcic83yom3hYZFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZaCRA9TVsSAnZWagAAX5kP/1q55g/Zfs5F160yABUM\nX6FbgvmsY7VXtrBCUXACYPaN8jGmRLq+JIvp58jzqYKcuvDjzzNFElgEk6gO\nb7nefLWtWpSmdpJLlchmD0odtO3QO4Pbh10U0ScUe9swHXYKgJoRbJ/B/pfB\nCpm8yyczQbuvjj/PNYl/RdofnHjxgv69x50+ib5qwqmYO3re1QnIA0KTmeIb\nznoDLPCeTCCWw1/E/ivvrEEzxNb0zYvmLcRNNsWvfgkd9V8HWps1EPjhP0T2\nzm4lH2w/TYB7ph3kVj1wdYxO1hPJs+6W5uZY4UI+jOkX2TS66yi1CdvVClK6\nylZlsMEMu2KJZUDcx8WURqrMA3Cnf5G+Z5IdzWM+hNXYSxoy42+M/KKE/mGt\noFOCCY7s8/4uUOEQSTRNWWbeXkxATNIvWTBPmrj3BNp15wn++4cuMbJQd8tW\n6TMzJPdFe/j7VD/z4S0KfMAeo44tPYWZwwpjmXwpQteRpztfEoV8IUta9m2C\nWsgVxinsAcUjkzr06KAJr4c414Vis8sD4gtOmQACBHVJYfh16xvrlB9CTkvT\nqTBBXDmDYfBg5+EFuIoHnP4hKP/N3CW2Nb/T3VZLsRavUPFohvLkgRUX06TO\n1zVpsNUaj1HOMa2vSh2xuRKSmrxAM/KudvwWgualwTku4i9JUyFjv/FAA7D0\nW91U\r\n=fZ/Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/touch-target":"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/segmented-button_9.0.0-canary.c4ab98722.0_1606870617694_0.7834883500675469","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/segmented-button","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e45a8f363ca5ffddf9555595f40193922b716a0d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.977585650.0.tgz","fileCount":55,"integrity":"sha512-lczEuDWtr3kF4rGJaipQFmFWxRGCXcodFTtGz4s0TPGRCvkXSe6b+jsxIee7UV11atEjuJfK9S5RKDOM1R3ApA==","signatures":[{"sig":"MEYCIQCZRXH/jSWsGI6P7IRePPSrBSPAphwi8AF2tiMPv4nwywIhAObbd8GAcZ4cTIi8tfmrTg9ENJTeYcuJNDcpD2n0T1A1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6fUCRA9TVsSAnZWagAAJcIQAKRL4Iqg0rABGLt10ohj\nbM386x+iKKTGxWXbY0BYL5S3PXIOBKGojHQfCXqRBv/4OtostJwE0H/fqvGL\nMHFCAeJ/k1ZjSjHBg2ZttCbLS0N+Fgu2OgdEDlqe49Y727dUw5s1+ogBK12u\nE6+MaY4+RBOCcW+TIGkCA8vQ9QVLBys4L1VidjondKsAPhWFpvrmn230xCyn\nmrEn47SrGnqUqtzcCzmFVwYo1iMANE50+KNda7x0t+v9Wou0ZZa7b7VZCFXo\nMgqshFg1/OCtHBykWQKCYk9RCZHjJCrMNUYxSH0qBiC9yKfTkp7VMCpveg9h\n4IPhrAaRCKfQsSzmaSfwvWj4YYwK+5ha72A6ofYEnS9j7vfq/xGzMPKzvn3G\nvwJh3ArygvypZ5DlgQKNEqBmwV8tAaF7vzaiuMJyRhXmstfWdVykibn9bt0p\nk/XS4hUm+tn4d9//gD9/gHkZWkLaAVmeD9ZdA8pzDM8Ytkq4PMsU8F5MUF9t\nz5tpXT3+U93BZkp6wt2tgueWf748JqVD1x00fVlWO0luqrpf3plJ28wep+EC\nf/vWLIshxzhFzembrdUZorhHW54ZOzW12tsS1PxvaQ0sYhEyRBt4EpHbsWX+\nNAcaRosCBVcAmXYm6l29Mq7i3FowJUzaQiVY+yupsCpZeg/Ga0behtcxrp8e\no78H\r\n=6yKt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/touch-target":"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/segmented-button_9.0.0-canary.977585650.0_1606920147632_0.02693769131410373","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/segmented-button","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6b295c6dad69993250d77c6f976d7804bcc9e921","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":55,"integrity":"sha512-89Dmh/MoOe8qwv6kF1BE8oIVeJB+YH1x8SJ5YxPHT4mgTLrzSoA9ZeZs5d/0ctbBu8aJ2Qb1pg7RDk4oQ6Zk7w==","signatures":[{"sig":"MEYCIQCC8+605Hi+hX8SC7jUQKqZKKdEGRC6jd/tBA4Mb3TEUgIhAK1ksUDX308MfaUGJFRPtVBY4SbDjahmLghtCZq1Pk25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mYCRA9TVsSAnZWagAAr5YP/RYBQlUIGvg4jF3AgSei\njw5UU6F0jzoudHOSiQVdmYVNPmmYz/+DmqSwY57dckIjQNX8LXshbFE1Xq+5\nM/YA7Yv0WAca+2DPLopdoBNcWSyEJKOenMT8NWPE5aIfZx7a3FfW6aEyZEoc\nwsm4u03HB7ampyZbNK9luf0mOGypvXH8iwwjnj6hO5BCv+uPGNjMXwwMkVeQ\nGcjjyGCuzfwfaOax2GqGlx08UFaj95b8QEYFUsoaKoN7f4Li6Mdwwb6ZM5FJ\nEE0uEJuAZ0FtGl1I0gej/rUgsjpA+wjJWfyoSRmGGRyxsL0sSzDaoW8kWO9l\n1HMV8HryDhPxCvTsRSN4Zg/aeRWvLBwEZzhEc2m55hu1/Eyn1JBWeXEJ71AD\nKEvV58xN4U21fbB+ye3w1ddQ1UrUH5WwFhr1yUIHDfxh88o8vwIqowum4wlt\nb8qRnDfFhUy4L5RlmunrMV0eTIzCkA+4E1ip21D6m+LK2zZxNvZgofzQsd19\nw0c8qas3fwJX9avElE0sxQwGEUsUFI9LcRElEaffxOPh4KXiFYkId2Bx9Kvs\nM+xMiWOS1KEjLVb8rkpBGmSx6iGiBVmz5BYeHr69F8KwpffGiXgQanBDlB+r\n8meyfa+Fg17pQ7N4ggtnztNyGWGTxV9+yRA03NYhC+xUu5kEmuuAy90v/QGq\n/oaz\r\n=9nzH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/touch-target":"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/segmented-button_9.0.0-canary.c7edfc7b6.0_1606920600294_0.12561357601430445","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/segmented-button","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ced98cf2f576425462fae9dfd20b689488ed5ca4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.4f3347306.0.tgz","fileCount":55,"integrity":"sha512-DlKW1o4JTQnFhxL+kocxD/ZbjZIV4zc1LRQWXF8kFKzRGhTTMknAuZxSoyowsWe0qvGrU7kOLgurnU1QNxNsfg==","signatures":[{"sig":"MEUCIEyoHpEoYFyJ2xxNrN8qUZn+bkI4PfO4udg+9pHqF6RtAiEAo+L3bbwG1mVztdDbiR+U6RJOpa9zIn7zyvEhbEy7slk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63KCRA9TVsSAnZWagAAt7UP/2KbYw3HkuiW+CZJiJ6E\nOY5Ogw/nnTiTH2vAnjJTSZur8VhegQTpxD55VdAZu8v60liLjAPfg+vweZg0\nh8eg21+CSDt+cpY/oq+w6Jn3zv1C0yAar5LmpB/FlKyO6pa3L1I6itHVWbpS\njvK67Yfcr4rgUNZeUntcqVQQv2TjEt42L8q9CRrnSInRtbgfKmikLzJvA7kz\nWEiuArSQfxIgcnnB6UbWbxxI5V7MfVITPja+/jy656fUF5YLDvxV7Ym0Siz9\nuJMZgxvFUMf5p77tEoCh8SotZZ5MZOWdf7/f/En5wK6OczYX73idh3tA4PbT\nN/OeCdk1v8BAB4RPBpUNNvj/SXSNocLCqI3eRWlMOfMmI8yiUYkPiQiJ0TYB\n4ZT34Ali1NeeJCQoA5X6ts8lDjMFHzvB/vDPIA5tgiY7v0oUOg481hRvRO+F\nRfK3OtH+SqWTRYKDzAcrxMAe/e6AciFCYuGq66+oR8dw1BVMzsy3u9o4bk0D\nqHSTqdL6KnC4UPAHj9G3f5cCrcb3LeXak24BsClTed9HMfGJFr8sKDJH2SrF\ng0Zft+h02/+AUW8OhfZma40Lerl6AGejejjlpImE7624O8kqMHbq1C46hWnn\njjyUvACfJaI6DpQJjvLF1XTrFXrIbswXvKokbAMJh1FaHe4qZZFk9FQBUQ1M\nynQB\r\n=+GDP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/touch-target":"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/segmented-button_9.0.0-canary.4f3347306.0_1606921674265_0.19296555789475955","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/segmented-button","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a5f8902da14870d6eb205d84035494b71fe28adf","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.37fbae10d.0.tgz","fileCount":55,"integrity":"sha512-2mx5qaxn2vpi6YY8UlCPjD8QsQeJYuyEv2/0MhscB5GGQSUtzJwq8yYDdDNfd40V+liuL8NgCoxDZrxU1kaANA==","signatures":[{"sig":"MEQCIExUPEgskAGAlHkSAzdNwq/kI4/BSX60vJUH6p1A0bX5AiApZxsFuriawLsM4SRMpcctX18To+P/+B6y/7Odbjq+SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9oPCRA9TVsSAnZWagAAiYsP/3YyjGhDRaI1mW9Jor7s\n3JEArMpHqyklX/24ZXd4anCJEII+M0Vcf0HDAnmb1EtQw0vvdDXwnHf0Lof6\nIvaKSk7KrDlimguSPH5vUsPlXilSP8UlfsFNIa/VEoYf2427Xng51vn5KPGO\n7dWxkwXNKqSXgEX5NOfFAGYeTwtY69LBnabgBBfioTsVmvpYtygdfJpSCpe/\nZJJ74kdKH0OEiFon7cwzDSQ6sQ0AN39SNLpNA1w3WTJpO8+SX/6LRMtHEv2g\nZNVYnPG+muMtbFhnazoQe+BdjqOy6O/0tEvOlYV+Hf8wBgv7iK6DGT3iZEmA\nm3KxYKOuO4pnq/3hpI4aSO6H0DCD9ALp6IiwBpKiTX/4f/3CuR+sn1UlcEY/\n2jC7zleAyI2KAneiOj6r+zeZJwpQnYS7B97G9zSUgH6eH2rgHUr4GajtrcL9\n4/yRnX7fWXn5GOvnQNgCIyBn5XhxvtTHyLTrrrvM2ssyVSDItjN6u20ojEbI\ni6KMpAVjPtdK2ysB/YpdsOfcXAJ6QDakQyGjcwn1qRl0ArKg9wgRwa6oJ2yO\nBKDOR8rTLXKzzkQ92Pusz3qvWO1PgJdndyVGmrnU4niMCB92Pj+UeEstCZWC\nJ6xCHHj9EhugP0KbpfUpLr+Bn70kfFUaw9mNvdgRY61t918snM3ygo2uZZSy\nKbCi\r\n=/XGR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/touch-target":"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/segmented-button_9.0.0-canary.37fbae10d.0_1606933007407_0.024141026943979904","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/segmented-button","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"35012b72e8f8c28f867e8895de4556c1d10c911d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.11da3c0db.0.tgz","fileCount":55,"integrity":"sha512-PKdAMHvBdppLhVZuUeSoWCUThD0SNpyY1kU+so6WrZLgwvU+EEcmVtrJTXCs7W+hyhtUkFheaK6AeQEBBjDCLA==","signatures":[{"sig":"MEYCIQDTXtY2iLdZAh6IL2I3JsfY7r2jGEfqWoG4ULizxLY42AIhANSLenx8KDO90ygBcHSowYioyfEoR92F3R33/YcSZn1J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/eZCRA9TVsSAnZWagAAJc4P/1oCbjFVXnlPmUCRF73n\nJ4+Di6X2feiE86jhNnmYCwfs1xP5TI0WYBsypihcgWE0bQuqGTsiinftxlvo\nz/ZPhmXFYj3NLfw8oDy7TiEnb95RtvQXy5HLoyfwHhAXS8g3hOyp7gqhVpT0\ndxprU0HfD+ZHtj208G6w9BA1/DkcdKH5mM91jZJPqY3VBKCOEQRG16/Kz/JI\nF8S+k+AFWtd0frqqMT5vxsesFtoPtZGyAfjxYJtui4hPxgJGa9ggriyrR2pI\nSmgtyPV+9A1GK8hyfWS/0qpuGBMIMqzx0fS6tGZsI1v1FUS7ktFOYpsCfArn\nkZaGDEVP43EHIkfA160UP90wghLbDPBnGHfAXOmisWdQEKfvbXkNyEeOW0fj\n2z0d16dRFKPANHbrlw5tOoqta35RYuoj/xiS6UA0dyX6AHg/ZKj5Z/x6Qllu\nnpaKJ+4AfbkPV8We8wVD1dekcRUxTYpEkN/1nPphgzrG640yL6Li698P5nTN\nzTfj9imh0Lq3IaNohzHetqfG/x8J/0n9vD33wjrDvehbaZQi57NSIhNtDYgB\nrpRU+NX6BvLDRKhz+FcrrvsrlyoLQE0AW8jG+/ySGkflKOl3yfykLqW6zTpR\n77Ik/9OOZE7RO1JSXr5ZLcVTz81Dp5ofCxQ8X9JegvGRGNbPmeuovEUvEoDc\nhgH0\r\n=0vIB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/touch-target":"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/segmented-button_9.0.0-canary.11da3c0db.0_1606940568804_0.6760572118142052","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/segmented-button","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"92305d6d62ec1e190f9e60603569bce42ce5631b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.489d4c219.0.tgz","fileCount":55,"integrity":"sha512-NAyxUNx0jUzja1H21JzE8i0LDsZrY6crAZzte8k63vm5A5cbQ55tCH0LetpGCb0VPrSvQkzAYmBu1msq34gu+g==","signatures":[{"sig":"MEUCIQDOa8bOtImIkHY6FCGEyv36GjJ8ras31sMcMo5qfIlo5AIgFkZmMo6PxK64dQiaUy02SRwksxKDYPkAunZaLGLlUk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQR5CRA9TVsSAnZWagAAfmkP/jJU+sXbJucyLCSAKUug\ngjO6WMKsNZNQ22X7piZqqQsdZZ6192isSUCoQ2EyN3GaISfdXm7tonffTK/d\nnC+WcaI8KNexwv5fNSOmLCJMsSlwjcT9Zb6oQCqcy3SDG8RwF426WueQUYGf\n96piNUncy9r0sYfHtUIgq8PWFms0mw+62SopX2hHBgg5L4g5CDvkxZW+EgpT\nhNG1l3M6HNF4F45pGtvjfLinwkA16D6JRXp0BaFmb74wvumhiQo5HpyQ24mb\ny6GzWPuPH/CSAmki//sb+LNuD5i3e03oUSjgxWprg3XXT8JmjUNitW6cMWIr\nAj7DTZwwFIC7dropKpGUQZkWkhsOopDXadr0NXbeyWKkafS1YctO5MmfVaON\n40CguNal/ko3DhsdRhsvp4j+3xOMXb+8Uiz+7h9Ak7GCei+ojZER5zF1Gd8Y\nO705EvIpmefzU3uEehq+i4galUa3bUQBMNAWPVGXA2ffp2ClUbVe9XvowhP1\nouGFXDVrQN8NjDoE/LvN7JO/94p4b3fpgWO8MoIDhyxz3MICwMpznVE5N9uu\nUuFamuRySmwyITo7uyqK6xPrc+8vGTt5Z50BifkFay+ECOn5O/CPzHLByPGS\nW8vuMLnj2/a/w7luf6VS4Wt9squWr38FIHzmqboRx10vVERFSvQQ4ktql5/O\nckwh\r\n=beXN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/touch-target":"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/segmented-button_9.0.0-canary.489d4c219.0_1607009400829_0.8641719851457954","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/segmented-button","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"667bd7506e26a9469fb6c30eb7925d59e023a20e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.6557a69d9.0.tgz","fileCount":55,"integrity":"sha512-Gc9AQEO6T9CUFF8UMZU+8MeSO0JstWLxkKzuYsL378jNJibZnco/kFE4xpz6P88gd92zFsRaSDsxoOrMXJn0UQ==","signatures":[{"sig":"MEQCIEW1wJH8z6UDOHW3+DZEwWz/WkW0xPrL0qJ1AXHRPt3QAiAB0SyfsFsB5+TGVJUGEZiyK+JlG6o9Tap03emOd1w41w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQc/CRA9TVsSAnZWagAAXtQP/3V21FXCEJipS4/VAE01\nNU2LX4EE1yyiSiOWTqy+Yu5lLpIiCGT+Mjp+6jWweBZv7STUmYPnSdoUQ4Ba\n3omMAFiC5PfZJAl3UxjSglcngv4Go+bGPMOwaLfyhuLp67AzTFHe7hC2lT6c\nh7KAkevGyLCTuJ4EsM43TlJMZ7160CZ2ZbK5O/D64jnR+7Mwv1/zT/wwLLqO\nlCWxFMmFb0kuglBz7R6kS1HcjCexbZ7pC45Bj9fZkAKjWG3MKPa58zcPksl2\nzbextpBdZiv6eNuktoyAoBdpkTy19kZAZYBD0eG30lro44o7IaLPQpl/vIjP\nFeIOSBRqtMbFDZWm/CaWIGMWb7f4yCsqMTi8YBYtIaxi6tuFpvTDKmqOL48r\nbmSVJI2J1DPhPRMdvP9HypGZCCWzkO/3t/vKF7t1/0hzIAMBEBKbBWL86/RD\nsWXsgRqgYpg3fyHdOPIqw1KQP06fAIo9YJSkudezYO996SUHw5/3Ncv6I22B\nSGk6CINkM0aBpd04GiKM3C1TqUVc63o6BC39OliFL1UM3Fo1cxSsc5MZGlt0\nLhNT1x2dkAVucqHMu1L+tnaqtw7WjIPV9PPcZcapcDK7i5n+t56W7Npq10/m\nvHSACc8R0rfoJ3oZ0VqLC2wIs2WX1ZysOa/0ljF7l2WojkkkrLfC5Q7h8YFa\nLww9\r\n=HRfL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/touch-target":"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/segmented-button_9.0.0-canary.6557a69d9.0_1607010110640_0.03317477167236427","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/segmented-button","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3a3ae4e86836b32dd428708758a4a31ceb448484","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":55,"integrity":"sha512-OBzjL9ZrcYMBP8neDwik+v260ByZywMs1joHrB4eJJQVa5MLVy4S/z2wHgouaYgdfbOIHfG/+nrW8Ub/rOlpyA==","signatures":[{"sig":"MEUCIQDhY6tTN6BmUfMYYdnaK1zB3B912J7AIYGgbuHsCXhBiQIgGExBPsx6wSlpHzqXrUsXOR0LawLNHd2SP0nOxl4hR5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQspCRA9TVsSAnZWagAAgrYQAJ9kLxTXXSOMCMZnfahu\nEEVxQT7lp8Zuyh0umM+W5c9TMcUFpzP7gZDNUZ3kQONB1iBjX0HXFf/ojcJ9\nF/+cVbz7RUDVoYzhWchDOJzCOsUq7jS2xW3kn+ir9CsWRcqVdTF0iF1ITzbc\n4jMmEh+jPg6kd4kBLmaZySiGzY3tVD4EiXZVQiZRIpGEJX41nyIcuOMPCUOy\n+SLUKhhxsdC5vuGkD/d0PvIelETEVZqaUSM8ljgHVl2l4KRkDCjiQi8DQChy\npQcsHLpP9Nn1sFiE8kBEzudwl+tchvSpBkfNDFweEIDTDR+1GSfF05X24MBe\ny1n68pAvG2hbIs5AzJ7vc29gv/bWRTr1eNDA8WGvMXHY26gDEoNG9FwFaFxp\ndQgIr4jl6CioVnL0PbjzypMvmIRA7bMGjF9zqrq/H+IENTfYm2Olj4XAOohX\nHJnhpyRi8LyOtzpKSZZBQmlUhvNb92XHDkxjUg6963j4UbLaW8s9HvEqSHqD\n+dmdiVS8EsyaVjOI64n7evOnkpxSWAvWKGJ1QAOTF6Yoz0zxLgn22CT+CzYO\nZx9QfvdHHyRyMO4U8gLO+p0ptqB10wyDGpXz8Ezc/yPN92LaQxiLXyYAqby7\nr2O5doqXV0h7d2xayGh4UyEDLrIhmGgwXT8mOBOafY+8Hm0xir8Qm+PkpVhi\n7PW5\r\n=rYZy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/touch-target":"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/segmented-button_9.0.0-canary.4ea1b7c69.0_1607011112851_0.27933101731947585","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/segmented-button","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03ce65906cbc21bad8af2d3ac118ec8d0cfcf112","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":55,"integrity":"sha512-eO2QWHQW67u3lK6CfZJZzSoNksOaLzEh/Sr/G+FE4iS9KR7S8hrNfM3LkV8k6nM+kAQLMYYuQCeRCkT3uMrlWQ==","signatures":[{"sig":"MEQCIGAd++g2txappPjV5vpbLpWpK5F/bp9aZpXOszNm5MuwAiBtugs5QuyRXatZ9KyheoNDEE9a7qb99N2RD+zmTCnF0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRoWCRA9TVsSAnZWagAAguAP/RupkMAVbitB2+zFtAtn\nVyhygCqvCREGp2YFcFc5R87kpkBExJrBYfaY724eYYQ7Qi8qgC0JHA0j1ePY\nUkRgfZ2HryvprZQuFIr+kRmlvkv1OB3BXuXK/Grga1rJtMtGlZghBBqGS7nc\n2yPkAypM59l/w5GGUYXJ0TLnK7/qxmP1Pia2gAxwWomLzCTXHqOVYrVzGcJf\nMJBUcvzlqn3ccDg0LW2b6Bnwd2HMq7ecWQYkYdwPKUT+LSWAYabo1pFgnMgO\nozkkf87p6vZjGRNZnhrgqht+jsm2WSFpnl79K5t3Q7hggb6vLpGe6Oj1wrqo\nRHer4LO3vUO11zkATmfMkVIoLjPfYcuUctmhk6TXZbI+ZzR362k0I1OxgXsr\nKQa5To+9awFqghY/GwzBYJEyytDRP3UxypmKBtcgHexsp58mk4GxHuLZWzgV\nr+S/55d+SS93sX9zLAV6XPqUlHcZg5hA/vk7sf+wrtMsRAUKDHkxXajY+YxH\naVPwWZ7wh+6dNKo4sLu0mA64ZSubeNG99OepgO7H9F+d7W33AcgsH2hGaQuK\nDDRvtsdIvbmgm3VbaB0Z+OdafPOPG1i9kGwEd7mQuRW/afY/WOgwHiYd+ZD8\nv37V9H/QhjpIVq9hP+4wPjz5iMfRqbJlzK0iVYr/6gC/nehJ7fueRjxfo7s4\naH18\r\n=opS0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/touch-target":"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/segmented-button_9.0.0-canary.eaeb78ce3.0_1607014934446_0.8676730433876358","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/segmented-button","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4d8761dbe9e14161115b08a58ddce8a0c8d91827","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.1c156d69d.0.tgz","fileCount":55,"integrity":"sha512-b4YXgQr8D8YZqWQAAk5vZhkBQe4qYjzFAFH1C+VgSZ5OMPJoXZC0pY4TkatJrKoTT+T5IUfvQhP8d0N7AIIFhQ==","signatures":[{"sig":"MEUCIHg1CBXKmEaqlEoNMh/s4gIgmSExbJw49hp4sHqFLbpjAiEAqNBcXFyBOzkXV1eDsHwEUxPimn4oROmY3vCZPDC5W88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU5tCRA9TVsSAnZWagAAoekP/3JH3D+It2zndPpzMHPQ\nSvMyvfKX92vcVfhyvpWb9fp3e8t+9t9brs+cfMva+EHtMwyAM5e6XA9ScUtg\nBnxWZZ4ly6YvWEYgzpML1VaxZMCL9zL4FEW0axB9JxqAjGtbAC+ax1YPulF0\ntO+BYKlSgR95nDNlS0ruCzhoXhMV77A9d50rougjYAPccvMpyoRm6ZSOyJNx\nmiFFYqKpuVEZTBjzygUzVD2B9Ogd5QmbQ5Y+G8cBA88MRUDE8HYrs3n0oJFk\nEXmlYM6igU9TqlHQWWynPQmdzdcAar7cFGw3otr8mcOA7TCosPvGibT72xPm\nRrWLMEg5WpVehkecfZU1IO6Jh+Pwam4xeaslj/BI42zOqSBE+4VFBgKGCDXW\n8vBbZ5tW1ev+7nJNuH5GDyUb+twaWoZJE0RfgViks4mCKM1nlM/e8y0dSn29\nhpTo9jg5uGET8u2P1H/qOqvhqTNVxQbzkNaRTHiaLXQUxPhtC8QzrO8E2sz/\nw9DQe3e83MGtsbBK7YF0QaAzpfrp2Pts/AOHeesaLqbIfXqBKL5lZgpB+3xg\nLD2gt6czv3SXRoNzlAlXaNgAXpuYQzIHTKrFzm8/b/VTzzXReEzqUK4RwCri\n11FHozv4oZEAacM29KF32bhAQSQUwiC1MjYy9ZjinEkmteKm3TTqZ4U9TZUC\nBZM3\r\n=oWt7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/touch-target":"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/segmented-button_9.0.0-canary.1c156d69d.0_1607028332657_0.16841052135745982","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/segmented-button","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8df9d76b85276e08e9b4a1117543f0a0ac98f068","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.832668d33.0.tgz","fileCount":55,"integrity":"sha512-F2oQUbUx+04TUXsnmLYMcdea9Hl9PjyMy7ML83PWDE5vgBmnhINPbR5DqVqQLM7bXuc5BbOl2G37WWzLLmF7pA==","signatures":[{"sig":"MEQCIHRqXZhGl9zGAXk2eMKsCTyVkqC57hNely0K6rpygPwJAiAHsEDB/m0e8xJGVDsJ/4GxYNGg1G9tVrS1hghzYTzizA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqaCRA9TVsSAnZWagAAN40P/2cxhmuF82ptjvLSfLYk\nY3QkVu9/t8+tqJbSM8iX7Bw1QEIteZGhvdX32s2XSFfV68vWb8MYjiMBYEQ4\ny/z9UJt11XoRCm8KcZnVEcU82MLrrwNxBCHLHnnHK4KmpVe9afhDgNC5x1Jw\n1KkBlTMGxBWBbENHFKMDAzXlEQKzgWgIofCITRv+ANu00d7DKVz35gsFosOO\ngRqYbNU5604bblaxTh02z0IlCyl+A8dS1NzxeBBB2o2FClm0LeVtsoTLJIm0\nEeziOQuoGXpNG4afqMilfsHMmNN4WdU/FyLuKfNcb9KdxziRwIK6OR3bLPYY\nn2mdGAZ7fCkPg7WAC7QkngWpSlVgAjui8N4fmfHTAW05zSaynxnAcYZPFquF\nQXd4K/62F/Dofk8pmVQXHYRW7kBVu+of+LF13gnNIymQUrz4DiqLTryrV11t\nOyeIDlyyGY/ryTmGgFLmYU/djrXmdBv491NVQZHTt8AX1d5RBRBhGor8spVT\nOjOtjpBvSKo5w7g+EkIK/a12A+1CkovR74xu4CymwLSug53znHLMzjaQM+Mo\nGHfZTANv1jTzHPxhgU584sn8zN0KQPOnSLuxWVjDHjiJd2UofxPeYa6PIUiN\nC+l2NGE6DI468BfJlZ/52eVldgwnCm3HdkynANMvbxvxXCUwtg6syf/Ij7ib\n5m55\r\n=B0gC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/touch-target":"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/segmented-button_9.0.0-canary.832668d33.0_1607105177629_0.3407496999303472","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/segmented-button","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"60a0b6255e8c32ac9cf49d4da810b38d66cda3f2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.4321323e4.0.tgz","fileCount":55,"integrity":"sha512-oR7lmecP2N9RZBHuhSZlsCg/V1HPNVppxMmYGf6efLN0rPatPB+HI989cyTRcvES7j7smLkbFGYs1UhGdNEJAQ==","signatures":[{"sig":"MEYCIQD1QM2TWWhf6JAwUQNgDvBTASTpJ1FHB7GP3d0x+rCulAIhAN5DFi+A9cwQvGaSsh0TReMYrZsg98+wzHeGVLZrNbF7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhIQCRA9TVsSAnZWagAA3z8P/RGBQYJkzuOSRvH9F+6y\nY9o1s+M2HG1jWab+RqMFkjG+IIRi+uySthj3hpnWJLrGPCgGG/rzo/lSu2Vv\nFjl/lfjokR2eUIePQIinfJufHC1izTYvQaFIy5NSCQmrO/majFydobFzk0xE\nb+YiRye71J/hS4Lm3+FwPhiRg8UOkLZLJvNGn6yI60xDecGYOlXS9DCXzIcp\nphNaSZ+nwcNtfSVNPumC3Y2OIm7vACPtJrJTWXBDdl92YQeum0rIYP4GB8di\npTVVgUzrlLAgLt6UxsRuxEEmaXdKvIpuOknIRAxwvFElBL4NfIXWrrM9MTlU\nobQsq/CDVNPfFPf5L7wGFCgXe2J64oXGCfmpBcYWauKjDjy75htPNmjN8qd6\nldjfqe+9y7ON4uZIT8c0Y999+c+zFZD72PMWpGB4Jkkzw07zNcmpKsN0dhSG\n5c1irtzP0T69QVX1zhpXIt9zVK7Q7xVH4W9FphHz4mPc1WkZyNpbcmDvmCPy\n4vkcpolmvl5ypNjXguwqrv2Dn9BAR/n51ZVDHnN/aHzcnT+G6tjv1Pcwn6Lt\nWlYZvFvDNNVBIEul88XYSOdWw9uvPmjRj10hhflhq/5pVpnX2sEobkaMi6CY\nNkDZ2oh2nJhxwAB8aoIe4ZfooJ6eIzX+mBHok424emZ4i1Y/fezDfLsx2ptv\n5myO\r\n=SFmO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/touch-target":"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/segmented-button_9.0.0-canary.4321323e4.0_1607340560207_0.16256294642678126","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/segmented-button","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"912cf482560c8aa1bec9f59a05e6efac0d0d569a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.2d5f32d41.0.tgz","fileCount":55,"integrity":"sha512-Rz8eUPRmOMOA6ihDn8aoaGo91Vxe3XwMcbROinPxGMewJzwEdfvI0OnfSMAMm/AyoH8ysiD085//YCnt/8MeoQ==","signatures":[{"sig":"MEQCIBQwdUXqW8xUPA9Z+GafdDQWr+qJhpbZvnYrmA+HvUDOAiBZfv1OPHtclmB9WqQD9wUbh6xWk/V5uhq+t4aaWJMxpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzluCCRA9TVsSAnZWagAAI2UP/iKQW5wwQfOTDLvoVSsp\nO9pZczqP7U+3jnt3Ig0hF5+SfOEnzlCUVFrfY5am97wVXPQ8MAB8ePp+wkqG\nXcsUFuv+4Wg9HjDrJQ0Fs/sjbFq9NWsBARzPRKzTYHf/qtxC54/y+Zhcd+V4\nP9Df+BTFl/Q9mM0nzuI0oc0pl+LtnkeGnH4UnVfMj2X3Fvi9RcztH0oCnkYM\nlj4+mBZcMg53Aqi4hyAJ9qCmYEqTEdETh3y6QafY4ks17p/oToXrxMpQR1nt\nT5ANzSSWs7TeP8mDejLa4vG6QXjgVUmwOrgctHVtGbU6KRJZ5QrJp3H0aFrh\nVqLKhY63sqsAOPF6oGMGhab66RZTeckF/iKvoFUf02tchYreG1qUhoB9zIjR\ngV95dHtQIpP7MXS3bWF5JyLGDPmqjosjaH02rvNGO1ayIPgMiwjxVmliI17B\nX9gP2hkNbMvxF59voPCvXtKsfCkoWG1BaeJC8kpACJ/ApHo4GgbxQdF3DUIt\nnQhF3ci1YmIiW899tiST3JdWntklzjAYfxVA6e7DBWG2FqsXPnp7bPBDmBi0\n2Gh/B+5GIaV4jgb8wtTzGddYousTjFtFBQbfesG+nIfxdVkBXrWrpFr6k/P/\nfmV00iDAVFIECdCgFv66ioLxR2MN1MOIxrEW8XDutYaL8/a5QQOKrmDel+Sb\nCEDV\r\n=SfO6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/touch-target":"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/segmented-button_9.0.0-canary.2d5f32d41.0_1607359361891_0.2975705293397384","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/segmented-button","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed2d9cc83e2f29bd5ef8029600b8024a21ccb0ea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.8239afc64.0.tgz","fileCount":55,"integrity":"sha512-Kxgt4KJTa8vTEhy7rv0s0kPMsPHbtA9o2ummrSSrAwshZrtBS4/WPCeWVQI3PzY1519N7cyfTY1u+GnkRpokBg==","signatures":[{"sig":"MEUCIQCRcNySjrh+B9gpqmpHa9gK1CzpPLazxGWSuaOfV4SeXAIgeGwLIDs/l2o6lftaSI2kd5QcRiiGqCJWHAfjv3JqG/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodgCRA9TVsSAnZWagAASIoP/Rdhxttz+VZp4/zB7fwM\nEuTZ0MkLNJzhLT/EeFczH9Cjq6aNQLy1QFHOsbCEzAvr9uPU/rbmFqYz6ke6\n5cLvJR/23LsFgElOeafSC4rwABxubZ/qLaXBWHAXZTh9CC0pHh3CGsNHK7b9\nrDLlVOdjDgyKwqUtWdF/NEL/PbBURR/affEF/oTMI2H0K7Auzk2Nm8eUrbxw\ntX4XzC5162e9+Z+J/BibuwGr3iQX0pxXCZNI5m1FsxVgitbYnwgXKAFUvEI5\na2J3N9mSjNg1J/R21JW1kzJq+XrNQ0Br47vGZGFnaInppGxnPAxDIF3aAZ5p\nJSaj8oIxuYpQ/63rxklSgno5oyxQQZSiK230zVj1mQGnvG+mu4XlZzp2lWDf\nlHhnxrnQa5kTh/p3+uDNqv65Hs1T7UYr/NA0QgK8CAxTD0j0iJOjwAcLh46H\nCX108OhBG+v1YMeu/ohfOfH/pdjTRBc8eNkSwZjTA7RlY/VoCOHRcc8I7NRN\nsxDxtTU/lGiSexZQ0Es2dHsaF71bAh8wt4Lu+/7VqTki68MMSPTAVG7RfvAR\nu/073vk8cB/HTVTl9bPfTvR4uetXHGlrnWJavKfKGksZDw6kYsQM1xBJ1RnU\n3No6hsSkJkyToaaxDYvhwmUkwQW53EO5IbqhhCqaRQbxIPLWkiFMiTZ50Bl+\nUnDt\r\n=xAjr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/touch-target":"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/segmented-button_9.0.0-canary.8239afc64.0_1607370592083_0.1617800607376112","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/segmented-button","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8e19d107941ae7bdd01fb377242a9dda8e06a09d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.6871336f1.0.tgz","fileCount":55,"integrity":"sha512-1+dqJ2vGmjTBziaDgW9FBONjv73xnYyIbS8TcchhDY/KngeTg8gbSW6E4iFK1XTlixgYXcy/i92ezzpg/9zJRQ==","signatures":[{"sig":"MEUCIDL64FUBAxlKfajz4MWQUALrbTudeQO+cpU1rtfkIj3cAiEArqXWCLsY1G1fCMo71w2qQkCgOmIREyXOHo4FwQXOYO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NsCRA9TVsSAnZWagAADEEP/0+muGmyYzPi+Ow7nYg1\nF9pAQsH6ZKc6yjNKibn1HOXPvjwSTkJo+NX/SXV5zO/gSsilz0Ink+1Q75wN\niCwIgzfFAjJPwxwtWmWR/u/Er/1Gzw47lP5jcg2i6DUbtsq+e7pg9Gy8wPX0\n3qHzLKSQaCrgXfnXtY31KuMgEos9KrZZmJixmdxjusQ5yQCAS/1t8H2lPIBq\n5ewDk2cC3zcDBO9NVjYP9A6u1OZdOYdNnjfl7omNVpMQ7cM2GwxqrNQNB8w+\nwss38QihJZEuuSR0YY5fhWnJwTSX1dCo/VCvyLgtN1Ah3EuFGk9lsYiWQe6A\n0HfZjOoKAiOsyDWx7PyredvVOZCRSJSE3nw9+5Azv2AyhP1SdZpL1SXan3+a\nLS3OI+xc7etUxPX3A/Ada1SIMCkpdNJUdEJNN49PdCucs4W1zOdbRsIxT/a/\nMmZw9DlSQaEUOoIVTgFAmr2ttbybRFcxsfHlNpVn+wUHhbM2fuIbnwq+BSeD\nY2U5Q5GD/OmADSEEit9EHYKBYu/H7XranJcwmWf9OM11NXnuJCWSIAtHMFZJ\n/JnW1oHEMXIxf24HTsfC3UK+IioGRnuNfTy66kb732o1RKlwn6x+yk4/sPS5\nCF5LG/aKR1OFQuonV6lybaWzB0OHiwNfOZ6thspCmNUzUwjQFfPxxHvzOaqc\nGlax\r\n=dds0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/touch-target":"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/segmented-button_9.0.0-canary.6871336f1.0_1607443308295_0.8532338595298252","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/segmented-button","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aee21e7c0b1c5f858c309c952c544f8559a1f8c4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.9f718da94.0.tgz","fileCount":55,"integrity":"sha512-8LNsvbIHGsdVsGTQqhpzzvTEMbDUcMvdK5ceiVJhJmBGinaEvHxkrMJbdGgt3IHEtf4cAjC7EUlnlCACXGk5rQ==","signatures":[{"sig":"MEUCIQClHlgYFWGPgAYANKEnQwP/5hD2C/mQ0/P1fnj8kxsl9gIgDrKYgpn7PJsODaph5nUm6PxQKRcNzlyypuI1M4KUsTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YvCRA9TVsSAnZWagAAm9sP/1Hh9H8iS6SOYWQewhoL\nIgRkwCe7H+g4PkWHwluXj5Q3NgzG83LmBg3B5k4oDZIKMxMWDajhPsnmLelt\nW0BRwh/T08fN+FNqFc7YsRPO1pdNio23aGnVKifqX7ZrrcmlAIYv87qW1yQP\n4yeQ1josK3x1FD7rHtkKirb4+kG5FDR/D0Oz392angpNW20Xd0xj6PjrwWrp\nd7yJ02d+NU57WsdTgdBzJOF0TyFxO+Cuonm3Zpe0NUnZWtGnmvT6ApPCEEBI\n/uCLEqxPqVkSTo1frIg7tbIceVAuiIt7U49tBJ+kt0EGUxuMnm8N9iWupafq\nazw0BopY2y8XHrgxV4uYwC1d3y7uaSmXmPru93NQROUkSi7oLB02Ue+Aeh6y\nPdomn1RG/4d79Ae3ANTDdkKBkE9PceeafEn7oMVOJG1oztj0tw7Y67OLpmUd\nTDlsbvPF3U/nI6nqBljVNUS6IeX6xHzEMl78j3FORJxxTZl5XzgfoyNI5QQx\nx7ooxTNMob/0Pn+ke6S0qAWFdjov82dOib9bDF5fQBlTc8vM9qIZV/dVaAw6\n0pfeB8kdYMaWucqlt5TVirFsCMLvQrijW+4wp09vOa5pywhgRJi1sdoyYsze\nmSH8NvIFnyqvz8/2UGXWMnrV46UqePKtMxz3Vzl96j0VF4cJ/BA+luyWhgTa\nnSXx\r\n=THcN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/touch-target":"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/segmented-button_9.0.0-canary.9f718da94.0_1607444015106_0.6621259639082477","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/segmented-button","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"42753ce37fcb9cd59e0796052b99eb0506327826","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.1fccb1418.0.tgz","fileCount":55,"integrity":"sha512-BJSwP3EzbZk7M00D3zYl6vtclflxNCioJh4Sg0ZlL66Z1BCPudHzLUOSWpl7pCFF0HoXHsTWXDX3DzcBQIvYZg==","signatures":[{"sig":"MEYCIQC+AQLIF1RLPanYlUUFBt/fxXIxzbQVf47bw1HvIxeqvwIhAJlSw3Dg6c6cuZI8sPmRzydQqRaEjk2amZb7St6yPNTT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6m2CRA9TVsSAnZWagAA79QP/iIlW2nJxFl63r5a2DgJ\nJusCQcugoifjVLiY45vQermnZ5AI/KfNFF+zRS/yHr2fIT1R7SUAaVjjPlUQ\nvkFw1CJNmOZUTDSeRMJ+K7ZirMg1miBO5kdZNs9NEYLmrYh9J87MN2vegaj2\n8ZiQS68Q2JGV+zcsoMvO6s+xJpyElfQdAGk8WA+gJPKp4mnIjHx7/L7O4gFT\nM816Wxj5jF2NB6urynlfCOS36rP4SiVVqKKGPFs+StUnUz07SRgXm7SAaVQM\n42scy/gseAGx1b/HOhyhQlNB0xkxQfrm9v/0ROm2IfXDL2K9fRn/APbJA8kd\nSlS8anHw2UOFNEIeBpNRjp/lXQMF+Y8SDBMej6rVur3gBuY5UMiL6mkAf6yA\nE+QtZmtz3uu8B3d96z3F7K5RP9V1gX9P8ZW8pLNLpn2ly4fnmWXVZkiErSKi\nT+qsIvOLzN45fI2mqmwMjwrzVWdtDw6LqCWl6qkoKWxX2ZyUQGI2EEVrzfYX\n1GRpbkt/oOJ5wf/gUO6QDHtJXKkK/IWyM85lCBSZCXTCz+CvDU2mX30oaI1V\niIsyrk/CUYdU8mjItALQMHcfjAFP6l4VJ4UAQtQA0gLROVZFFPAfM10KvvrS\nKLdE1tRQfVCBQe6KHDSEAmrVUC+BAFTq1orj9qmYUMJRlJQz4gYDq0TO1zqG\nC3rt\r\n=ywdW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/touch-target":"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/segmented-button_9.0.0-canary.1fccb1418.0_1607444918374_0.7869265232157585","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/segmented-button","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"084cfda699fc030a1361cebdca7506440b3b9373","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.afb68894e.0.tgz","fileCount":55,"integrity":"sha512-e/eo/Csuhk2azIJ6FGzIhaxGnUrD6LjcPsjig8D77eNPH8l6sk1azAZS32n0H8QZk36Q1GCIU3w/k00a56LczQ==","signatures":[{"sig":"MEYCIQC4+gxvDRgvQxAelBO2qsP9IhHEMY56e53uJGSi3+ISJwIhAMnOpljTxxxQ2YKhg9qMlwYWagrZoWAHmvhxuYLNz00h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qpCRA9TVsSAnZWagAAaVUP/j8rFKEST2v8oiZO4RbK\noeYu5fkH2/Zseix1Qkwj50LEHsUzMYaAaus27lk+wVVS3x1BiJkoYNM2COxP\n4ddXHkb0/mCOnIE/khUMOKt6VK0nXuibgeHEfz90uzIgmbVbEqMxi23L+Jmk\nRz8rGOpk3TLUpto9uf3M0O6vIfAHecEAG4WRC87Gc1UJPVEfx4GbZJtuMyHe\n4N4YuB62a1QbM2M4UisDGWkgZng+GfaHqdnLPyAzZwxIt9cYzgc+RjxQrgvJ\n21bV81GWxg1NLxbsn4m31zWhV9U3XnANZNd61LE6sMp9kN0p5sjG+oWu6NIK\nONzGkRBspOTzNXefoNi5W3uqZZY+e5k2Xdb57Iipg9jUKm7/n3cMzmb+2GTK\ntDJiQPB7/b00h+51BcTFUh0pTw0ZKhIrg+4tE5mKJW/6E0+rzpzzTVWvhIgg\n7znOK/IGhU36/dAnnljF9PM+cjPP7p97YVyAmHHHq8VQFyRuNddg4B9qYLTt\ny+p0A9UyDK+sBL/yxzQLfjhptsBtarcvBl/UOkAwXIBeLwgXlF+NJdASM62Q\n5CoWHUoNUcn6NG+iO6VXw/8IC1Th1bCbQB/igM+PKx8CvfBC0K2ZXLanEGk6\njGJ/YRLRl2jd7t13ssvV/0fqIfmGNbhz1YggHgrY3sWAT0TI9gG2s/HBWChp\n/ZtE\r\n=WugZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/touch-target":"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/segmented-button_9.0.0-canary.afb68894e.0_1607445160720_0.33266990581134936","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/segmented-button","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3fe722c0861155b1165da0cb2d32035d8351dbc6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.fd88d40c2.0.tgz","fileCount":55,"integrity":"sha512-0e1mYmKOg5TnuYlY43op2sjO+a6Xv4oMMRGleQP3pqnYY7P9i4IqIRZOKiWU6MGR4Mi80YVDKCm7v8SxvkVidw==","signatures":[{"sig":"MEUCIQDvNqFLkh73L8CSON8qTdXtoNJioyTSuDhk0nXtIhHwIAIgawbaThHTbPYsaPEkjPe1jMfS/+6E0wpLFFAJYYxULOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63ICRA9TVsSAnZWagAAIl0QAIedUNMc8pWFm8e5mWtO\nMGkyQ4e+bm55YV3Tdcg+VfwbWJX0yYx/Dcrs84yWenMsy8Lyr2IfbR1is4Ep\n6BSobp+TgABRoiTmh7X3GZGqS9juDEdNIYwdFBZ/lIFqgBBtvahjWhfYQsFm\nBZOoyUZVUlRA+CcinjDfnNCN7T/C+8hrjMbsx8DxeOB+O0CneOCcVrZBVzBY\nvOb3zNTKJml2A93vJQTH0rCsJ1odPAARlDMg7MYxP0x7QEMGdBinMfbaGdAn\nmqqPKsKd4aGtaj8cTgLrXRnuEePJ0PtzYhaCcokKCuO1KNK9ZTlGVjj+0WLk\nxk8T93PKOd8HzzQlD0VPybb4/H9C49Qro2mSxcEF9IOZkwNu0ekZN2YEdZKv\nwN+brZUpsPLfi7DZ0IIb3rkfKg9EgFqhqlZa4Dw3NFmSDIQCautK0Kvz7N7k\nhnXVyDnRqczcveY41YCjp8w6x/2XpUueYTQOb2IZYEC3eM2QnEnOeDT2XPRR\nRpFSTCXUd+986NiF/MVXcrmpGIiTXEmDWc8IAsDrSegxbTcJQrj/GljdgXhb\nJdxvuKToBYbRAarVjTyuGrS1gWYCgncfL1jWT3cNCyLdY6HIHv+brG0Xyj9X\nvEeplWwO0mHbXA/ER0Z9N148xEYpUwdte2jtHqLuWBlqK2fF5n5s0kkegyPF\nPhLO\r\n=KHvS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/touch-target":"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/segmented-button_9.0.0-canary.fd88d40c2.0_1607445959721_0.8366789111083905","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/segmented-button","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"04cbe07bfe9c9f190e6e4cb8d744868f15b54a7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.ba9e3109c.0.tgz","fileCount":55,"integrity":"sha512-YTc2TvR/29iS7JYlwzSwd9/TE6B8bJ1NqblizIjoqxoc8ecBLDweEEVvvE/OUpFJQP4tjcX0LDtM/60lgQNkqg==","signatures":[{"sig":"MEYCIQDwvfQ8Y6E5Kdk7ZkJe0XAV+B/skAwmvaI9iFGGNAmyawIhAJRjUduInJaCRMgymvMMx2eyyBkeK1KXIuaV2XZAfCCJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85/CRA9TVsSAnZWagAARhsP/1zb2m3va0aAnjUywLjn\nawx2fB1QIQi1QSevId1mEmIMYUjxR/y57IEJMKBHsLCiFYAt5vMKZBk4L0O1\nLxHBUHa91C6C6PI6Tz+5HaNFYjQHq+fOlpH7mox6faywllYU75afQykU4For\nuwLY82gWxfgOJsI4b29ukTwTDx+n3kar/3BQiyD3Nfkj3gLTx5mWHghr8xob\nPw8A6UGqUQtJ5SgCRfFrwCMwW7H4jNr6/AdUVNYbogh5gJjn57eUmJjcQSWT\nkD4rCYZFi583aSJgSk2rQTIAUfk1tIdCcbR8xJZJxqCgbmCSmqbz7LTHrtWH\nQDVL8SB58Mwk1u2qiiCXfXaL+GPAO6bDcJLdrzPa4A+QmfgxDHXmhqLY/LKE\n/66XYGBjEu2E45C4IB2XHpUodDZY2099giT/N3CdxsvXuxRbLhDEhFLklGOv\nwpxOD1Dh6kHwIvS5/jixP8CmVQi+66XnhOEAPA4q/TLQmH0TzJCy+dXdxv7u\nECR4xYKyNNRL1kkxQRcS8mO6pshNZgksJ1M6fTcXP3xvSdUn0jTWITHmTLPJ\nOhCohfsOhzglwe/F1Ic/XviudzSMAPnHJTdLlCdE697qtFFqPy0enKEkoxT1\nprLcK+JRN2nMQ8weFbScWvLoiOJI+QMsp7/N8USgC2rMyHPsaOY5rQei5AGs\nNQnY\r\n=xh/k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/touch-target":"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/segmented-button_9.0.0-canary.ba9e3109c.0_1607454334603_0.48440330912649077","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/segmented-button","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3170fca7bf06d50cd8b0facfefdd20fd14cfdbcd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.1085c3b2d.0.tgz","fileCount":55,"integrity":"sha512-FAjXEAsplPJp1EIidm8d8ZuFbLGp0I0NphLG46JeDVw7ld/T/yYiv0P/0t4JnskLcVAYvo+F2u1albXefJOjZw==","signatures":[{"sig":"MEQCICkdvWDCvflu5zj7XVe+SQ9ix88bbZdRrQOjWgu6+Yr4AiAnR2Rqgz5S/pO4mDHceh2pW9HGY8oLCI9Jk4o7TCGojQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFWCRA9TVsSAnZWagAA9WAQAIO4OKQmPAONWkDRj3nI\n8HGkA6Vd9hOm8u3XpS5QeGyEQtASs2MnJddntWoXkM27yStXNS+k/4s1P0Px\nwKWnX3Ssnhq+ChJ00vr6680j6+ktkVPB99NjSzjuzZOvEIDCrb/C2LAvg1yH\n2BpHpOc1Tv3fGOlQn1giATveN1VM5gzUcBakUz3GC82LBe5TRAUSDcJw6Xxh\nhAxj1XZSopFWJuLM3FRjC4ye+u66xwcJGm4RX5fv+talF18rtc8eTB79qp2q\nq6A89PzAS9g2XYIC6XvmN7defBs6s7H47piAcOFAGT809M28GWGau4MP66hY\nDxTP8+tpHQep1aDVqeB1CZfP1scduRwUJ9envcrIMBMPqokz4SD8w9kUZYdl\nf+6P9biWT0b219t0xZoX+2b6FpXJMTuVZ9xQ21JRmlAyocKN+BYAxBOppbh0\nw++kQk8kyiyweSQLUv+1f8QTNPVgw69M28S7G9dDbr+mAsC5QqUXVnV3LH4L\n2L6St0uF5ANTEEEgqgwkopCQIhYPglrRIEYtpLmBICv8gNEIjbnLQyJ6Q+T+\nkt/yrXIzKIc/NsV7jf6/wOoCpO4MZo9D5qDlAd5Rjyy4FwBZZYgwsn5i2lxV\nBdQh6jHTsKyttV6bQd2EjRPlwHGsHVa3dlg9rrrVGXJc9JQ6AKBt9U7TaZoD\nIF+D\r\n=TPg8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/touch-target":"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/segmented-button_9.0.0-canary.1085c3b2d.0_1607541078084_0.33134005808006184","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/segmented-button","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e7da38f1651455cb4bd91e2f4349891d7225681b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.c5dda809d.0.tgz","fileCount":55,"integrity":"sha512-OK2pkefQF37bys5uygoheTW2MVx82Akvqd7GKFbzI2vsadX0sQQezSWypqudCO0DZVYhBGZyk8YiJR70PxwyFA==","signatures":[{"sig":"MEQCIGMCAcomLbeYl/Fw9sdApAeNprEKSzlYlY4AN/2HybZzAiBvaq55jRcwm5ByjJcJU8PoDP+QqFQExf+gg6BBfAtrOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiACRA9TVsSAnZWagAA69wP/3lDY4VATchgO2Lwslkg\nX/9xI7VhgDEOFeMtJLGHIdHtbHJykz2ryiDxZvH9eYcSyX1990YoAtCYz7P2\n6XjbY01ByduZmvFHJDKrFkK6eVRu67Kb3KuDo0vR+2zaHoWKCZKvESR1DXeS\n1IHQ287uz9ITqYfNSw66rxp95iAip11mdqnbVpvxMW9PjGdRpNrQ5Je4WWJZ\nd6yZaho5Lr3VTxGsNtVIiqI1mJ+re1z4aj6gnNMOBxM9zsf4fvP3DI7BzG9z\nHbmPVjom8bTG8COLRPM/k6a6Rm+D5Q02bQ6d4XYwiTsR6DwQ8cNjlPZgEseq\nTuk+NhgTaw6ZlhrUOrk3a3LoQ9q8Lp7YptO3xvlTs4H0skkwuA73X2E2z04O\n3oA08vOlmTgZAtFNiu9zWOAp/v+KuyNjDosp1pbsV017IpwDSm7VIg8qd3gV\nnGtqfRiZEETKN4o7UJ4xdUMTTQacoR7Bf+zBaBMl6A8e0+hLC7WBG/NYoeBs\n3ZT0UEI+ZrJ54iPLA3hMv9S5uk3gl2tImf0lhrcz+98VV/FV1edBSyvIYPOv\nXbOzl1eEp7t2eKz+Kn7rpYsRiGzhKqxRD/e2Xk4/0RtKZ0bHArPhr2VRMRvK\nP91Qj+Js8lqhEx1tMVffdp3jsMJfJ+47jq4FNS4H2DZK2zNVEXckAp2QSAlE\nUESt\r\n=LIFu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/touch-target":"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/segmented-button_9.0.0-canary.c5dda809d.0_1607547008220_0.9990186205985396","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/segmented-button","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7ffd7277f31fed744fa9ba72e74cebd2e8bf9d59","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":55,"integrity":"sha512-K+NFIcaT22NqJpaymiRsDAkb+eIVkHAYql6R/g14shfiRWzQNSLDqJjIqjZiI76K5D9wnVPh19hiA5aWL8X3lw==","signatures":[{"sig":"MEUCIQCBoU6O5Nqr7YP69/Plhp+VJbda4Lzv3SPpY2p1GWTh6wIgecRmju4p9VpHCSZlh4yPi2qJfX6Q45jFvoxA73ch7t0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzTCRA9TVsSAnZWagAAF/cP/jNOLVraqKyA/hQGlea4\nMPkC1LTqgTu6D05BYsK/PaGn/u86fuHcfBV7TN3sHITSpezapWvi9dKcRHW9\nLwFzlCpmY+yAIRcHf97zWMj+eON9foutOlyN6z6Muj7axWD80pmbv/jCSBhx\nUlcz8BRNtEKhEzyEn99SkgQhaBrUkWICcz2AQr3Tguo0rXm4/2KQRRX4eVmC\nJeL3C3jbJYdVfEmYQ6MRAQCx7Fe6MdTAC4+ocxNHvp9PYRTiFXjP+u6GPaPT\nE/MyKVvIdlHHjAu84VXqT7L01/anLYEym1fSSWZAIfFAwPAdZxtHQ5YgmPjc\nYID3wj1fDTdfb//oXOx4/5DtHurPC3u30b7EFwpEnKGvLBr+x/AV8GdruOC0\nATkyzmCfirR7gx+CtvtleO34g0mlXB/ma/DCOwdwiOA4v0/vGcCHrkZFYx29\nadf/Rh9ka3o9sw8yrnBMt3dSRQptkMk5CI4GKVdGkd3u+Sv9XJl47/TofqE4\nMwVVJqw0VJHi1MtqarrG/gfaDApbUdI25pH+wORayO2sObQSpbkPImbWh1XR\naOHT4uapvkG3h7f328F376VLKHSJZcRJ5uNk5WubFnBgY3ECJdh1UIFMDYpT\noUGLx4EFojGXg7geng+gc1F02SrNpAUXbUhdkX4/+kVV7AGWwAvm0pwgXVGA\nuuOm\r\n=ruMg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/touch-target":"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/segmented-button_9.0.0-canary.f5f1bd86a.0_1607548114575_0.44425157492889","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/segmented-button","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6f07c21bab30fe16f57455804b99fd055ddcacd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.00f38200f.0.tgz","fileCount":55,"integrity":"sha512-SvkhKwce4Z9H4cAsiqWaSd3yGV+G9ld1dRXBfS8OMYZOm3Whtdc/YFNQOPM1T4ZP95JwwVt9aZNthof2R9XTlg==","signatures":[{"sig":"MEYCIQDWslLncyMnqgWIhBFPfl/ORTfZ1AiN/1I0Tk6oDdVP8wIhAP7+pIpLd7aUClksmAEwp0jGpSg6o9eHr+uvO24GQswi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05QVCRA9TVsSAnZWagAA9c4QAJcFqUzdccZV0Bvu9Z6L\nsL30eb0DQ9CetiYxw6WL+v5b07Ii0yrgQw3oqlpeWytqsuae5SsOkYtV0hNL\nEmxkeMS9n9B3OkEmpn5+bTvk14zJiR0DP+OaCpAIUhVoGtfIVHSDoNdT3iSt\nBg6zpjEbmQ8hLYJdZALk11I82m04zxGKpS7Ug46ZRQIXKTlJJ9nl+nWg92O9\nUNXY48GJhi+9ejU7V83qUuJQjVzFQ5lSuqNk/44eGNnSqsozAnONRCO1nWCW\nJG7YNHJdnkPyeRUkXJdZO1uvibFCByQZrDWxCUcDEa/IT3SPtHKnxpGnj6mf\nrjnkEXVmDB19Z+ydf4FQ1y/MMyicGYJ/FBDzWlpOeOlnqbFJC5rXS3uF7yx0\nhADKFa7dKThXhr2VFOxqRYHyCF1/XVEHKZS3UnsaiHwVG0/erpJgzdeEia95\njC6JUDn7CwtShtUHl+aUJi+fn04JMDeQoJISz0LFBZZa6507dLicmNSk/LCj\nkGRDKDvswtnYF2c9ip5DVQxp1plgfo1Sp4UdxTdAKQWA3ueRSHGTy3tqiDQ+\nS9UU6S9TdPKv9SIxCe0Fnb1aGK4OGgHPWVeedyDVaZpgEdeMRTc9x1JO0xXP\nSjpw0z3RzJmaLp86d0X8IP9a6vnRhs6skNpDen+a0L7ChloYDyKJv+KphCcy\nCoTc\r\n=wO6H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/touch-target":"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/segmented-button_9.0.0-canary.00f38200f.0_1607701524622_0.10175843033855858","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/segmented-button","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5f61a642fb752926103829913d6f94e4edea60cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.ac41a5729.0.tgz","fileCount":55,"integrity":"sha512-L2zj6YEo+yiVt6WtRhm1Nmr5QW1ogUGJ4bGAh24UC29KKaTOZ6RVP9EWwkNiktP34+lgNHW6uctr+mE8Lm62ig==","signatures":[{"sig":"MEYCIQD908pQkBnlpk/skECAZ+jCzEyU+VBOwzQTGu4wE6Z/sAIhALPgXdtLJpC0G4hRHJM1w1lkJ5oTRwAtEQWDv0joWanh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054qCRA9TVsSAnZWagAAc5YP/AyL+jXCvazfg1V+wp4h\nunKcFH1qvILsZk+XqH4rJAgTCsrSgmn5FnGIGHeuz35AyZfrnVpvXHMCVlH3\nVrTL2ZQssG88N84MyEQbUDiAZsvr1r9IDciPZtnz0BDYUpme+MMKstFDcvNe\nu0yxWE1skbdR7RtCZXzoU635Y65kyIvMIB7+ebce+rae9/cNn8DBfkV2Mgkx\nXhJRBZKFnnLpQJdtFP/X2hmuXHGS5c8Vw2TIUlyzXn4o4ua03D1ab1g2jw5E\n14UakOhmhekAH1orjMwAnY7BRlvE/lLFTfynltb3PsXQnXslSkDghKw7Tmy+\n1Mp0EfkdxPsrJnKt0WNFBa6m0cOoEBA0T8HyWRyBye5+PP4MTNyK14X/AgkB\n0jsPnqL8KjBbHbuJerB+7V9BqAbp8AvCvJ32C4MEzOQ2o+h0S1ayuU9AQEb/\nmeNfjwbMhehMWX7Kg4wT9+Jxo9sS1PYxf4JQfPl/9zrkLN2oaBQ6z2cbz/uy\nvivps4bIXtJ01WuYKsGRL92vLgYWCuKM905S5Xsei19DV4dwPjxvh5bOHEZt\n701iwcx4GsXSM+6pPtjrBfNMQ9DliAQNCSaNkpbOqOsEuQaDukmCL3VuhUj4\nU+wjGmgQRy9XHoTW1a+it4lyGX7CB+SHeOSMC+h0qxaAm+BF8L6PIlbQwoxm\nJL5P\r\n=Up0l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/touch-target":"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/segmented-button_9.0.0-canary.ac41a5729.0_1607704105706_0.16731015144126427","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/segmented-button","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"358771511402b2152963dd6de593aacd0e62d226","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":55,"integrity":"sha512-hy3NV5i2ZMplDdhdgtmdu95N0mY3MHBQ7WQFUz2R8hCxyPOPtjxV8aVQayEArynCQd3khAFqzWr5AgrtPijJhQ==","signatures":[{"sig":"MEUCIQCUewlRRLQLqhbbOWY7Vg41X6EoUo0GaZa37HIiN1u5HQIgKLM0x+ldYYbg73xjGBKY6gBfDIsklgxnKRSqxFotuPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06brCRA9TVsSAnZWagAAibUP/2k1+HX3zm12WStrF4xf\nh5zwDd4vpJMuMonlzlEO04ZtE1jCA+4OuLyYvyMKSZWM9UmyXMHSRy62+dtI\nQCY8rNFqMY7iuP89Gon3kcqOUviNMhv34h09VBThl2zhTo5WIj6bdKAhqqLK\njTUaEPicYcDeNf4RToculu7FUjGtmyPWOan3hfDGNg+/o16nHV5lkxjQwrKp\nvYYnqQgCKOKbsow27gx+gnrfzICIZWQ2O/zqU6us9+79gy1WnMBfFk0QwaxC\nYo6mY6s5fTnEnE+zWLWD+V/9D6xFtgSKJ5h5FhzNc58Jv/G5mdehWGVshW49\n1vHPvuXdMjujcknpg2kENu1r6ZP2qRGwiRtpHSUqB7X194dhvUgTOLgpk/sP\nMyphf98RXdRO+Vk1MEhlXwrYYsivR63ZY/rqtaoNP+MFkmYhDJ7xM2IlcnDo\nTGheWGRqJAlMDj+QfU7dcMyl79RNim6E/vuVUqFpPB46YCBv2fIM19oozDPb\nxqTDswqkslA1Ya1Zlzff1FdgvFDDtJLs46uGhtvsyR2wYr80jMB8O1+y94cx\nvO+wTUYW3KdBjzsks+P6TLHUfWF/mC8Kk7CDy+qDe/7IZwglvqiWEplY+9qM\nHE4hHdiwSPXI0Z8zyjptYGGYvt1v3hx1MjTZTtdd9mnFQe1SgebdXZMqPid2\nh/dO\r\n=66MR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/touch-target":"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/segmented-button_9.0.0-canary.7fe0e4f05.0_1607706346545_0.08579401398408049","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/segmented-button","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f24529b1ff7506e7324e300c3cfffc49c280f96d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.9244508bd.0.tgz","fileCount":55,"integrity":"sha512-PYkbL9Tbf/OK2a1PftaMD1Lc4DdZl3NnjGzUUBvFktOOc+vhrT+lldDgd1TgLTuUdtz0dVYxopXXT6lskfm1eg==","signatures":[{"sig":"MEYCIQD7VvmzBx8uAVvgAgXV5F77yzbKmQcojUznjlnQXZGiRwIhAK4KgrZ1WrwAskXZxd06yo4qD0qg3awHEvdAqz/J22kW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08N+CRA9TVsSAnZWagAADhIP/RKIsfGJimuXfJ6Hoh7e\ngGqhy7raXbwcQOTbJEA6bPiQgEL3GMjZn/QN9CZYgEJG9JZ8mVg+sRCQHkog\nblLlmhYh4a2SapjHh1WLHAgEAfxPqWIiPOPsr6MfI3T2IyuBzwzNx9mpb0L7\n2cX3B5Y/Y+YV87fEY5nZHwm1tQhR4yZqf6xZFAemI8p4Y+gwzbYu/Vx18mb5\n1v+P1XcL1zAkhfL/9lPVYf2McxrrCOvzJboDhhGBKoCqSQ2Y+0vqkS128TN4\nuXT03PlvXiSP3vfaV0nvFTWDynaUVxm/iO4W9h8crjP2LOq0RNb8nIVpJ7v4\nPwR3mlr0XtwdrWFeMKEvISVTpdM4qZjygCV/gR96XwF8bTih3fMyHhcLYQEJ\nsmUHkujK+KytBtPmf6e+Gc1HqHPDamqmEJI/tTPE5HtG69vNVHRtohfHlX6R\nwFVAIqLbcVO26wjMYXELMuTB9DCtGifF9WedP/JC535AqwK8SGqXfoXq/D5W\nPPmYJD0Us/GbWbGAw3euNf9S0IOX5SA8fvEAnC0UtAa4xf0wZUllCeycQ/gE\n7JSc+3Q3QYonV8G7FwdOcLEkAEuRZKYQNCSDUZTV3EBqOZrarR9d1QQoFzRt\nYjtw39pQPdgjXr0UdPApqKseIX9gNrvOoX6/zttng6xIiwjNgVSdySINvfGf\n/nU+\r\n=B3e+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/touch-target":"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/segmented-button_9.0.0-canary.9244508bd.0_1607713661839_0.4877516153755248","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/segmented-button","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"00f75db2ad766155d47cfa8a441895a0ce2c11a7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.384a8eeb1.0.tgz","fileCount":55,"integrity":"sha512-lJizVmt/hIovuLCtkNTV7YvKDROmPcMGwg25DaumvtkwgaCzulyKFodp48Z3cwr9C0lHMUQPg+Kzd0EQSOr/pw==","signatures":[{"sig":"MEYCIQCKKZZ+HTrF8MdTvVWW6uXsMuT4nacSyrgWwaiZGDD1VAIhAMQUsFYgIAqMET/DuzWtWKDcv1bn5d7BlqI4P3+FDtMe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2SCRA9TVsSAnZWagAAoh8P/i0Vm4vHMvm6jkcxAjDy\ng/tUEZau4qg3SVrUG6rcewusXGnH/QcgjgPX96B743IDeMCEZWEzzf7NkbYw\nzaMGb+NoPa7MJ2iSb5cHw0K8eY+o8uPXliqYmAscdV1SuI/1qBSouLUY6mjs\nwq0QWg9p+62CJuVxMxvxZtZ7G3myO0yjqysl3DFtGKKZZo+shzPAeh5gFqgU\n/WWh60MD3+3GiwF0Pq3siGm7h+8mmrrOGLFvQ65h/pX72aJ6crgaDFL2v/AB\nbcWETob/AIZsoU8y5gvaTSpjDkX0njES7eLyBWhpWyWbkJZ3KSzkH2TP8xBH\nyF/KksY4OGkRO77LgfLHWO1MqblGP03P8SPUbG/vGfKHkY5/SfMG53DHyVwH\nq5h1muK8z25eGGrZb81SR3cOmpfTW0/9hhsa+ATduvm7VQqQu1S95RJ+JcSs\niArTz80M0PC7FaN05eXUaWctcDHfz72p9gI7Fj4ELLO6MaFBE3hbQLb/MZcT\n4pWxOo9JJJ3aIV2H3U6bUJv+pocagUbd2i2H4693R/utRJCmQgkzC87utch3\nHypsulWxB3DLccfGYupyWeSM++caFSZA2NjN3sQyogm0ri8YG7fZw37wTuJe\n1ENO1MPMZHsycnny+IHGbNR63a3XCVCpPW6L7HO4CJrmhkHnMUPZOoIRijsS\nF8ri\r\n=O5+n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/touch-target":"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/segmented-button_9.0.0-canary.384a8eeb1.0_1608138130004_0.8196225938810651","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/segmented-button","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7d4eabb69a0e3836db187f3fb5ab8d5ce4ae5e47","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":55,"integrity":"sha512-YUnjtX6R4efxaQwiFNdLmn0mnjlqRFYM5luvM92T0hf6ltD1ntuYULH9wdpbLLJFXL6tRidj51WBSiPsVupHgQ==","signatures":[{"sig":"MEYCIQDdfn41cLRAV9nJElwhVpDct7t00RBe1T9vREtb+3K2uwIhAJc2jcRe01MMHfqnhXXI1q+AgmkIYNVDXkzFhsnaDsk9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGpCRA9TVsSAnZWagAA8aMP/RU49g+8jLOPZT+l2wU5\nRqKh87gQxvRiXJPcI/be5EGpf0MlqDv8g6oSAt4uCF06oPPjoVSLI0K4Xq2M\n4KvMTlhFlo3Nu7l446yQOFMpcZ0bZ2neErs7GGgQ2+PvfCjiUfgBrr1vNKMA\nPAoFnWOPVW41xRvZcH2x/ax3WIVFqEzShziajC3472JNodQwa1Ey2wz2XTUi\nL6wQ34i1wlqVxmMK6pY7oEQUAEFceeX18305w8YFbyj+VtfNdEPw8apjAT/G\nXDF4lMKVehuAAL2CF9s2/7Xb6RrqULNp3uqO1IeWWAOmUHAhxlM7P9JV66f/\n7zkvWjwDwRmD2AcDSDWWA60LxEuv20jEjge/wmoQPt4ETTc2DFexPCs6spKk\nBRx4a3W9L5cWcXcDHR6o8x1mGFmItkxeHz6G1b/Mfzf7WkuHX5JoroP6L3nX\nTzTV/hGiVE7hCNYiaAiJEUNOcBcG44RVLXFPMDz1EZHS1yvPukUFRv9xg+hE\nGoN+gtfCGFxXG6dOzaDMjHWUQrnzMhvRJEukoDocqKlgp0UY7P1PXwAyzTpO\nQKwuJnQjxpsjskwcqQS8DDpbfAny13MzF7oOS1tnC+dIa0nRQS82VE9DR0ou\n1a90sBapNpLGqYH6Y7+yg1wP/nkoH6iJcVzxfDhlREXXIz89ZGVgO8ziKvZc\nro/7\r\n=Lu0U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/touch-target":"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/segmented-button_9.0.0-canary.eabf9d5c2.0_1608143272673_0.3048576012456523","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/segmented-button","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"383f46c8799aa7a7ec0aa82a996a096bdc6badeb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.30fdfd06e.0.tgz","fileCount":55,"integrity":"sha512-HFqs7vUR6FvBa6+8WYgRqqH+LZUSgfdn9Sp14hdWXAulFw8yNWvYYtG/b2947mxYbAxzuQcSqTPlVe9O7lGDXQ==","signatures":[{"sig":"MEYCIQDP1DgzYh8kbN1tBwECe1x9QP6sNC/QrbT62KciqNOfEwIhAM/1M2mSLQy22Rav4LUYQhcLe7I6I1vD30F4FaVcKVpr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lsACRA9TVsSAnZWagAAvScP/A1mJrdK2gO2DUB6XwAF\nJU/PkfT5mZ2L46FL7cBAM2a1G7EbZeEOQMBtfs8vAM6NjwMDRWalaG16m9q9\n1aMo6r+q7UKANCw2rgmvTd2pcraHALi6IBeKHFpHImmza8tnm6GNc3z6lfZ0\n8uRqb5u9BRKE6nL+J+vyhLAzzVwtixYFNYjfCcMm80Pf8goaiW6mPMTGcDYE\nSn/FzL89XmE5u804uea6IN6iTKeKpah7XJmLpeNoR4ZSzd0TYr9X1YFTZ2dB\nEG/xi0dRGqeDuUnKNybiW/GSeO+9jwbhkkzNaVhodgqXhnoUjSXIzRxVaI5D\n35/LxKPxFclvT71lBZOkT4ZbQKSwhpgXWFLvaCJA/P6dTat6kLrm6G65p4H1\nlwf6Q5AG+KQcxHaGqSMMQzhHPm/Qi1gjSr/w6/zu/6wbyMBAGA19knF2VG4D\nnS9YNo4n3BQlZSp+XLfWc9yqDGkgElVMF4yh6xcy8mrCUpnRnsTfyrOFEyKu\nt7D058puPvNNwM5Vpc1DeXxjhf14IEw3iSzxmYy/T6frEsMknzQgOWGg6gtr\nsDYjBOPieLi/CmuzEHlOg4r0FGJMq2sAm66pKBVDptg9djcXo5jHgKT274A9\n6OquNlhq8CCHY5x74K+ZaUhso4USbdseA4Iw9CUt/a8a2tJQOuFlG18MGPgs\nRjoz\r\n=5OpM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/touch-target":"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/segmented-button_9.0.0-canary.30fdfd06e.0_1608145664038_0.030027595792719186","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/segmented-button","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db21e5e6842f3e8f27e85b4b78871951f7113b69","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.9590a8f90.0.tgz","fileCount":55,"integrity":"sha512-C/4HNoZPzApPvCXMSPdWsrdKghDlnou8DJcib6bwGhTslxk5MmIA5aWs9HMZk7JSATvr2c6zAnffrCwwDaWREw==","signatures":[{"sig":"MEUCIQC1SA8T+G8qeUMXlk9j6H0H+wC2HZjrdwCKjuyHwGa8+gIgdljmye5QH+PDatnQbP3T8qsj7tG2y14aJF7lcibJK5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/2CRA9TVsSAnZWagAASu8P/Arpub3iebKy4eRL1LqC\n9NkidJMmwLBYGF8HQbzXxhremyb4PwLcbk77Hbdq2NtwzkDgYqLINw5GRy/F\n0GCzx95KuDzBdbwbFIx1wFxtyxZCsvXE14TXck2QNgsrXthQFltE6XRN4IBi\n9mcIFVYGeyOCujsOoRe401gw+9lgUATZi/s3WujA0c9jM3TYIlgizgiAa6gr\nNGXoe+3Ijf/gFP+L3TPiQ+/lgp/fiaA9HxkPTHL2ncs6aKmw66Vys6heghs3\nbnlHDfPx/RrgDlk65VkPBU0v1b5FHtEkbM+KvaiP2Sg+nmTTq9866S9FHioc\n81I5aRodtNf5go0tX8WgW7IkeHYzsYlUtKebx96a/TKJ7VfIUiFUPZnJs1AH\naQkZeAjT1dZoafbmwrajF1ELT8l0ZCyCHRHZwt7sYcXrGY5z6iAV8JRtYcSp\nf9r/5G48iphjpDfxw/UJhwtuR7J1xhBa4NZiwWF6/pAm2IiQVrqjZ2GbJ9n1\nVCKJi+Wwbrcg3plNWp+tSKGLYIrPiiURifjHrAUm2Kwq1z3vR20qitq9E14J\nDtF59SWABneeeb3l+8eEAczPC4v3tWztneU98xH5jG4nvAP26QrpQl7n3rnl\nMIfyxms5LMcDLH4DyuyIwOmwogkcpVPujTmmYMT0n7pBg8D1fHxN6fuvkHcY\nqHiB\r\n=3n95\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/touch-target":"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/segmented-button_9.0.0-canary.9590a8f90.0_1608658934417_0.276742600593497","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/segmented-button","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"424d203c6daa06fab007e01fe5ded0c1a3bd8409","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":55,"integrity":"sha512-YW8mw5VmCxma7fOwrHO0nakd5miYPQMYQhfJvgcnuoO7rXLpg7orJa/FwOKAOFVcV2Css9kR8znSj6XijBpWlg==","signatures":[{"sig":"MEUCIQDrK0TiECWGQVHBgE8hGMZGnO5Jfk535YrDvwewjp+HLwIgBCWjM5S/RsTSoyBPpdhL3lvNipzPNDRLCXqAaU6D0w4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuvCRA9TVsSAnZWagAANkUP/RSeJ8QAhjQULu7cP2lE\n6qC7lmD0OlZqLwLnlHbHywW5zX12aX4CdvJRKZ1Gpr7XGv0tbiVnEoCc4/R5\n/UrvlSkXjIMSG8TfbP/L+cShh/pILpDVHPKSxcasNl8Er4QSjKMFHcqQciZV\nHModEUn8eZOvGOuMKYpD5noua1YJkPxlxFOhRp98aT6LFkYgqirr3PJ14YL/\n1uBoZCg9hv4N9PChxfOcraQvCP0//WTvwy9c6hdJJGbz/pr4au/BWNRkk7LF\nhDEt5lZkn8knw+UVQy5Fwom84xKqz7inJ+Bc1/ACVeJI/QARY2851MhugGPw\nKp15O6a4lkIylmVpZzIeSNABDLpdENgKkWjOUJtlbG0nfdqnBl9qrGtTKDG5\n2yaFMxOEGUgqcFN5h1tYP9aZPuEQo9ZUx9KXm7Nv6OldxkcIQcCPL/hDjcwz\nCEsR1G8skRO6SuA021QC4OpX4xXb3AVdeiJjv/2RAvdJ+9LiIQedfqG4O7uo\nAaX7JvhHxC4Z/duG9UYDzSJisco6+kkQkj/wsAsyFcB2vfstOcTNgPBixzaZ\nrlfUUuH1MXKU9YiwckHeozDTcjXtcdWOqzAmIajBVrXToi6vetvdpAThJRjL\nNJnZ26hWIkE715TqNtyePAZZPqkPta7afJ9ickSuUQki0UMwbKHmbbpsZee2\nSgbD\r\n=liyB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/touch-target":"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/segmented-button_9.0.0-canary.f89d8b8f2.0_1608678319383_0.2686993195863989","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/segmented-button","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bde5c337f4a3e19353986c28929c3a280c0690d1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.fb194dd35.0.tgz","fileCount":55,"integrity":"sha512-NiSPqQj+TR3hSw8orECIXM3hs5UxESeJWbu1rQ/0ItO/ooVU20R4Ym9o7if4VWJWsyK5Efqjmrp3CDMsiySsMw==","signatures":[{"sig":"MEYCIQCA4PF7uEz2qqfZMyQ+x2LUjgrhKisrrlQsl7nwD9xlkwIhAP0vEYKCxRkpdLOC657sAxwl5gpbVuGoVZ143vmUGKG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQDCRA9TVsSAnZWagAAEkEP/jbOIkxfOjmzcCrhERwV\niKMCvqgxvZ7b64ozz3a9dVSvAJdiBPv5PNJPVX+p7hGVL9lXxRPAw7LciPGZ\nzdeZoz9k1dk6CxheofZDXoORpKySspSRy9LXvMAAchkAcG00OaBx88F5amt+\nvi+e1UtU+8Gqj4yuAIkl6Q7z5e6GycdM2oS4dCD3XnPhVEuNZzRMeCFzqu4L\nZh0dXLd+rdJWtBoERZAK3RVCkJ27qTECpl+y4GV+Z4F+sBI6DEsgx4hig4Qi\n48UqREB+0ybpKtWM1cWvqL3RD+u774VnmIpvihozTzxcqKjA60tAljsEyqU6\nvevjhGGcQU2K0xxCOxVttywKcu4cG8prNjGW3OVOJoIFlPO+yX0o4iqnzoPi\nNUaOGlADEOjn89Inm1rpW94VmX1hECtmmZ+a9oM8lqLS4K9zDZq0pGfmn8fp\nfooc5NJZchmLzLS5PYhRCLhKLrqSnXAnvCAn/lhWzVhPi43jGc/9ByqbsJw7\nkqu7UEMnMHtH1onCDiSF/xcAcDFKTzwI75nBiq0aTW/2pwA0u5K6jln3PgYk\nWcHEVaptmZXMl9mTEcIJulotaNvhnWzIsZ5lddKj7v28i3rOeBAogcMUbQoz\novj/oH2ARJeCSvnqLB8rjFAGWPRs8necqWjbMaBo3aVkfScxxObVFgXNTy26\nmFaU\r\n=Dqm0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/touch-target":"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/segmented-button_9.0.0-canary.fb194dd35.0_1609188355304_0.21098912229647726","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/segmented-button","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2dd61049b0f5a8bf6c6388e3c9a271b181abc52","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.64f36e287.0.tgz","fileCount":55,"integrity":"sha512-P08UJWJ3csJyTFycVQCbKhInK4l/zAA+fwrQoYmysbbJVci+/SISbhUAd3sg72LdX9jHHJ9IajGBjLNfFEe7RQ==","signatures":[{"sig":"MEYCIQDjvGWVf9ru0/+hiVz3F3l89zcjPs5f99QzY1pvYjDOugIhAO65c7qbuy7myXXq4rHceMa4iGyaM+gWQ3LVmVc8MSDg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klcCRA9TVsSAnZWagAA4YEP/juJcmTik+jUn0Gi2OqT\n8BW/b1UZXkrq3bJ15vRCtaXnmzvd8txKzE9tHMv65v74wvCbsZtelCxIF1Ei\nt57Zk1J65qD3qk1BuTJvrJEqJ6BJbM35W7cKMcU03dXQLFGrn4r10vOpgbqS\ne6VOVyxFLDkLp1ITuvxZno6USaKWW2Cup0UeBjSb5L4scYeUbNW1AKp8x4nB\nI3isOUrURQHRY8pgwzBeXTXHx7d3o5C8o+dRZb2xeTi/BTSHBomK1/gVbJop\nLpUAcI8tv6BOW4D/0R6nvZXqZeESJ+s9AuvrPJFqkiXNiDEYADqFiGVWbJjQ\ny8ZwfAdWQkaSD37BUtABUmaGyTUd2NHCn/mutyhVgizZSfxe+ixbcNbjTXXD\nOpvi8KZOaQ6UBF1f9FUDz4cLIALZwYr30IKeaYJWozC3kowrUzn0M7xmUPqC\n+ljhzh6wfKEA2owU2LDH6pFR0LCb0wqNDRwqLe64c8UIPQTWYrY244vFkw6A\nY67iySBvjahIDM0oAZhuwM6mv5B+UmO+in3eZ/e+P016Aikv6q0i9hGEhnT2\nxYAZnM0Kns+1lpB/eNorG0KlrylPvPjgm2oCmzbiyntMUNjJLhc6zmTYfGJS\n+hZaEnAaYtjxklk7f1ACrdIxgfqPI52XZYW0DfUwlpcp6v9EdEc7LxV4u4ae\n3vog\r\n=yZDc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/touch-target":"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/segmented-button_9.0.0-canary.64f36e287.0_1609189724544_0.021768300082896985","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/segmented-button","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ab50eff6a208e304fe1ecdcb18f3b81741bb8d9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0-canary.b7bbe7022.0.tgz","fileCount":55,"integrity":"sha512-1TMxbn+azTpcXBUtJ2YAP8ELZdPo6/nOZtc561yU6lgDn6jkxfXR0n8UDPAeMrutCL8kej6F7TmpofQswvdMPw==","signatures":[{"sig":"MEUCICMJUXSgoLKdceZeyiW3oqgDIEQgEpU7F5mtrBh8+oxrAiEAw17k5IU6x2vMaaA+MuMSQOJtAk54rZX5J9aQRBNG/zo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nwCRA9TVsSAnZWagAAp00P/i3kdFT3JmjA2zwPpyKb\ndS9pBrFwFXmvY2XMi7insy8sPNvJjSlkAs+rcqtrHjEFJYf2RAkMRFWjEshZ\nM9fxVZs5GkSEYyi5/j7JCkR+3XZkPKsq9qrOGmvTEEDcScnCU54eZDyGZdfF\n/kOuzTfoYmGgvl+R0YnKmHlySIhoAJaZ/nMpWnpfzPuapc1xKXKQqvIVV58o\nka43L+1Kp/V6cGmltsnWu51nWQrBeeBe/Qv5QMgiLyyul57QGQTFdEbxaSIb\nvaJIz6mFq3RGOSYkPCRh3tDkrKw8JgMvUv3ddvmZc/GGxSPeEseO9R9SphCI\nRHOsWDAQsfE4F4El2u1L4ZHwPJF6Puw9ROv3kbI+XFFNKRz+aV2eczfKB706\nKRzCqvUr0o0mo2mVJCaAI70djxQVr+srOzScGrcKSuEq0I+lanIcqZ0xJukr\nwYaW3D6t7R/6texe13pTGwBYT8rJyqsFEDz6Dx9prZiKUajJISL9KwdY6B8Y\nQkAXSlKdUzJEHgqH2Wi7/q5OK4iDg7s1xYdVGmIDrFdgzkE6dqWdBWOp+Q9J\ntEfcJr6qcnElZ7CrMsdv6+thxpz4GoJO4u8ieJGdVBlrOkT+Zfq3bssLNvgS\nTaS6diF30fq6cXwZnRFYSmFP7prCZiKOhx2mJcXrLxTDAzsBhEcQH6VSHtjo\nxC3i\r\n=iuPn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/touch-target":"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/segmented-button_9.0.0-canary.b7bbe7022.0_1609267695624_0.6838157726355398","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/segmented-button","version":"9.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1808a2948bd3fcdb19a0388549f8ac861f06f7f6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-9.0.0.tgz","fileCount":54,"integrity":"sha512-vALiAo2VIGm+5Sd3QzVyZZcdW3Mn7XyadErk9dG3HXt4VNUBrvK6ltRC4v2CC/RF5VZ85MN6r7yoqB3G1PjY0Q==","signatures":[{"sig":"MEUCIGSFpFfmqHB4/koTVhGEAZggZLqbleQY82oLFhitmr0BAiEA9ajh/jD8hlPLqdskn5qO67j6fJ3TuRRKmsck5KbH3ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64eNCRA9TVsSAnZWagAAelMP/j2fmECXSukbLzLnqG2p\nP2MmLVDFnSoowStWe8elPULKKN8kVhcpVA6y2RMJeA8yF0CkcYR//KPEJ7Ki\nJujcvhLdo4wLo2pWho7Wwn7mFa86Yr6niFANTszgFzTkPXEVYVeJJm3eHN/V\n4nHjhlOzmXIaU+RFbqHLmi9EZUJbsOls+GI6V9BAO6NXn2kNxhbW+59RXkuT\nHmUwpgTG4MORctlytXur+xekeyc0L1dvJpnsCK84FK1NCGU6vSND0vkAmuPt\n7bgKwxPe02ML+DwgtqkeFQExqGvdSv5NZVlHfMvhf3vowG8J+JgDFmjz+/Ot\nFIvEnKni5fQEmvMF9FExdxaXeThCV7HYXOChWN5V5uNv9FYHHsmPm5xFE4L7\n3MRBNsGIvhHzF0fWSdu6g+AC9hJ3kSfs1FrQXj3NlxyNwDoLAs6yjPnTuETH\nphoBxPCaQUNc7yEy94MpI2z+suo/XQkKwnEZt3jpY5Hjf0xT8Vg1LRW9Ds68\nYPw1uieZWS2to/0pt+S3XpvasdSACk6epJyxcosraGQseDV0xt2HBCevTfEl\n0A61q/33ai8a4cHkYFz35YGB9KpX9G4sq8GCozky0kl+rFV8V8ox7/7QAFjN\nyIENRH803iSR7NsbmkyuCzbPnfDCQvWCV6n9+9b4Na2ZJa4ao8r6AZFJ4g28\neVuJ\r\n=itBe\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/elevation":"^9.0.0","@material/typography":"^9.0.0","@material/touch-target":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_9.0.0_1609271181020_0.4859433355603342","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/segmented-button","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e0a6d7d4614eeb620614e20fb4c2797a6fedf89f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.776c18681.0.tgz","fileCount":55,"integrity":"sha512-sF5E5kmLggUzZRo+iiOhI5i5ffmZTtu27NrFst2YGdYGMx5geeEavJ1nq2hoP7wb5dWcsrG3jVl/DzJNHhLNGw==","signatures":[{"sig":"MEUCIFlqEGgYK1YF4ZAc9eJ06nQaGDhiZ3qjfTTFEA6VabdoAiEAjGNekwJmVQCoNojXezjN2ljgoadAkCqBIyeNqK2Bbi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68x5CRA9TVsSAnZWagAA1BgP/RjnZJTdTls5JjoRj1lU\naB/7G2VT4hVm4+FykuQ0qUtopQCIfYBmXy16mPzKQq8W0NxRM5Jf2kWzOTX4\nHF2fsNH4/es286XbpYTjMaS2lwIKQzzATiAJkoLJoXassAGliu/CVG6hM+Mh\nmPSn2BkWaHkN6VVnRYz4DMsdkQhHmXONIKqdz8NLmdueSjTyckLI24gmndbo\ndSO54SXmiZT2T8gmu6EyJahvxZAKrf4XqSNlQYVyGkONFFjD/C6iJHaJRDyW\n64muTcIXSXzvfuAmDG/za3KH/TYXaiSt2UKVGr67T219dunI4UDmh2pmqn0s\nXLODqecucDS2Zzw/iLmCjlImBuBQk7es3kbPtseoepRod1g2uzegSNA+PNna\n9YWwec1B/RkQmdWY7SK8wzJVsO2T9bTxB2Dt+XRowTBIaiKmFcfJF/iWxk3E\nUKI8W81TgC4Vv7dKGd8f7YrJmiAQ5ZMW5Y3tacNoAKphxUOLijuaAKq1GgAP\nJwiNsyhZobjXb7qUzIJgt4vE4A16zCVwPID4K4b3xK1IufEkE8QuYBvi3f5/\ncP+0pgAccIQqudRtVLGiCQ+Vmcx7915BR/5sBj2mw/jlKDwHRkSsCRHmxshB\ngE7LePblwuQhhP+50YHNxnAXXwbzB68YML3a7yp+wCQXoKsUqHg9GFiKcn3S\nwiZw\r\n=Uv4S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/touch-target":"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/segmented-button_10.0.0-canary.776c18681.0_1609288824498_0.7127093934073696","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/segmented-button","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5c0c76a090f4ce5ef698d99f8917c86b8e2cbd0d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.671d72d95.0.tgz","fileCount":55,"integrity":"sha512-Zj8RANFC9wIzMWjTE+f0wxtdt9Wnaol6GRvt9mpFxTlNICdp2pip+DcALMDYZY7CotcBPAXajaTm4hZ2b5DVnw==","signatures":[{"sig":"MEUCIA8n7v0NgHDnWBIOVw+MeQzOCTkWNVhHgtQFlcCDwCK0AiEAj4cfDkBQEdNvpVB/7v9xDNfNi00kM7h3lwvQs1FuhR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8ZCRA9TVsSAnZWagAAPZcP/0LdNf5LDqYN3dWjdCn5\nJyLOgd6tJtBkOeBcnWe7E0qBNKoypPavLIX/aZUIcpv3CZiidCytAgDQzOii\nMt6rXwGXmoyOh4KFGp3YFGlGkpnT8tY1EzZXC3970lFThR6+B5wVAVle3xxo\nPTwOxW7Tcn6YDYnSllzJmID+XShmHM2KALlg5HuxodUe9ocoYB05t1OV6USL\n/UfBukoszuJsX4Oh74alGvhUSL+f53xLNntAfu+jF9Yl2F7Lt/MQoWKE0jCu\nvVMA2HXUiU1QCFmxdLpOlgoHM0STudEYNWikRg4kTSuUoJZB/fzOAJOqkf6I\nv+dCAEHG4Rv069FSwD3ks6IvPZhYC0mB3Cbjj0fOjyLidfsgfmub2jHNHPs+\n14FhHu2A/AOC9DrbueepLaRUYfpvnpAcbB9OdB8aOvi5wz1kzxpbFyocbX5N\n74ZIF8CsDQgjzWazpLmvH/dMBZOid8TSuRmIJ5lcjNfLeJoccp+aSZ1k38GN\nR3zk+Pt7ipvXxVzWl4naf//xpCuYyBMdBveQo3hm0y4qb0+QxI3AjOi/H909\nKkIEcZ1dAOqzkCwTbPYow636IHkDKGhRUjXZ9thpdXwyl6tfO8hEnwDz2a3Y\nLl18XNnpcZAHl4IvgOKjnnM7mNWO4L3gRZOlwE4fhRanDccRisP6xXFyW+by\n0JtB\r\n=8iw1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/touch-target":"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/segmented-button_10.0.0-canary.671d72d95.0_1609359128814_0.40552287267369835","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b822ea3e2c8a3ff72adbea61914f31f3e73befbc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":55,"integrity":"sha512-/YImCi43jrLntFO6VnhwodvETRK9UPW1fEKCiDJYCdjB/3iIvJ6WbJCB4RpjqiYnKRIQAKZk3/vCFuA5f/g7bw==","signatures":[{"sig":"MEYCIQDUCJbZO5Fc1JsA/kxxBmhzA3ImrfZZV9VoOxM5xuN/JgIhAPtEiv3wEkeeL8OZd8Fnh60QopjJmYIzB2GYIh57ITWo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVECRA9TVsSAnZWagAA5OUP/iPrevwMsO7cCYDzt0K0\nALB+iZrQrEx+JL3WotZ7vo6rkMaxwCBQx14S3MTz+HuaClWsSdfMhhTsEQup\nFjTcCsmzZkmikAxHQwEMWVI15tfqAp1DnCX6P1GoA5jBg7X1Ma5EV+yiyq9/\nOmmh628IameTNhvRstwEH311homZMmK0WExuxAlInboj9mDFJtuUSUUa1GNN\nMfKu1GDNWWJmsHE2X5UXY2wFIcxlrK/bZyKej06j24NStitQVVnUb+VpzCY4\njCTZtfzUVbjhFcchoxrN+UbhYG3z6LGj0M15upob6PwAA4Mg49HRljjJV0qh\n1ShFIOKVqegfsZ1m0mVOpoSvM+ZpkGok+PTAZSkJizXpQjsv1yCo2eDUWbYs\nfkRdGo7FArpmKqrkVSyX6ftspFa9f0bpNLk++BRXnzY2G2JoV/+ZR2qg3C4Z\n1dpFnMHI2oh8JxBC0wTos9ofwx399151Y7JoZ1SnpRH7J5E7vd64RFJL0K1Q\n+FFmCL7uwdD72JuoM79jzwMve4r3clKLOCy91NcZEy8tj/lhORRDDl4QwFyz\nGg6nFg3FKu8gyKOI6Rs2upAxRDsrvVh3+AuQs3IUEQV0cxW93tYRH01qVv3F\n20dPEsNs3/LvbTYmKUlsp/+3xbX1Z5+jore1FLM//kkpaaOZDv/dUZtmm296\nggqG\r\n=QuoL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b4f5a1c9e.0_1609364803664_0.42676190596194585","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/segmented-button","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7d0c364867326d039fcd6e795aa43cccb87d5c78","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.a94bd8deb.0.tgz","fileCount":55,"integrity":"sha512-H67Y6QwpPQoqHIBcffnOk/Wi/93ucGU0SkNLBgOggpbVgI3/GBBsdP2SP+drl5vJwjf59HNIGAHL+7kAEY0ThQ==","signatures":[{"sig":"MEUCIQC6k1s2OZxzqYJcy1KMZfQYvIEOZaiHZkmFMCyDtzV2YwIgFrF0RGQYUOUlbfVqd9y5SDRcHiAlJNK7Wp0l8PcpkPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlwCRA9TVsSAnZWagAAsXwP/ip6Ddg671jvdLNoNhUj\npXSgi09J5/4JL29Xmm+xuETYfE1TGf9Sn1azEeiwSH7dkTT+8L2mfErGWD2V\nksuLdjPJBOu75VlvsIYAx/zsJFDSi2GO1otbe4Ab/HPSAXNAZr8P9mhooIp4\n5BDOv3XsJJH3ZTREdXN2sgxhentkmQC6p1MmTqerNS7yiKhM0noR6MQq5P0R\njPkOXc76T4uKQ9PMe6Gh5OiBP/qqxU3fHyeaCnqBrKkjXxcUUNViQYIfKwtX\nKh/4I9FRSpSo+CDUN2NfSc2m6L0UFmf3z6mHUsL7FqDqoy0wY9r3u6jVRKjE\nBpG1CXXxJeRU8vcAev4yN+fqE2bgPGVi3L8PCxlSUr6skyWCrYsydlH0b9FQ\n66YhQDZo76e1IaXe6f7UAGr3ojmoqezsZRKigK+FFeRcvJ8PmwF/dL39BFQJ\naE6oW/bbG+WYOIEW9a5TI96Pfm1mv1GkiYiWRuIMlA5oSeUiNEeS+MrmDIDW\n3g7g1YEYvGs94N4UlgRJ23jPDrJI6Yo//b9eXVs+9fQbkPOJAtHxg4ihURD7\n5zR4slJ2j+mTtiVBmuEOihtOIV+2akFuP8GW07pmv1AIs+heNIn1GtqeLBdO\n+Ea6MaKkRhMQGZxCmCLLK12cesAb5sKAySL92xzgE1yPfWGzsbGRDMX38hg3\nkdf/\r\n=aTL6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/touch-target":"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/segmented-button_10.0.0-canary.a94bd8deb.0_1609365872261_0.6647198093408351","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/segmented-button","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"482b4a7edb26ee24b51fcdd7a3483200091653f4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.5d128511b.0.tgz","fileCount":55,"integrity":"sha512-h8F6VwzQRk3Vg6iq+XIcTpgppWVp7nKW9hN4ycoOgiKPow0m4bYwZRLZ6E/gVqYwjGSXZ9eH0BuLmlQojOlWig==","signatures":[{"sig":"MEUCIF9C8VLYAZN3QFiTm0mK56dXkqDQrrhT/jIOLgJuS1XKAiEAmt1t6NRFh5nE6vkAiUKEhZ3aWf93EWggwf136apkZss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pq3CRA9TVsSAnZWagAALa0P/1kn+cyIGXBAVhu8MC2O\nErgNkIyNXhAZFUjopIpWNP25ZpZin6YQ/eakCuVPFzNgRQ4m4iojeuhkP6PP\nDycM3rLNtO5UpMF1MnzxAZMQBNTJIHXOHT1k+7ntifsQanxXfN8Hg1jF/ONd\nZC4OYjIVVOz3AvsWmR8MlhAEbSnD5ML2IMO9IhFNiGEXTA+fqMip7LMDv/xf\nyw0kbzhb/368WxwdYRL9n3y//6wWNA/q0RI0Ybn3H+hPp1XQJjnhZxsCMu4J\n1HnwwGugg2j9UxfU75fHevaB64HGZB+wKqmMAgWLw5zU4IM43mdUNzghC42h\njXq7lwzAI3u54M7gcd545p3iw5X5WZf3tQ/9WL0ds8ORn/k18zZpJKhzK1Jk\nK09LIsnsFprL6+rAhXHfeV+/9yWpR2H45HCrzTjKWRiaWrb1qEHgu0/U1OiY\nAaSKwY/yuVFonpCHyKzVHrlKMLO6aeF2tGT4GS7uYK/O8y8sQmh+OaFjnTjU\nteZ1FBJC382StTX0lQKk5RYxTK224fbI6CefJ4TJ6KRWmANG3Cvck1NoheB2\nXys3uALwEC7fPksuBYNvBiJNt47DazgfpKwgvyoNZhLvdLu9RP9EvRvd5agd\n1+YDr0ADwG8ZylnZHgoBc+yOsplKKSe02ZBTDkJmrq1F3jarSkTlyKP/WmZ3\njgZo\r\n=f3xE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/touch-target":"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/segmented-button_10.0.0-canary.5d128511b.0_1609366199277_0.3247126046746729","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/segmented-button","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"02f5606bfa962ae8cf59d70f7b61c694b4e48d6f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.365c69360.0.tgz","fileCount":55,"integrity":"sha512-60jRHDugdcmLVxOtbPqFQKBqz5XPRnrpJrvCieB5bY3RcNZN7tvOxYoNVW7jMRAhU1zmtkRZ5qhDMjRxrBXKDw==","signatures":[{"sig":"MEUCIQCwbduQ8voKnFla+raxYU6XD0VpQ/xk/EcA+BQwGEpo2QIgW1rVUtgnqOjQQfNGZWmRJDhZc7XBXDQicFqal+sZMe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZxCRA9TVsSAnZWagAAmZUP/0DqV1LN2DxVI8oJvehl\nbNpQuj2bq0klX0oJB+CT8KVk+V/ITI+XIIXOS5ylEfVOxu2xnwylNkiVuMcW\nHQHQVNji2lGUgMPm325/L/i/x2hCrF1cu6z/1wQmjxnSgQf5BTc4QRIlg01J\nsmhlN19LhbIsJcGtnw7hSO+8SGpjIzofUXhWgnzG9SSl/7TreTRY93OGj12r\nE+w/GdsnZPmk1M9LQc3uMOgK2rPtawlIw3bcYT17wVdc5bbBHvbEdBDy0JGW\nyd1Lhowy1Fn36k+ZTSAOHULiUX1hL9FF+cY+9GgSIxYkuYdGuUQd6PQnaXuI\n+Dhr/9e03hqQNBJukYLdVUsCaytLs+bMhGWkT0mBaEfimaw9hVHigGYa/Hhw\na8XD1ZDoc/Uo2bjwwWPDKYA6IT/DMjwyqlrFsIigj9NVueE6zft30sA2jneC\nWnlkjAD1cQBLVugD3O9PCQ0cJPqICrpBQAhdcrJCx3Ls2s5mdUbSu0x9kp6x\nPwdopvuu8IrVKDkPM8rdAUXqzecp3mHdOWA6q5bhrFVMbknMTws4c0CpqRuX\njPpxF0UR2xILfs30ZsEXteHVnhbSpEktkCgMEz2+LV1DdW6m9M0c3u8+urOn\n9E9sgDL9ikwdZ/jLWZehW8Ph/0mN/vRMIUo9om9F3CSmtgmUK4jL957lHvNs\nvbf6\r\n=Icfd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/touch-target":"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/segmented-button_10.0.0-canary.365c69360.0_1609868913423_0.529850558134705","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b09baac093b20708773cc9d34492692150f571e5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.700a8261a.0.tgz","fileCount":55,"integrity":"sha512-OmE2lp1BNL1Rg18+y1vJCPXyO2WuKYsbuv0erUDqkR5J7PlN6jWitbG8go1GCaaAWa9l69Re7pslC0GSpXFEIg==","signatures":[{"sig":"MEQCIAVg8n7InQjUqCuiBvqnNTuYXVFPlBMa4CoTIQ6brPbBAiAaCjzYHnHo3gr4y7hIiefaxvNCv0sF348i9hbB8EN7rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NODCRA9TVsSAnZWagAAkVUP/2rwXSuYwBsZTWiJhBH6\nb7j2BMkVs/Of9xFtgEUnOto/aPaBuicIvM5igboAfNQMXR36igc+8j9Jma81\n6Bs/7shq2uagETEVFR7nSGvOLSr1I92s4LDQ1TXhn/8P0CORP5R7G1po3WSn\njHD1m2j4DjWygCC1xpLEfwnzEdtI37zf3c4zVvXif2mH85IV+fUxQq9mqO5t\nmP7wkZLObeu25cosX62+2DuGwKH1fUO/Kcjffy57BM3tspBzReEgwHbVQTUj\nKn6pV6jd0p5TfWXbBDFY4Y+Sz3ZwDLBa4WCWQMrTmIgepYNTQb3eugPc54wS\nkUD9ylXnIZGidy0IWTZVbYU6I7crFq/KM2hkJIgUbZzC7xU8XKbFlFSGkLNl\n2TmVUdJNCcdwapacdhCiVTfyjMjNWvJDeVfqWAE6xuChi2v7WVPN92lfZ7Rs\nxcGbPcX2PpXlou3iiL+vW1IBQuwVZjmUpjtz+FWLEij3ASLKjLWFOg1iGL1X\nDLvsRighnplBjPOuRm1EpztfgcfTKjM4D41noobFL2Mpfo1wZSlXVsQNbNTh\nm6zmUIZXNy2kw2g1HQgplXyK6PsUKGUB6ur6xGsdGWMn0e6VNImipyvofoVD\nGgBNoYywxzIHAGHrIhKmVvEuOmTq2uax7ERgi4jgHgLmKT/JTE/Mh6W8lpGC\na94D\r\n=vq3o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.700a8261a.0_1609880451412_0.11857092068335828","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/segmented-button","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8badda07d4e404b1c274f5fe4a2357f60d4329f2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.766981c15.0.tgz","fileCount":55,"integrity":"sha512-evYf1g1nStNmLTU/NToJu470Txu7xGIKnI9LyddjXANjVU0W5OJx1+gvY1YPW5Rt+hDPxeSSlx7grerQ/sdUtQ==","signatures":[{"sig":"MEUCID4HsnoYd8HlEdi39UTdzE8+EvYIdYRzpfilYvNnVAxGAiEAvTVDub+2YtvhMsFu/wgkO3D3CMHSPRKn+pJT47YZbB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OriCRA9TVsSAnZWagAA+swP/Ru5SGXTM6DaD2yrs3IH\nHE8Er/HeGZ212cWGk0ZOVoPbNCEXD+GmhHXQIvc7N3wW1YNS09QcyMh+JKFo\nEcRWU1VJfxg4hbZ9bEK5EEH/KqZpcyUgPeM5PBcS1OrToce3iL3eKeNG0Mbt\n1EF8bAyC4RUouMK5AQv4/xNn1KCChWdjp7fIlAvmcDtwQBxKkXXvjm+tchIL\nscY8K970nQPBlW4VH7MgQhpMsGHuyODhs4KBOgP//NhDwSH58cz/u1MbmdMq\n+fTwt874z/hU9PWAqvNX4FNy7wgvSsWzUo4YlyoM17AcNntlwmk1MyDUuVD9\n3g80nfHihPsMmKaQqS8U9tB+W2/zYfSXB5KRzAPs6oIVNG7qbNhmOuzwBpMz\npffkg+zXK2LvWDce3WcwCIiQhDcHbHOZT6KnNNnCZMQZXSV9t6H7fQvPCm6g\nz/Jk8RZ4uG6VIgr6lnFOO1EygtYQdjhAL+ggr8K9hSI+r99A8odHWNMGIq6n\n4TVu1gandO17ygUOAG96i3EaOcMHiPUcDkNqlsl2medzRUuwr3UuXGva3qUS\n+Y4eXaRfaONTdG/WyAhq9aqsEzXl4Ha959JeGk97eETl8JzuDGo2IEX3UDg9\n6Y39zmlaWC16UJn7roc0+qNgPaxUtI8cY1hAAKqp+Gjl/kBmcMQk/yId1dpq\nsrs/\r\n=48G8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/touch-target":"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/segmented-button_10.0.0-canary.766981c15.0_1609886433784_0.9467504956263277","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e06863f6c0e30700e5034503b36bf915f666c344","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b28c576d9.0.tgz","fileCount":55,"integrity":"sha512-O/NK2mXsBbfp8rEbCiBbahKO9tIvivUlliNjXUoUfsBtvomqHna78KceNqaxat+8F3YAuyhFI03JztkxKij07Q==","signatures":[{"sig":"MEYCIQCOSAbRs+unSoLcb2gNR8uf5IW9kBb++SSwvjpoKM4KRQIhALNxxU6ZRq17ja17zj3Ss23ILho9vEcZ5Z3X7vjbMnvF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0oCRA9TVsSAnZWagAAo8AP/iMtF2obl5bp5Gc8Nmw6\nUj3BetcBJFyu/GlKbS8+68BR+IhYg5GQ+hf8UQq7WtUC2IibAF05rFe0jSjQ\nT7u4fzBFLky64eMSfX2sBKObabfeATeZvTPi4u7T2QCHCv1K7S4ruJPvXI+n\n3FZerkeRlzSIE9gyM/xBIZAuHChwxG6MIILU9llBp3sE22baZXemkWY9S1Lz\neY1lm0gvBSVpqc87hH2m5ak8WkS9bRMA84osx48/wwbQ2XCSk1Zw5Fw3YF2A\nIzF9Oz9nrKb0vJcugBWY060Kb95fLO0mEfmdeLatCabwv9HyDP/NWv6m8iQ7\njEUOt96gfLdEBCevMcstGQY7IJ4z6khyHWkhgbzRk7kvJmyZyFyMXK5HbPJB\nms4+Tg4w/m7drTJki5wJXYVBRPFfb9gezjRbrbW7FNI1connYmh+knhulxvG\nVvESJQw2C78dCIB1xsRMQoO7jc/UZ9OiDGfT7MMeLcg40otI3qjwo9HgnudH\n5jlLEBv711PYUWD7vhf6V5/4/x6AcKCBdygXhYK2WW10i9mrrP8ROJlqS+Tk\nAZLQFSDf5JKj9hjn8TpGSeOJCc5/idtw3tZs1Nwe8fFmwCoo1GG5ZPBN3wrv\nhkpT12xblTG/I6DsJ5BlMt1ufrsrKh+iUFszsWcc7o+eApbBeKIj0XX52oEs\nuw23\r\n=Jc1g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b28c576d9.0_1609887015273_0.7659898584418896","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/segmented-button","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"79407259cd1f31abcfd77f4eae554a1dfdca8485","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.968735356.0.tgz","fileCount":55,"integrity":"sha512-PH/PqIiiybZChsgsEAydGAPD78q6jk2r+Ien6+WCEH5YJ7Lpoea/qusxdI+4NbnvzVVL0FRmGB7osswSuTPxAw==","signatures":[{"sig":"MEUCIQDI9cs0AD+QqjDUe3/1uldR/leS8964dqu9WRX9Dio5rgIgayAeRo8hzQCZl8F90spzRM4MHZQ2s6rT2t1L4DXkjns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxqCRA9TVsSAnZWagAAZhQP+gIYv4zwdo8Xs6RI4O9s\nxxCPcg9r0pTWKaWQWybN6/AWw58trSxCx8a51Ze0E7NvVC9JfAU7Q1Uyctev\n6EMeppYhCXTkhLIvW9WOx7Obk9HuzxZXd2N3XEp//188WXfehSZjSWlGHFi3\nK34ncxg4KxR7mlXNm6dzROjje47vIHApwmPKEwbp01GYqiwZHaXBMX5aVN65\nsIzcAvCEMc/ddncfz2D4kyyRd1qlmpTrdDK4EmpzbZ9l8fjg182qTtuKVE4u\n5UYyD6n5xOjyBRj/J+gIDTgmQ/Gem+iLuPo5OCt+rrD3CGptSpAG8ggVP4gG\n16XDEgUTgFDNpwYLZnUX+mCfTurfsCjh9bBQQOKXaHlAA3ujsXHIOpQNQH1B\nd9245rujyo8wtgDNua2A7v9bTGeJoHTKTWutEkrJRv7DGVhgyLiuv9pYikjh\n71elBFH5Mt8/04NFXxm2pyJC9kYbBc6Phb0B8iwQ69dah5PpetxJQf0wL4cf\nkoBssbWTPY1trz0EEpVRag79re30BPIXh95iTuR2c7X+KkPJ618GtnNUboS2\nO2a5oG/tMa/nPrNxRmm4Iqb0FitBlAWmpcjIkDV4ToGSrnArVTStMA7uaLHR\nnbq//OX9rW0Yz0aJ7xZENUvwC/icT9LvNMEr5UJDzB1oYGuRfl7VOmTy7u9Z\nZ4hc\r\n=XmBo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/touch-target":"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/segmented-button_10.0.0-canary.968735356.0_1609948266010_0.25239240998389656","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/segmented-button","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"352243775597f0693344a65520f5bf30fc66f914","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.c5e18b020.0.tgz","fileCount":55,"integrity":"sha512-duMTURq3+n5vWiUDNdpUX/bLUJHwRqCo5eSM30oEouu11s+906504CP+FtPx/TecC+q1vcUZehuarUkfs8/Nfw==","signatures":[{"sig":"MEUCIAJgwM8cOz/J2KQOrgbQOeIKilqXr46XwaAJr40PurUxAiEAr8SLgBOjYJ/lLbVpHtG2Y1OSN4LoGRvkpKXSdErHk7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMeCRA9TVsSAnZWagAAVjUP/AorfUKsyExnX38fPmlp\n7iQBbkPS3agDst466jnPbk/I3OtLHDtDwYgURPXqpomhaTNyNxoN75f5qZ6B\n4xaEiQuCaBeWJy/YcK3VG/CwEaeRhz4yCPBbjgWHayTLGVteuZK2JGoTbaFM\npQpcwW08NZfvFP+sRWuZEwUm6Na2Zt/bwTaKeIM/O4DHeGpa09R4q5QRHkwd\nrueYb2NAykvVJYCWnFIdTRYWOmRzD3RLpB/VQtK4cj1KUCI91MzCYnJ9BFsG\njByv2KVj56aCfGGOA468yQlFlrcDSE0aUScfIeUWUK5Lsi4CNt/pw+Zqu+hT\nSZGVBEirpkz/TYbqUs6FZsleOTNkwIpbw3T+IrtteqI74sKlSaprx6XWQKgv\nhdOLAwn4cmW28hPJs0pe0XxWbmMG5HA29zLy4PW8SCGxZOVf0UCFDVSM0XE6\nqBbWZ1Flym8WJQMLG92AdTtC5WWDOo6w6IuIjnVz9CGM2493drMvdduF1Z5S\nRSOoQnF1qBUlUdedUIVBF2GeerfegiudajNVvqMItaYbC2+qTzqCZ5GCEHYo\nXnu9gKgqMgyveVMmpjHlj8r85nMUKw2o28VxS1sZTeSYqP2m3gm3YFSpxXgx\nodT8dqjXeDRm1IdxnrFxituSeTjLrwKhEcv01ywhZYdvOvQORSxRAa2MDEMQ\nO087\r\n=Z8Fz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/touch-target":"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/segmented-button_10.0.0-canary.c5e18b020.0_1609962269761_0.9717444017577359","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"87e6701e0ce5f346e1a91d69672810d3f4a2f5a1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.bcff8a66a.0.tgz","fileCount":55,"integrity":"sha512-djTMNbAbWYUFaZPYon0pBgrrY78zXB/8Z9jDJR1q6XYE5wTu13/uwzZWq1iij6CJ/qnaks7SSHNTxBEpBwK1YA==","signatures":[{"sig":"MEQCIAQxdnAlNQu6xMHfNLO/pcwtOeiNQ0wxuKIfnsHigzkxAiAkb9ZUSiGnMyOjLYVZZvGl1NEeOYnPNfbCUFhA9XLhLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hz6CRA9TVsSAnZWagAAg5cQAJuRVYIoKnOedtDAoA5k\n/XHMhjtUlWhT1j5suyq3JyLH7MjVFzqa0xBlgd3oaW3Byw9qp6Azxg5YHtJE\nZ6YmusGDPB67GToM1c2szJQgsmP/6vRR8xvOF78+2CFWD4hYtvY0l/TjrTr6\nVbGo03h9zYtJs8Pr/JXrWZEEpRmr4cPTq58xCtEoiNGR0grkkqbwzffZ5ZXL\nysQeKaXfZBVDUFZ+WW5qeLbsKaJynN1tOpXt6YFX6H8+kFCQFuFgo983erju\nEIPcrfigyHNS3mDn56o1FMHss5QHFF622D7fveI3SiUs70oQjeGHPIie6mGu\nRBrjgp2xU01WQisbqbeG9zFGTLY7wxmruU7pfH8qTZjPAIlYOAOwQ1Vo/e41\nsRSzi+17EV2QSuEIkPGQKNvtzSBbizCs77REGbjMLRDIFzzll5JOiqTeb3Hh\n7AGYPlsOul7Qd4HeMewJ3v096MPFA8AxBLF+xf7QHNY7SS35O8QauQ1pyjaL\nFNAa5BxNuK3yc+C8SwDMSLsJ+uZpUPnOZ5l+U0bEZ1DLA+5UX3J7ijkHJQLf\nOK7mss8ysukbEjc0u09rv9vT6vyQl+BvHb3DRcjRUoU1+ekLu/TaZ3VXsG7K\n/Q2IaghbkeLGcStLhPXhSpOeutYjFoue1buW86CI2AKtKlHAdv7rM/DKglv1\naskH\r\n=Wuuw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.bcff8a66a.0_1609964793507_0.8019732668549944","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/segmented-button","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f109f7008030b3a4cecbd4d4985a9067b882585e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.79328c9ff.0.tgz","fileCount":55,"integrity":"sha512-/uiW9Y6+FD1v5g+VvJi6Lkoa2FWqrg0ZuAT+OhzKi1sDaPh7nOmgsAL4Ua6ijQoQSgjJKGRQjzJfAixX8NnqVQ==","signatures":[{"sig":"MEQCIHVxUN41HtxdDM6HxanSeRAGAnGHFNB74XEg5xOr9X3bAiBQgrfwqXQi6RLZW34w3vY9lwBOsHbT7fX1RRnSj6uk6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMzCRA9TVsSAnZWagAAbboP/2LfP8qM02tyGwI65FcA\nKmfkMQMiCZdPb765stsdcb3DO6fNv1oD75N2suUNePJjz9YZFiJX55lieUR2\n6xZWeOH7NDl3Lgfl8CZk3850OjMZNKX8tgPqlxVf0XsdSNhryEVwzh5wB60W\nB+YNklXKViaUnWz3yj1kVk+Qb2ar+p/t9ZbTGULsFF1FAL5LEW+nuKInyQu8\nM1D7pew8KOflsBshc21onbYGTXgl2Q7wKFlnION8OjsTFngYIS7eXDrBpbM0\nwg+jD8GKhTMFuYlg6klVOSoF9ITtHN/NnE1JShHaq9uXdpZf2/4pqWyFoPkC\nnYsKHJ/qmbav0/1SIQbCcKxOCffuIJRg9sx2WBGATErR685Tb2Cf0Yse6fdS\ni9An+E9i+R0241kuVN8Bj3Si4iUpNzM4UxfK5jBLebILF5iWsGzQiQlKeBfi\nLFx8NnhTsy9Fyxi0/Rb86V7Sl+85+taIa1taXSSRqWlmEHJ+bC2kPSoyNZmo\n+7UsI3R/d7UlbbedtUwXy09Tx/dmhGuSISRhpd1Utblme/TlkMoo/SdhYhB2\nEZ9QYWVh/M0nLwOAPcXS7XQUMPENOZJQP6m51luOvY32uRfmuzl+Qj0UE6z4\n9Lf4wPS9qpj3+MA7CeKT9VyD3xZCxZaAfrMFKfVxzBS+qDYctHtssscBaEsr\nJN6k\r\n=61n7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/touch-target":"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/segmented-button_10.0.0-canary.79328c9ff.0_1609986867309_0.06219628511744846","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/segmented-button","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ae188ee9c9a11385bb7ada8457ad4297b11d0b4b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.121e1f303.0.tgz","fileCount":55,"integrity":"sha512-dfaLFxl1/WtmniaU2bwQoUGzEG9tckpqKcU9XbnL1uJQDYMs+YjwfgM/PW0PXqMlMGrzamgmfkgv5mOGEPb6FA==","signatures":[{"sig":"MEQCICEL0OUspJKHFfQNXv0mULiNlYlnAEYhcC+ZPFbyNwPuAiBawaG8ahFoSI27KvX41kzxCIQmK3UZ4imbV5HPJVOw/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95coCRA9TVsSAnZWagAAXOoP/RVcWCwvH3p+Foz4cyAy\nEc/jd79PO/eXCn0Jlo2fwNEXxYRR8JGopZzVgBIvDVG9k4ujn55YMbCaJxUo\n9zE0Im/kal1VKLyzsbsQ/Ih6LFV1Vl2TlhcZuL4OW+s5UsTsISkweqbReP81\ny+irP5Brqlw16jZGWwl0pJbG0SyP/38Sn3ThM1/6nEB6R48U+H2Te0nWkk6x\nKWsg+pqKURSfARoM0qA18d/ydrI5zO+ktDsPhxPdG/W5Z+kuTaRGhVi8M7Kk\nBtSIdF+Ise4UqM6Sd5bhcmIZV86DfQ9mDIZjxxgwTf5ELN4LhTauMTiN2z+J\nHmt2+2KssuoTU8WCajdugh0wE7zi8FxF/4jngD1knAqXT8+Ol+NgpAFI2dvE\nu6GEpDiQQ/0vS6nNoCDVLC4vbXitxrdoTwhIIh6uy2l/dkVsKq0dVVW7ee5p\nk3QNLWvyqQMceZ+U5+MoVnTkhy9RWobRLM2sAciR8WaNeC+rmOmgbgE25Ccd\nkMDJqWiGNByfEIYlGDHOID+puvSzyua/06M69/RZ4xTE6CNFnXzFI0DFugJ0\n+OwrDTvGYLn5Txzv8OJdP9UT5PJDR7mIkkqz8uWs/8Na8icm3xJQaYa72fDU\n8wnA8YWzXeoSN87pXIb4CLaVZclTEpB2igWve+Iin9M1HSpz3Bwl8sEH8tfL\n1STN\r\n=o5cG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/touch-target":"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/segmented-button_10.0.0-canary.121e1f303.0_1610061607792_0.6803585467472177","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/segmented-button","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8f17177ae5cf5e2d060bc0a22563141a7e1629e5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.abdd10065.0.tgz","fileCount":55,"integrity":"sha512-BBxshXdDyeXjbfsN5x1io6q8492/Z//anlqn6zbvsBYOA9cOFjWwnCLcpX4qgqWoQ6Rf8gfSe6B4s7kMgPacCQ==","signatures":[{"sig":"MEUCIHUzVFY91g8rNZJO3hif6RzUAk3EjzFRkvSyFjhiMQ6mAiEAyPdd/99E/Lepe9u3qg9XbWluoT1W66laR9GgJB8lek8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Ju0CRA9TVsSAnZWagAAHc8P/jKQQpJzvDzzpX9AGVHd\nz0JAbSao3NaIyfT7HIOClol5aiWyE31cloSE1nGNO8wWVgqk8wbikbZqoybe\n6Nphjye/uuUx7iQjQkAgcOIKKmSqpFx3a+upQ0TIUNr1L9rVyrqarWLS10O5\nfkP3TTceGiEBpAcWZ0qABYuPQFW8N9BV0ZqQSZz6hhkpMp9jZJD/3o11JbBU\nXDY4IjU7Lu5ESOj0YOoXOKROu0q6qRWw+W/NthcFTKNx5R/NV7l9/uI2ksDe\nlwZ4xZ1GjsSOpKn4lgxBl3Jdwx+Y0W5K7n9E9Mgph0CdMEfuErmFXXOpr6JY\nO7wPH48smY87rp5fpZygOgGvcmkfEVzKNzKzP3+rB/cPcjDieGAnB0Kwgka2\nqHrNRPMP56JJYkay9FBnuigrSP/LckA2UcxOHATSKY00IgQ2Z/w0VtAxs2b1\nQZt7uyoLifWm7DKnjO6mqHzAgSAi/1B5c/6mkkvcZ5PBNt5lf6X8h8f1Cbif\ngSQ84NBWCA9d9hV/SJLUUlTxFwSlbbny2IE452t6BD8f49UM226+kwgR9MqE\nNJgTZqsLbFJ2AouKJi+JnV+LcEjQeXGgBB/t8xddTmvC8JcZhatvB0TKM8V2\nesDlVc1DuwUFdRbJjeW7ddptibrbOutym6CKPnDDrAGgn1+GrByVHMDK6OWQ\nFpqE\r\n=ajWM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/touch-target":"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/segmented-button_10.0.0-canary.abdd10065.0_1610128308106_0.3313766110078544","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/segmented-button","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c0e93b83b27af6a1c6121399b3b0e37254b02487","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.089de519c.0.tgz","fileCount":55,"integrity":"sha512-6PYEXrWMrjRgnKeRPQVVb+tjc1x4F5ZKgmMwDlUePmt+o3jBNtWQuDn9Kqa5rUUmXfSB8XXhpVx630TgSKYQoQ==","signatures":[{"sig":"MEUCIQDBjMa7+XLqSxiC/x2KBv9m3VYzA7AQ86ZWEFvlrVeKzQIgFIaOk29brOhM4aBqMjbo4Gdsk52Nrr5370Yew9H3bfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrHCRA9TVsSAnZWagAAjbIQAJhjfHElyAwVD5/okv3Q\nhWz47jQuI+5JPJ3kwwUnepQ4c2yDJh8njgh7npSBSVer5TUtsZTSl5aSY189\nVC25qv3W3QRANci1mOskhov5Gp7LHVcj64wDBRHhzxtq9NaCkezJmfJiLr83\n7A1PFETx1SXfVStVZv+rfMmQfV/jrHmCimD71dIXkiaoWmnvYnDAD/RZtDGg\nKCAkVGSf5HG1r29eX0DJAePBDulkkErAfRWAwW/odlwoG/i2cn6qGor/fqMn\nImk0lMLGY8E+xfMQKBfVfgEF5u46PzJb7xk+u1tgq4BnTufCEt+YXoZryXv7\n+LBnORBDOCwiWBgBcKMalcX2BudCjBebkm3NAZd1TuPHBR/a6g81s6bktoLB\nrLugPzeB8+yl4U0R+vTWboBMmF9QD03TYQUvfusrQocZBtiwBbkJFAUPTIMk\ntj3Vbu5A1co9anROq/ILlEys0AiRxninxrELt1pG12OaNd7MRByp/jDhZH0H\n+5/fAJmBz/FtX6RWtR6shet+US+LDvOOoZzZQECUyeNDuPIFSKXYcW5s1Rpg\nF2B7FVSMEm2UOgQP56yyvd8/zQUzhajeMHcnQCZ32sYqZRAcr+QgywVrQkBA\n++qCSwNwuGj7x9LUToCA3B3q1o5yPR8lrqDQsFhsFKbUDSOtSnoAdillBGiy\nsNky\r\n=CAOU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/touch-target":"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/segmented-button_10.0.0-canary.089de519c.0_1610144455153_0.3813494585352739","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/segmented-button","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c42ac1992c7a73ff5733c3b8c16fdc231ce2d647","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.163119837.0.tgz","fileCount":55,"integrity":"sha512-KThaBbnLX27Fh5LjOhZbKPy3HotnVxKAVQDy/b3Yt5vpcOxYSIukulUljVRymQ2u5oVIyr0bK4hLzWZgNgkkXQ==","signatures":[{"sig":"MEUCIQCv2w/7NdsVTcWH/bq6qeVG+BnU8BAtTP07S7RCjJ1OewIgP0oPn+iT8fnSEA/nsOulYqB26SpY2RHhZj3SbmAMzLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6dCRA9TVsSAnZWagAABUsP/AkafRI3kk/Xs3OFZPHw\nD04qAN9snY7pD8v9rELf4zka7vBH2XscIKOadbwE/EIAM2Cir2e/tpcGcaxx\nxxOg37e/ha75P6kDYwiU1+dEIqteVJsnm881n2J+vmAyi+KxBa+ZSXMsXqUk\nKNoauaK9FamkIPGDXCVBgBY+gLCJUigDmWQfeg/hpcmPPUwRUVy3yk+KbYsH\nY4sdbIkFYIClfrgKgD4XB1gmcW6ffnrvDeVChFNlAxmnBoJkLCsHRIX7eBc+\nYyzDx/sWmFYndBQh2NjRNlo99cuxLaWz2wz9nCMpBhD/nbV0HI4NaaNUUBOR\nzbE79d+zFK4wTeorQdC1Y0rbe/h1ze4L5Va9QsxLsqcpcpuq1Qp363wPdJa3\n1uTlG++jIrjyAQdcX977G6hNOxTJBmjFM14Sp45tyUtM3dQ5xaz8+LoqNu1Q\nRI4zotKZM85m4RzpWqhla5bAw5CGvln7yokzHZF7mb4GXt31H3fMpnVZbcWe\nD8pOnd+LAj0fm2PkE0z2yA2mlLvsDWKCN24VPKl7KZvcTx+AlHgsIRORBblH\n8D2E75vEQHM+4tlkQTpR6Z3oY302jM6S3m7eYOok+a+50BbkGjeQr6DbHonf\n7fd5Qj9X4y8NrUQwjwiMe7ysCZX/fFqtQe86IGN5BSQkj3uXt2M8mKIOPaff\nXfCs\r\n=Z/10\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/touch-target":"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/segmented-button_10.0.0-canary.163119837.0_1610149533054_0.898163301203458","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"183124fbac951219886701590afb81a7a12635f2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":55,"integrity":"sha512-IjcLoBwCE0Bqo3sYnM/qHOmvEg6xjKZjrPA/yVR0y88YV6COZQXrSKNX/J0+ZoW77bv8LC7P+6Ub1GtMSwfsFw==","signatures":[{"sig":"MEUCICIbuV0itDatXwHTuEsAgc0aJKc1NwgNqmvWlds8siUIAiEA7SpHWpytWBZN+/i4WQJG3RtQCi+RZuEIu/fBPyHlEWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvjCRA9TVsSAnZWagAA12UP/3lXs0VT27M4brkgmzv9\nkdUy92j/knRDIE4B2bzklLCoeM+FldDXHZ8Y0n7ax7YU1JTjmTCuNh9lyOKm\ndNFfMYgYDMqmJnR6RCXDeK16O8tFQxhuM2He7uV4j+HOg3tov9EVMlsHT7Kn\ny0mT6NMW6VEakdI92zZAjQIBeXO2LKImIVZ2Jb0ax2Y2EUh7ZBcvA1odME/m\n6hInQdVPJuzhXc9dk1iFM+j9DObJ/TVHSyd3Tt5ItRp8+7GNRd7I34eWJ8TV\nca74ObubznvT+LCRRjl37CdqVX4uzfaRLl9jRsu9pt2UxX2hDyAIu5HBVN1E\noXRcqtUGBt3wF5UreFtfDNn7+t7B4ulYblL0wI0dlxF6Z83MnNEa3Hedn3zQ\n6lLQZ0ZpPMpkwnroCSlxf29wok/HCjJIwMzNO42GMKouLTyxTahIeUn/wsnC\nHvCwae1eYneSKdgwLfnaRpNzUggLkI8lHjBaaf5mBq1dIpIID3xtHVr3UR0+\nHxUw0uqek39BQy1S9WYDP4uc8+IwrmRo6doJ1ev+RIEtGr2DNRYjM+hZ4W97\nDTD074z1Bg8aRt2t8cE2VS6jeePUFHoOY8q2nEZYEcojQXYtdGibEMWrcRyR\nVuXUPhYxu5fW15NPaTFiSg5gpDAQdPwiRN7IvWJUCY/7VxWrEnCD5t1AKgBI\nLsQ8\r\n=MN9g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b8a1a58e4.0_1610382306448_0.07807132769515102","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/segmented-button","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63a7cac04df7b6aef734caf6fb1412036c5540df","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.7584267ff.0.tgz","fileCount":55,"integrity":"sha512-hlqW15+lIBIOPAU/lr+dlBhXck/gCvgJR3EohgeLxvpJZpHpJmk1kG1GyRK+OzBm14MNmBmCVWIILTgBv3I04g==","signatures":[{"sig":"MEYCIQDvV/o6GUZCXwtlS0DYqvmAIUBAOkQcFvfnHacvZ53b2QIhAMMY5NqGvbnLNHCgZgQZgGkPWAhjz/uZw+YBVYy2dYSA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PeHCRA9TVsSAnZWagAA+2cP/03tjUoZS6CVEWgUXcgx\nlJ+NxtCbAwvY91fmgiS+uWwbzRoQVGIFMvbYfPfTcz9J8lfeNtt/part424m\n9tMVS+R9y1tJrhiCVCLBIVqLvEqEllO0cFVgMsdUzk9JSqpQcH0MDRnz4xZE\ngpDmlvLcD6bTUqfqTV44r+kEqvDsQuPKcT5Kw/pi9O0acqQh9jld76jvRseJ\ntkh4doRYjd6wfdDQrTSeLYyLt54XhoBM9qRAApT2SQcQt+dMCUIDa//ZvcWZ\nsYXe3dciypgn3szBW2hS2Yfc4LP31tMI492PGZevIoshZAGYLq51zL1sSUqD\niLh1OPwFMc3GY1gBIh1aoHbn7SSTWd+2kxHXTp2DkXJfM5pspDQ3GJvroKbI\n9BoxM6TF0ktOAp1i5RrRBsXpZ+HBIQ+gILM1FczK3G5csegtkQGUHgUoE6h2\nU8FjqaS/fSv4ch6xLNAl93Ge8PkKIuo7+U4zJwIk/HPrh5JC9E2KlF4cRm67\nx9I37LV4v6DilYaA/+ZVgJ4brCL6sRKI8IZzDVLvIPLbBQQ9e7ghaAhhI179\nZNfWgNAAnbfCYfYzj3Bvwd6EK6JMcz3bu+xfWly13epFSURzrt2CiXisN9EP\no8D+nFvnXx/+h8wW1Qa3Jla3NZgHA0GA1Ind4jvWhYQXR1tzG4kQhl3hBUhS\nqfda\r\n=mWlJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/touch-target":"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/segmented-button_10.0.0-canary.7584267ff.0_1610413958684_0.14806728276615244","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/segmented-button","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da8c87ecc15f99d17326b25fd15f8a2ee32c2f5a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.251ac04c0.0.tgz","fileCount":55,"integrity":"sha512-0MgyB6uqAz6/4RjWDlX1t8up2+qujBl37dkRVOfkSge+KZM6ECpPemGeMFTxIIzJdZ28a3SJl2+C/SWardxBdQ==","signatures":[{"sig":"MEUCIQDzzmSyNdRfkyFn8E8FWbRZsdnhzx6sj2Af7JdQjohRWQIgVsxngIWEmNzfLOHv9FklyB8kDt4vuNZoEXAAMDZOJ1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6sCRA9TVsSAnZWagAAmaQP/0qwgPA/o8w32oYcFxPq\nrN3pGv+wcKDY1doouJ1a2X/O0uSFeOuszkhZS01PwYn1a88OHXGX3Xx6wjjJ\nbOJbxMTS/TkSwLDC6zaEd11SG2IdpsFn3Bd+NaWJlm8DndTQhhFdLbfFgWM3\nhUo/qTUxkiUdO87kYGw69kbkf3scEbeduJgBzCUk9D1gCVZVfS+qcVPrwIhT\n0VFicNY8sIxCg+p740/jktLaC1j6AGkqCa7eTtPNH/eYY/QV12pLZp5rTwJX\nyAzFxpFJS5UiwkJlQtds4kPOJRCGmFHmIjDVhLT+nziV12CJwe0ioSM9pE8V\nYdwiXPq7im8lcnT2/voJ5X3mklZp/C5KZ1HNLfWYWvcyEL59yfnzKEREZeSl\nN2JzYuPmHv3WmqkyqVvmq7Gdq9ZkK3gtvkQY4KFF+16R2Ns6rMMoRlJeFU0E\nJSock1RjvUb2P/vA1rR91WOykXqmrkl3GW1dmTCDwCShxLPiiyv65mOrpq8H\n/hgk48UW/KLYX6KLvoGwHxR6znggG8H+6T1DQT4/TychfIladgAMoepxSrDX\nIDe5JdjdGsHMB6UZwb5BotXTxoMj7DqyL5B5dtRK0ATJoBuITLSuPEz7E+68\nQyMoQGB2+xSJZDCxGndYaCtAg3cEJfAXO3MJ6Nu52aEl+zxyr70GRByv2BFN\neweb\r\n=rt8r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/touch-target":"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/segmented-button_10.0.0-canary.251ac04c0.0_1610481323585_0.5751785915081091","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/segmented-button","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c868040cbfff18d93f7db645da0ba160527e6bab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.772cc1068.0.tgz","fileCount":55,"integrity":"sha512-5rCX6zPtgBlZ+OP8p6Vjmnie4J+6S6Tcf+a+IRkNs/2geIgIVFLOMkoLxuWWAciwINZ0GWcR1e5Axa5ro3zitQ==","signatures":[{"sig":"MEUCIGcjBP3vzpBnAdjSa9qvA80bdrMKjw7XW5VP8cWb5zVLAiEA8ZIFxrJk9RHM1QetgylGyatQi5oRimGi3R80Pf9h5ME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4s4CRA9TVsSAnZWagAA2n4P/0szvUUc8NZrPy76Sqeu\n5aoOE75iEvA7wiwnrckagCl+8Thmn3tvvlQ2WyGMoNQFRgs3Pj1YJWPkssiD\nahNqowLBjWYXhseYbJm3gcIpnYNIwJ11wgFxofpbqMJJwS69NqlK1y9Xkwey\nR2Hhp2URAtev+y53CUmM/+fMFF6qgi4drEMFF/l/ky6bUMzbu9GAp5cjfwvI\nOZUzqbvKkvxQ2qBysaCQSBy7DWYVE8lup08pS6F37bIquF9vl2n2TOvlKgbC\nN0kJRH1ARATQ7lnqAE0irndJ8Z49NClvOZs65WQh3pshtBl0feMpvcCgi4nR\n04zlqs7qammSVKxwN3W+PHaMhQaAyE8/0c8EvE++Ul20d/xg+oiKdbDtM1Ty\nd5BQ6EMxUafrs0IkrZfnEOj6arcbAynpoQuhAonaUFvHdny03lirX797mR8v\nS2K7pTmpMtfZaaUoENzCT4JlobmZz6S63jCM4kv8X07TG9sMy5zWbVvNbMb1\nUIRldfjKysdNbi3Dv8GeA2hkBvp0tfIPAFLbbZ2DxwOE1/0NU+OrnsY9lS52\nH9aGP1+UGLCG/Vo7LgKkA9kxc4YeRHUkbcJJW516z19bfldIKCVXzIDo6Smc\nwYVl8Pvx+UOygoNOxjhwwTZdjMC18npWvl3XOrsOoEgHGaowDmXl4up6M4aZ\nUpQd\r\n=ocQs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/touch-target":"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/segmented-button_10.0.0-canary.772cc1068.0_1610582840564_0.5626795172432693","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/segmented-button","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9eb78abb07f96d743a572e9ef39ed125ef5ea4dd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.fe13dd130.0.tgz","fileCount":55,"integrity":"sha512-KsygSh/ygnhaXFL9mzO6IIB7r9yW05/booKeQTBmaGFs0zm8D9LqdnGy1ptnSJja6qe4r7qJyVMOSOUMwi66pg==","signatures":[{"sig":"MEQCIAWA93ZmYgpeYDd2vqxNAaKiRXOULFTk6F5jFusKoWYxAiBcEZb0kHn2zP2jXVFlZFGWUmr52kWRnF+dpNu0u78FJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5oMCRA9TVsSAnZWagAAjNkQAJvITb99qDYOce3UNfGA\njnbSOGeWfzqIeWxJ/z2Qm/vFOycqp5pSxEhGvT/lMj/06QNpCCpwKlzr5LFF\n2DD5B7FNQl0XOd9ga66uyoQCX+WD6j8My0kZLqJHuycV0dmkiDkalwUsGRjv\na8GvkuzwF/nPFy5cyqYb9MTiEOMDQpRE9yl+llQ78w62czud79sqvpCucVG/\nfrmxLrqt8GcqJMsJge5bBQ3tQQliPb/5UDqPe0MWKZq2cOW+ttaH+R49Q9BB\nzhol7Ule0TBhfqPtGPckMiWpdswPNH8nYQGOcjSJcDLssIsvsl269rY8LNWT\nrUt/NPOtJWk0s1ruwa/CboRNLkNwvCP0e2f8gmmcuLmcxmop6KmCWCej8bHv\ngrdTJLSPe6c0xbl7/MIfnFY6tSiLayvQD+cFEpLeirukqy7/RES2tswPm8nT\nHJNq3f1jTZJ46ue0gkwNygq2edAFIAhmK+Z+DzD+i3yo05xdYn5yjmVlpcM/\nBMwcWGjBjwriQmAcduCiALrJ8tTKN5Fos4EikVXOXh9sfxLagef6Oy3j7/Ce\ncUw3erxbuOXZ1wq9dgkrpyexs5qqm4pSRJzoAi0CkVqYqS6FI+Sf+IJckVjh\nuF8BhczsqLyAhgaa5rTUC0RO+Lm175k1T76+6A/V0mFd86iI8qAI/1w2KuQ+\nqU9R\r\n=aQxK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/touch-target":"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/segmented-button_10.0.0-canary.fe13dd130.0_1610586635682_0.04037516532285257","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/segmented-button","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db30857c7ad9ab7195c293b29c051d7278eda6f1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.c7c5da28f.0.tgz","fileCount":55,"integrity":"sha512-D+Oj8PXk1ykRBqQouZTlD5PVuTSIedY31aVZrbZZKCmf6f4BaHj//CLmUQNw//FdwtaiqCy4LC4suqi83rrHaQ==","signatures":[{"sig":"MEUCIQD1Mk7IRQmCyyzRI/hAUiqN1e18h8YNigX6B/gFUWiFyQIgGqUlUwj96kypPHadl07BoFbLTMyp731bb5WFMFAh2NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+hCRA9TVsSAnZWagAA5iYP/iQDTVh/CSBGhdt4dfiA\n4GnuEfjznHrM2VQRtgsXwIIf3UxN4NeNkZXX6JfykrnXnI7W5MMsWqFG493l\nt3xJ3ZnG6azR9FPX+G/Hsy8ieyfdCRAfUG840HTv5/MBqIFUavoRHFCuqCsL\nVzxOWXSIO+kYkMFTjsAuB8NkqEzKRcITcyutzYqepg15nJTfk4BOFJCH0Ryy\nKaKEED9j/8QCmVmvlgxsTCGeTWq5F9gITq7YPAmqoyNtWAbzMuRZb/11Sn7/\nkyR8wE9GwTq4LaIkC4m/ALm/EddqixMvhHYBUa+JsXsQnz2+/EWs5Kxm/UNn\nlmnX4jwkZllJjaJM8cw3OaXf6ktJenaUv4ODmPtYk+oFd2UXI1WcShJEVzBe\nB5Vdrmyiq+WsdtqPvvJm4JUkJwxNBdVwZBmwt/KQmbD086SXdAf9rCC4y042\nk2mhaj28zM5ALPVUi+z/5OpL2KgfhHxBfatRGyycl8/7KSboKmow21jJ3PFu\nMiBIqykVAfzktoQIM3sNRckL9jOGPKIEirnPnVdCkNR/DbFq9nUOAGS/BiEx\nBJ+DSSlVYpBVCLve4WYtJ82UtNd84+Z8+E/7rAMCj+vjvqgJOjtSV+Q+y+RO\neR1fftYvk/086qILawuYCA+vVALjDdk1vNHqYegNDDt6xGKS5hUjL97alSiB\nGYWn\r\n=P6+x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/touch-target":"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/segmented-button_10.0.0-canary.c7c5da28f.0_1610588064994_0.26282226544925114","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a35b6e4c98ec93d8d4e25ae21a2ec801ece2aa5b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b2faa116a.0.tgz","fileCount":55,"integrity":"sha512-3Gy8CSY/GuA8rm4txup0F6ee0nDESNTk2vakqBTVdMfvU9hRYbo8/xAxbIKVy5pB4LpEUxpI30erlrV5w9kC5A==","signatures":[{"sig":"MEUCIGHj/jYVbJz9+DWubwty7/0Zp/2Oxu9ynjTAW4EDmvDlAiEAnve5GkpTnKRazc7E6a9dRqmez6Dt/0M/uHWW3G138ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJ8CRA9TVsSAnZWagAAIQsP/2JnFIdQbelN7TiWjOPI\nYoAbvHoaq7ZTQ5ADAptSo8efo+xPwjg6XjBaCfp2ITuD/jnbDxBZaVmf8aPz\n44SfeMNbjYMLNC3IoMzv0qSfOu0QAuRAjzXew1eQm/jYuu/n0ctc1Pg1xEAc\nPqXGU7brHlrnQDmaHTDpOqvVimixZSF2ktktsys+UQ34usabJfj+8oWvpQui\nxYC18dq0xyy2+Zf+I/A/Ecy79R6LLm4rdfJLBJUNDCEjIHYui0dhBS4hV2W7\nO5ktNDz4rlLGoX8CTp8aFLB2Fy91h/06+Hn4HFGejl12of/uzW70+hFi+9AJ\nHqje1ZFiDc7zuz7WIXfvanypZSyYel+025xm4OZX8e+aHK/RAa4FZJuz29H3\ndBdIXeamM7X/vq4U2Ma40oFd4WmJ2JSuZELiHghISvYVJYiXnbV53isuVcLX\n3ntu9RiHj5JZTH0Jo/7i/kyz/GmMUDvlx+fWEJr+OIS2zngA8Ph8cnDQiKoE\nDrichrW8oX4akq8U4eSmH7fkpkUB8dmjg9po7vTqnxY/TAwaIj3AWRschhr0\nDmY/cP4yQlZvtUALqz2slGJnz3iQyIDU4FWYUiTaPDojvbM+Wu8bj8aQbZMG\nqqWip8eHoKK7hjwWla5RfTQUjs6OGIMmcs34iy0L7YPncH4EFzTT2oRX6ZFf\nIUTo\r\n=R3sT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b2faa116a.0_1611084411615_0.33623978571312807","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/segmented-button","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"707bf61c5abe3b7d4d86c41857548e1d0150112c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":55,"integrity":"sha512-EKud/Rx4nGB9TF0hA9HnCHSw26MgJuamqQQpIf7Ea5Vf7419oAj4WVH/4XlM//Aahvzgt8zoXr8qhp2Iq7NFMg==","signatures":[{"sig":"MEYCIQDnhvXJYqx1sdS22exeQG4J667MNPnHbeyztwJQhJ7f3wIhANH6JPL51wNueSUurvmlvo0FxgkznTcp31b77qF1MEQo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MOCRA9TVsSAnZWagAA4NcP/jJfGXltI+EBmmzxLTlR\nv/ybPxQQd767gCSkfFheLMBphZZ3WWu7rSImmVNCQP8N8GcWSUHR90hLzNXj\ngXsWMoN8fKskRTzZpAmTfMndU8QYGzlU1Qsf2fSMy444StRle/5wL92gT7Lh\nFJiM5kRRz5PS6mG0/ZjhDnrNKtvMeES8+P9YMoStg+RyZEyE2H7SQD0eVLt/\njEIIqH5+BeOGadoUWDQHG5YjXAgdIi5n1u/tj0QuEc+lSVZEb2qB9h1gWEwc\n7XITiY6wR875SoHVNZqDRYMwMj6bZzqy9oYQwp1dtkSjbCArCeKtSBF4RGy3\nI6dh59zr2oU9/8JLmW5zlFSW//S2JIqPFsz2CZBNR7gfdNL/lWAaPoR7DEuv\nq/h7dyChA0BovNuG1mB4G44ZybPiWu5ipsZvhds+axPaOUy9azEO3fGWe1Zb\n4MMwBkHsQycLnGSBA+b412qNVKIDFXNuS7W6Gf6fDPm48yJz3XZeuWt768aj\nfW7wnwND0dDC6mjI3zgnmcs8Ys7tAASByAil7cfjO5E/XzFgX2cAtsfbbCFj\n9+dNeipBno1wvTWygbntRf+qP+2WDgfw4v5hvB3K6j+pJryru+o01xx2rJqX\nys1RlYz1cuE3/IoX3ac1ZA7052a/CGYh4LTL33iCyr9hMUfWLJe0W7gjeHdO\nENAU\r\n=iXKf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/touch-target":"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/segmented-button_10.0.0-canary.0c95c9f7b.0_1611096845932_0.3666483132129328","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/segmented-button","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9b07b0267f908fdb8aba2e0199aded70f7cee32d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.5268222c4.0.tgz","fileCount":55,"integrity":"sha512-O7yONRU6bsaKTu0i0RlGvYvXJbJ2TP7y+ebh6zjpaK/U4owIHXpe/BVSzY1a14pTPQAk8YpoczWwFGRRVhpyww==","signatures":[{"sig":"MEQCIFXsDgpyLGNsoGDLWModLAS8Ba+CUor42IH9cG8xWe3aAiAHJy67eZ88X77DLcyKXnlcdgt7AUOu69X9n4w8A/329w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIJACRA9TVsSAnZWagAArJgP/ArnZb9rvfxwiNUSemG9\nH0n+GskZBGw24N8yT+DbuB3qsyo5YyvurZrZExU4bDzI2dy7zvQ/RIxpJmHH\nVHJw5UcwXwjR2HYrH4FyTyj9kfbW/wr4IYexFJxZoVcNRh4PebTsnUnq+7We\nzMW+ACAnjj+aMS9BHnMbJsRodwUGRhVDHx0uKG3EurH36dKnqgU/xl0JrxJV\n8p/Q/I0HxWxRbz9buhQlFVsfmbTsQarWBg6maLx/Oz1X4hqKKgVLGitqqcxI\nzP9YJ8c9ym6cpemWsBtc42on7PrK8tdVzV5nxegLiCwnH/xIlSqMXSdI1M8U\nB9jabev+cTASzHlYm64RZ825j8LDD65WV1bzpK/R1PIA4jin5ggkTk7zz6s0\nKjBSddkgKjEVmynf4QKQmp9Yvwaio3z5w7extXk7hlJDqRbKywzPjBo6F55m\nTHWzv2HfG5vYzDveUNJyxQiYQwuHJ5JYXS5LFjVEAaNAaYcPuNhB1+sHWqsU\npWG41aOgM/fdL5MhLb1ZzJ6tXo2ukdV4fLP5am/ogwhwZBcdTLqEfqNtXyiH\nInYQb7RBJ0kT9UEj5yY+7cmIo5w15J/wWCAfjFHsw/0VgkIbn/cYuEE+ajjE\nINFkivRlXAVi+3raceVvwpwf1aQNCxmAbPNyNX0KT5nau/JqD3uG/0GnMsWA\nSrSf\r\n=nVnR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/touch-target":"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/segmented-button_10.0.0-canary.5268222c4.0_1611170367960_0.9915814754201318","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/segmented-button","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2d0a570c34465f3d9e9517a3a45b712f976fe858","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.2ed2d829b.0.tgz","fileCount":55,"integrity":"sha512-aUfqAf3m/U4ScOnbaabu8L7Nvt721kk9RMV95QvaBIBK5fmQ9SlvT2PzOhIH/wtg9GZcS23MdLFAIMr4o8d+KQ==","signatures":[{"sig":"MEUCIBFReYaZ77s0DLoHqaKWHomMA6dPdh00ykzFbjXmlg51AiEA5uziJ+vh8BAJBbeu8dRPwtkiKdpVT1quT5uyEJtLwlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfjCRA9TVsSAnZWagAAPgEP/1bcNAXGsIBoJwiWsrj2\nO6muZ94M2GM2unBx94jeDICmwQDkZBrir8klfCL/gO/oEynpKK+yNzB0aQu2\nU0sbxxhYUfhsLgdJFPVkYiuRisHLO7xZM5XER4xtZfXHGtsL+1z2j5QQwW6F\nbWLwKx/b0PdVGHSJNVish7aZ0RWQwmvo+2OaWzvE1c/FANAS1qyL0vtaEL1j\nZuqc72mq+zHKApfWq0VTcC4HXPgaLbj8jPAtcrkO+u7oL6Q0h/6kd0Q5Q6Kr\noz1DpCpy173fIlctf0gFbrHMf1d74wlh/UaPxKjUhXdl8712/WdX8W+510Yw\n0aWuKXBt16HCUKce9CUwzI74vBKPSBI4OMGxOP9jD4RDKnpFCJ4WNV29xlp7\nn5Nl2ZVR4as1/mg+TE0JAOiIz6etznyoSYBunDEzadfCmO7ub4dGVrJaq5Gl\nL95W5aGiQpFPbrgK/LSbGw3hnIqxFBgiw82xFDirv6DXVTM4gcSZxs3cCcdY\nka4yYvf7jqS68NFkG0emBq33Fzzc/yOerh/NToRe5888/wskPQ6bHUBzEjpY\nrSwJ6BAevGP3fhuZznlWLIgivn/Gwgn82HARE2wRQui8QiXuIJyV3KWW/fJS\nQ1e9bo/8Q70XoxxOysAxiTTuXt4y3+aHA6AOtJXMIuEDiuEO3IjxVUEzxQBn\ntXtS\r\n=Tf78\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/touch-target":"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/segmented-button_10.0.0-canary.2ed2d829b.0_1611184099265_0.3455827882687983","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/segmented-button","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9a1df0557ef964e10cbda08db3cb760fd1196199","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.df00c2b30.0.tgz","fileCount":55,"integrity":"sha512-5veTblAOHCK100+l1j/+DFFCIuWG9ztCVNovY1cTxpj2C78fZk+8IVSSVdB6IJd4U1d9bGWXv+v5yBTs4hQeHA==","signatures":[{"sig":"MEUCIE6fHzeU32SNQwJgxjBFAJZP+o/qxK2zKey5j8UYbvSlAiEAzDHOAkP7xYEU2COuSARIebjMwcYvL5IZYfaLwA+pEv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwjCRA9TVsSAnZWagAATfUQAIsMC3zCWNPKmVU9EFkW\nlmzAYs/vvO6ycQ/T6y+0kU4BkOGx8O9gVq2D+r3r0RyizYcSBOiM96lkpiWI\n2QZi2kjYAgoefCYvhjiDMGWnOG1isVOP3ln5R4fd4f9BVGla4HOdoFjuKQOy\nzP8CImXeXKkQiqyyazBr4JKDrFKlifL74VkDvoU6CTT8w3Z4y1d7ud+X3KpM\npDcu2CSJ6gTp6nIEwB+jpb0CFDo6JsvGG/O3U+SyxfhkznJEympalNHalHPO\n0yywoAhT1VdoLIdFaDKzrz9arFJzT7j11ObqziwnBYZO05IWqmi5bYN3hZ/c\n8UrfXVU71Iueqmhe6JcPW/0qto9Z513U8zaL+p9k01WFrwY6vR7sftEZ+SzU\ni2uKWNC4kxe3n4W7XTZgkLarzos8hwowPmrQm+QlZS0D3py4I52eJY3KFgpb\n/oA7JwfpnwwsIdBExX5eN7Cq2M7IvTJEHZxoGG00h2ZjW339xyMAjGH1hmaK\nelvG+xxN/Zc69u4hbmdSmQMBH1FJGF/YQ0Tb1WyjfPNyA6mdk9paDXiNphFn\nnYIYikCLINhxe+gn1OkF8keYse+rhKzExMA8ZpxI4chSmMKzX/fJ7j8DMx9d\n0IWlv9ImCyBN2ex7RDAYPBV7TXGZbxgzEZVSnPQ3PE0rQWdS0OYkV3PGbLzZ\nAiR9\r\n=ek/n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/touch-target":"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/segmented-button_10.0.0-canary.df00c2b30.0_1611258914959_0.8313167189262207","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/segmented-button","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0b0e88b043d13c707e368a696b1748c618efbc5f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.fd61b0476.0.tgz","fileCount":55,"integrity":"sha512-HnZoNoZTPLBgKcCEOVkCXau//fbI4dAyrwxiP+Oe9/EBpaOAzUGC7K9iJ3X3yT60aDj63tT35R+S3+jXbI8kzQ==","signatures":[{"sig":"MEUCIF8mpEF1uZEnAE0ZAf9c2D/8eyQuqil0Nd8TYsdkKb03AiEAgKTxWtMD6jfNBNOJ5qB4xAhE6vwWF97W56Cf1yojB44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+PCRA9TVsSAnZWagAAkm8P/0/6ciyCGkAjt2hj1Bfh\n7fCQ2yPSKwm8gpTSGehwy0V8ZeV6EAF3y9bwGXGeEVOzKPBAodJ9YicDeFbu\nbIagnc6U/jFMi1Lg2XNt1wx/uQFkDO0KN5kWk315AN2nsrEqxMr7uSLnoju0\noWVPlYyh+w/zJEWUsSJ9nStkV/pMHZSqxnqEJ0dZ7aub1oyWsdPK64yyFuan\n/qIDjadJHRYtA2GZZyPe4S/7ynqEOGB6lc9Lz6swgmUsbgDRYbhtSm1ZNqpK\n/SPr3Xw7Pzc21veDdhXVwCmMFyVWrxbaisDrhFn94Hi/D1bWzlU84fOakEDL\nyngDCvbSiHtIAOezwHer0dWyCkCmxL6f6LA4Rgrq1Y7Qj2zC3lQYAFSGHRSP\n3r4LEhD9lMwi0QGJGhS1iVU9unyNl6A/kRR7izuotTgmFzbnQ+eCvN3ibTra\nRoPr2+ftm7LPmTUXYPeQnJVPeMPgg8J7czEyP7ngveLg1ltK+igg4HRWCg++\njAPWMPvnq4Emtc/vydPeynkVKzdcS+nszEzsNwgTVdPNTV+7cshfxLY0cvm4\nM60isGCblut5TF0oGKWDU0hemm73LiNaMvTMZjwuLCB66ArhdTrl0HGJaLLR\n/GqF9ktmiGvm6si5zQ6AKsYGrKVZp6CJPWmm1psmGreULI7M1bZIqTlCGyV1\nzQCg\r\n=qvGc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/touch-target":"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/segmented-button_10.0.0-canary.fd61b0476.0_1611259791527_0.16816294167104573","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/segmented-button","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5ed9ca6c7ae46f0950058102d262489359542286","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.3fb3a0265.0.tgz","fileCount":55,"integrity":"sha512-jJVRtO9qwefBbQzIFIbKog1FIXE08l0hHOKHIJUGwndPKAwCX/oIZgF0jAgft3NmCnS0Gz7dKuKNSOI7Ha5qJg==","signatures":[{"sig":"MEYCIQC3S7y5JQGpaNj4Nip+T49IDnsYoBoWOardjCjCGaeYMQIhAPxk5dkqAJS4H36oKRRU2yJqpzdsqvxgZRFliptnR6hm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChazCRA9TVsSAnZWagAAPJ0QAJz5aR/mSN5cayRevYAL\nTHA271sCAvaNU55Tb9UM3dlWAikw1i+mhtHfG94DmRZaUMI9ouhfg/t8EIjv\nA04DGeCHVa5FlG12S+WvGZENDZSfecV66A7OZrh/tbs2RRHtLFbZoTw0tMeC\nSfxDEED5mhPvKgIIy2v4XUkbtiKEocN4VVhPIxLPHMyfA81cm1OzaI7Rd1P9\nzCbT453bfiFxwSQvEY+13I1mz2tNxDcdstYbSBiI/vbozqTERV7H02Oiie6i\nNgUPJ+l5h/qnd/YWjXSulI3lZZbvtULX5gw0RKJGch3yhG3Y0rUC4T5g+P84\n10lEKhlKy4OSoqAXGpTgZg9OMImKTrrSGgeqwE5xmhmo1HGSP1jD2z0cIN6j\nkEzFCsj0W2Z45C52t1EbUBkSlbq8Ircgx317HzBvt0uD5RcwkNX5OZjpZfGm\noC9XQQ5XYjDxyOOW438MWSUuUcU8F3Z4y3plOMsfkzIpBoJgtUrG9IeXtRPK\nXwLucsD/a+KoyoJEb83wqn8U1zdHTpx31lv5p4vL980mNc+OLlIE6KGPkmRe\n6rmyAO+VzEAKyrEMudR+pQJ1q9i+sxtPOhD51vFdby3VYnT8vSEu6OOTE1NQ\nyMlbHOUw5+VgH4m00PUdB1HxZI8Rtjj2ZCBlA6TU1c7aNpuWwRuNREt7RVad\nXBAh\r\n=/sqY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/touch-target":"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/segmented-button_10.0.0-canary.3fb3a0265.0_1611273906537_0.7763188354609227","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/segmented-button","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d2e3c42723a1731a160d07a316e195ac7c32cb22","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.07deaec27.0.tgz","fileCount":55,"integrity":"sha512-aI8uZox3UCSaLAK72L8KNN9MHOmrhkBznJud0rZbmxwVbqnKqo3CmuXqaxAMsraC3y3BrxB3FHTApq268kdC7g==","signatures":[{"sig":"MEUCIDrruiZaztcD97mPNw9lQR1CTnJgl++hCFd6I9u4TfkvAiEA2a92TYcs9qdKQ/RATR+8/ceEeRG5JVubYL/ZBwDtG8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPHCRA9TVsSAnZWagAAuWQP/1cXFWKGp+l6mY94Nhfr\nSnQ0xBURsFopXvk8OX9dEqNK/RRgjgBK+LR1l43KuxZnBNazhrM73JMSvPLH\nZKIfQU/qvlMyudU9imVAYtcbl7gqemjZzPikhV2dPSzEZYoGJ/b4PgSpdNHj\nN2mVEFjEspgoEd42EsEoqll4BeDttXLY/8S+MODWqRXw4uHhVAWPD3MHGBUc\nrNhaNGL0mEorp0q8exzkRFtOfxfZib5/ltifDIQuhx2PhyZkpVc4K52yNZb9\nhz6mZVkl1JIwNrsUv+/1lKzLEA4Lc4vb/e2R6n8TetlKau8TLaeRx7dr6QxG\n6cIZE3xF/c9gzrRTKUHkEE+3tlT1hOYiMJq47el8rhwUK1/wMTOzDLhDTTcM\nkn8zpdGEgO1sqLggb+JQvP4Pp9yFdDk6D82ZjTcZjiU78K9Ca2DH63ZIIj1o\nKJKWkAcmX/IZTodItCDzXaqHmvir+tirDWcTQSiMb5yZ998hRk74NL7/jz50\neejSdgwH6iRIn3RDN/i5vpEMdizuYJh3Piy95EM7usheH0GIyzAULDfn+Tkw\nyDqbHi8jsKTlDkWVFpCHrPX8y/+F7ZZzYWBLiypX4SFrFqMZE+8OBZVFvuE+\n1vRGBqpWbA77HGVVD5tU7z/4dsx3ERb27s/otZuhm7tQ+BvLGLzQowAGT5XO\nbesO\r\n=/K5U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/touch-target":"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/segmented-button_10.0.0-canary.07deaec27.0_1611334598656_0.4239903017744884","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/segmented-button","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"966abd199cb6358ff5dc97d9dabf6a952de20cf5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.d2959b16c.0.tgz","fileCount":55,"integrity":"sha512-egze31PPWGV4EaigEbp9vaialf61L3/Z0J1fGry+VMestlKzqBkPB4TV9Icyt934WgyPmhp4sIZan1s30+oMhw==","signatures":[{"sig":"MEYCIQCRCNx4n9HH2zfv93OQcCA6QMtOY45Zk0GXrw+bohe/sQIhAMF+fK7WWNN7L0Ugc+i8EFjdKa4uFACWytsGFAmWjhnM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7pCRA9TVsSAnZWagAAcbMP/j7Jm9NGMuRerYysBVmg\nVVXNfL3k683/7gbcdZdYEihUOLgLQfHZ9IIerCfMHf8C8dQAsUEZ7jgeql8H\nqh9DrNfpPitXChNTBTzgQQOPJNCh2tUGNAFK2JrWLvWZasZqfcGlnp/cQ2GH\nC2doCcR671PThkpRgQLuSiaSPJz+6fINyN1yqQPuELzY9l4hiQgNE0TR96oq\nIqq38+yXAJAl98T9Rgpc6Jpmkh8UyAkEl6qMTXgEKQRhvfi0ZBwuwxTqhbsB\nhipNIT1kyNYmtc/5ugf9legkOJ8KxpxopZj/guJYNtUuD2g1IZxSvgQ4d7Nu\nKiPWrNRxCgFvbWz8wY1D9QXHGC/x7IAPhIhSAYKgWW9yAn+x/tc3ivT65aQE\nSTTYS/bGCk+WiZzih/hLsZtxG3qmyzAR9Ki9IrKRF0GNrTFwi09WwFR3onfM\nxSGQ7K/gztwMRUmDSH2CgK1Q+3gr7pBsehf7zdLv0oMMM79xdhshmk2o480z\n8A4ag6q/qqK5tz94h14U/JEkpuJlPaMI2d38qmYDO0Mu16L6ZNFityo0uk5G\nCCjIw8s/BvK/XTtfJSEXejg3UTVqm/nowdZZfIzdr3yxo5XpjXCxk7Va6Bq6\nS7OUXM4PkjgDCDT/Iz9G7cBwi1yONAkeYyIF4xc0SGTLWqKx3ZvFxNoaoQ4N\ndFzb\r\n=TV8N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/touch-target":"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/segmented-button_10.0.0-canary.d2959b16c.0_1611341545148_0.10465108681028679","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/segmented-button","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f2a37842612e0f98e6917448e5d8259bdacd1c15","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":55,"integrity":"sha512-SrV2OyiRoglfVmNoIsPqu01dXzMGyvrL3eRmrHsPZbS17AXod0Z1YCF0ySbnzCWennfELY+3RVd1hAluiTFQCA==","signatures":[{"sig":"MEUCIAWbRF4in0VH5B1Nb9aWEHljDptIV+ed3xuqcTocSCkYAiEAm8+QfWLpe6/KxKk48QtwGtP/ut+yz4hvi6TTpnB/3Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1cCCRA9TVsSAnZWagAA1oAQAJ1M43QEuMVt+J6QLmnQ\nGevSClTPQL2UEpvXCprGF0CygwtZ98sbUlXXCsRBPTuxPDyZWJ2nzK/DDEuL\nRV221S5snCBVmfWOZJoKJgL+MMPOxTLMt0mjo/Qd/E6g5gxfbVDDS3/rvFDO\n5PX/4vUxfXmDV/xh30CrDatyFtxY/2aDfoh8WklUuVu8srAsFiR0WW3CyT0i\nZlOMWC4HGDIgcp37PCOmnXwheyIvon12BBcZuDgV/ty0JHEK/e1ibgRHgOn5\nsAEM0kkMEYAobjzZqrTeuh9uEHs6n7gBeFrvuR/SRKTUhW0pd8D4sFpKUlCn\nerwuV2HPUJS+fc26R7b4n96ISnOAsRn+J6IJT6/xUc6qqHOuJKDGWvyKIbdK\nrlKVdxtyKbhreA77H7iT5Mm2Dbpm4w2I9On/iytK/bzOUD48+ncLUGEvR7Od\nLp2IEVOO9l+UqdabF8Yj/wQi9FXdBrzcr6Q4tlLGk79B2+iTSyfAixLJATYL\nP/OCIF246NCtxVCShlmw2n4K8BjlFSoUXRqPsBfpEPWEgTFoQ9KiuqlgQpH3\n/QLDDTilPjP4+g0nKK52vmLvlMh+uCO5wLLqt5vTtPntxe7kQ9k0w+MXsFlM\n0gAycRPm+Strx7cNhT4PIiiM5v5aR89goyxO2X3BJudV/w7emvVBTM22A1hA\nLAnq\r\n=MXTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/touch-target":"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/segmented-button_10.0.0-canary.75f3bfe7c.0_1611355906051_0.18419938185741946","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63260ef7a86875bfb99c5be9b7ccff06a997a163","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":55,"integrity":"sha512-vxIC3sDCq2l60GNBCTMC5HLAiMdEMEqS5B1oagC38GoboCE1mTOwlkrloGtbC4yCgrg3dkYjoL2Ear3v5m5cfQ==","signatures":[{"sig":"MEUCIQDTKu+veZvmcMYC9zvuHPrnCwPZ2oJG2Zd4tGMFvcsy4gIgECQ+0cAPtlk349YFMJSvv3zNdDZCekMWwFh9UoZJCyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2FjCRA9TVsSAnZWagAAX9kP/3dfbsoQFXpHwiVi3RXU\nKETk4WyYY6ELq+EHUReZ7bZaHVqwL8AEbGupaNAYgwjSUuN3XngHxnN+2EpH\nYcFtnj6Hqo2FUOvVaIBrSkPl2xSYBz9a9Ks2y/hmX6W48pa3uz8jjzCkoSaS\nKfEEa9psAQ58DwMWqWyjMojhPl119yRGI/QH+9POvetmkuh01crsmuvkDpYW\nos7+xpdHH3/q+95ujL7vbQQteMd5top9Z9+wEzLw6NGRvtEziks1qLyGYeEx\n2reKuOHMriIK6HgqacbT1zNJqpUpwttKtnI1Adjct7BKhI03qUUfblyNXDnL\nvLg//gX92r4eoeK65JykfEhp3aYuwkd9+uv38mOBM8aVWymBjMogCp/YWGGc\now6y925uludp2U8ojM9pWHK1cFrZUwuGIKespPGLQv4s6rgc+S6IvOHuZB0k\nVWcT1nRR3r4P1SNEW0kp3h4K+s+eW0OI/fd7/I9FRyiFvapuGCbqQmxUp9hw\nw+/N0dzjzIr4i62YxauQ6cj6U9DbYRQLL2akDYQ6FRF57LmHOcxv8UA/My93\n2ELbcdgJ0mfJ3U4V+AwqWvvVrF6K9rkAsF8PPYn2Z9fchBrHi5B6Y6BDP32x\nHKAeuWduwhh0SUvpdq2CIBIvWJ4CCYdNM7ehWyH+rhACRZoQg86jAzVdtfUi\nBhQh\r\n=+JVG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b9adb7a0f.0_1611358563018_0.7626496556488123","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/segmented-button","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"574188ca5d955303363b1e11176536c72e134f42","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.d29ec2862.0.tgz","fileCount":55,"integrity":"sha512-Ok7dCbBP2l/t9YW6jX8KySgT7phPs9DkcnGbuEgWVOCHGt/4AnMome6016SJUT1llnO32O3rJyZfJEGw2vVD+A==","signatures":[{"sig":"MEUCIQDK7zrSeqq/uhKrhLe6aRHrvB0qBqr051HPppvupFm34gIgPwPh9rU2hOj/ADzc+0QZVrNLfrsgdDwlIYQqm6LmUNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCtCRA9TVsSAnZWagAAdlUP/0BkRU2iVrU0If3mreza\nuG6uoTNCBJOVYK2+zSFwEBtOZwqPO8SdIS1X371gxP1mbiihF6yBHwKS16en\nJ+no2jptkx68/Zt5MRNkl4+TJ4PegVhZUIN0+P2JOSkWKQAsFm6dWnYQhAwc\nim/RXZyxOlngjiOJBAfPmzTqOKFXQgJgduHRzonByDtyqT9+ghIqn2ipN4xc\n/4+nXa7TnSrxcgGHKjgVM1frdf7DehwLoIHffKdCdXqmDn0GsbMDoGs3PwTM\nFLBgFW5GvjFoGJFX/AG0vMBAirZgyvP2scqHCXmqiJJD7XnAKr/9vfyDFR1T\nfn32tc8vEh69K0dP4g0qS+ggk+zkf7HdYaaW7zil4f1+JR1flr5YIBCl9fD+\nNeOoqlwfyzxJx095dBozQKccNywuDV46iZRme75xkLP5w6x3krxvR+UIurb8\naWvYg4CrBbUGWJmU9bNFix5gYP3HliJDyorTIziNfXiKim6s4a0T0EhlrVA2\nsuLjvsyh8jAruLbVR9MIDBcLV1vUKYg6ykVRV4Pneiye6K6HYdyJXnZLcjSg\nlTc9HYYtWbH41Em2NQ7rs3A5+99l4+9pkW6zGIoK5diHLWG/g7CS1L2hEsQi\nIJzc2CCxAbTvpMW9gPUbIHrTtRG8IXa8cQUtZbcEphRK9MmfqTlkUA+nsSwG\npMHP\r\n=p8b+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/touch-target":"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/segmented-button_10.0.0-canary.d29ec2862.0_1611591852843_0.2731068164455879","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/segmented-button","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a1f69b71a96679286c3811c9795e99aae081e274","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.96be07c68.0.tgz","fileCount":55,"integrity":"sha512-ErhpUGIhnArgJwGB28xlybNifZQLXFBBVrex4c1t579H5vci3vc7nwtJ+ye1mQsNtH3ufVtraAwDeFpPT3S2Xw==","signatures":[{"sig":"MEUCIQCbz60X+xmTOsBo/YNwB2un/L4YpfGhMij6fINxi6g3agIgMysxDKWljGjlLLE6MhFizRSeFbiMBZS3kK2Phi+nyM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD131CRA9TVsSAnZWagAAuegP/0slF7bk+3LJNjVM5WXV\nDG/0agKVzvtiJHXF3co+9p31Jdz8w1blKb/obd2oHTX5NaKUfvMqsCwJ+EJA\nWyIG4XzUj+7QDyArrHfZMjTmjLLQKvh4KKZzmtwmBhsSz2NNs7K72/TBXTj/\nQvMwIqgOkOg/zxawPj1Hhj8YPrCQcuKGdykQvUfyxUlDzv25aPgMGNRpZ13T\nH5soQrknJnn3iyqgI304YxCikqPsgikSlKgaJtrcoF3poJ/eM6m7dQPyGm2c\nyoscJ0BJqGnvXw0O6ll3d7G/bb0Uw5PB3jjJP9kTtAgbVraosNpYFspho2Om\nT787sH8h9TWGCDRJcB40KxpnXzxhSmSOl8YMyiQGPKrggbd2Us0shNGSyxbi\njLLX7s6/Hz1keru2Gnkh9pLzxPF7hTx6AdZxPXpgD12nQdM09dU23v4x26u4\nqr9dQp4DKqmEKt9hDQhb6wV2wHh3eIaEXvWQcZNDPaTggkVYMwW/NoKl/dMP\nAqSUIUJF/Q5Vzcttw8g2zM+7barRwN8JNa8d30CciF15Y41b+d7ZVX8oPqCP\nE5GTI0yxUeyUrc6RdbRZ3QKCaekd6U2dHi+ruiBcmfOb/hGs52hUZ/2d7nGX\ni0yGn9tLa071IOiUErKwBb/ypBZi6XLfhVYxUf3vSWA7YHHq1xqG2Aw7J9Jg\nDWfQ\r\n=22mq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/touch-target":"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/segmented-button_10.0.0-canary.96be07c68.0_1611619828626_0.38299701586103607","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/segmented-button","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed516e56ba02c7134ac78aeaacd9eed9216267ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.e383944e9.0.tgz","fileCount":55,"integrity":"sha512-qHWs26a3Rzold5zdzI5P/l5TLYto1UMts6gGGi0WNzhVndW25HB2mX75oaAkkYEOO/2y51Qoa2lD6VH3klXToA==","signatures":[{"sig":"MEYCIQCAH1EP/F+VUjQfNiOhE43cxwXTDhSdNCAYUF4GjU2slgIhAP4EsPFqV8m99P7hjoAON9meFqvLLhJBHmij/meUWdXD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QrCRA9TVsSAnZWagAADDAP+QGwY4ydQ8zMyuW57tWZ\n0SD9XsvAF7NfhtfgBN0rGjtssjPAQg5MHfmuuEsC4ZKbt4i1xDgjxaloG6AR\nk2ld7Zdoo3nHdYGY66asmlDvXfxa5TTXw1Ypb26rIzNXy4UqB+16tr/7+7ym\ny3JUU+2/AICzh72RF3DkXzJlpJ80OWU/IlB6yc9MPh3uxKD5mHitOSEctKCT\nzp/OOc6+P/KYFJxnXDHmTNNYzAJhr0hOKcRywHPCZrqGXt+6CAYiVEk+7GpF\nrWwQhD3nEbL/7eXjOABsIo4iKsF+NxgNTleAuxB+49R4RSk8WcvxxiPhW356\nOkxQDVZRX+Jfpd9d7R/i8hy4V/yttpMlCVPSuAmkWmAgaKCWdBYuO2lJt5qY\noTpFkI03/n3SOfVeNHKcAqDu2xtUvcNo8/pGgYGOf1tdZuWfUEC3pJsmUaLe\nhEr54WanYfzM6NQOiffDwvx9Q/7jnHS1CDQ4te2y1cncbatBxaSIqIsE/qt+\nAU7RBCvaor02MCZezoUlfQPzYBUMOfc4fdy+g3fKDuwGZWnvhnD8+K5MK7Et\nL97qpAkawuowzrh3JfxaBjWJUlzo4ynZTDYFw/yfQIdG4O7fzBu9bAbxBiBI\npSry3Uu7ZwCKCctJZEm1KB7VEIla5RaQ8yLyXQnLQw8xrSdS4W49bzLCYYD1\nyYSu\r\n=WVjU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/touch-target":"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/segmented-button_10.0.0-canary.e383944e9.0_1611625515235_0.41981246720882837","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/segmented-button","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75cf7622c21407c68f72474e728d432d374db08d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.623af861e.0.tgz","fileCount":55,"integrity":"sha512-WZNRY0A4ULNRhPE0kTw02yXsEW+ae5U7rzHAE7owEYj0SlqQ5iv9auzv9ZTg8CXHNXx8NhG91DUeZU5YQuyjew==","signatures":[{"sig":"MEUCIQDxFm1j/LpcBSW1sEkDylkLvzQQ9tFCnCUmcIUkejhouAIgaS8JslYYLpiGlJ07vy3hzrDnyHr9g6kPZemeydEqO78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BbCRA9TVsSAnZWagAAoGMP/i8a3a13twgZO29xbzcn\nDeZB/rqohGK1ab9FGMj0V36L6IKSfOqXNMT4D+J2dsuJr1V8V+dnop3srh/E\nUpa1sdgKKy3QrFZ0y/9PqPNyBJ5pOzEJdrB2xGm1d+Gd3v2H29+AFBB++OSe\nLYj9AT9iWJ0mzA6H0JzKoH/ryHxVBbBJScN9b4/nniLqQxFW9OFfdVSs2bQX\nfWSex6y5OzHx9w5hVWhf0m69WonzNxIWE3qseniffS71AI9p/aVVAC6DlxPe\nWImahGfJwbR88QBrfCV1Hfp2CgXDGiS7xUII+wzJkg/HQ9qNGQpI/VGMclFg\nzByJBsPOuUAEYeOnzuVq37nFvCp8FBid60kNP3bOxCz7wpcCeXvG1O1YPevm\nT3mB4+gWe02K2e8T2iZsBl6whUu3kfsaSJ0+8KPQRju4yUjQDAnUC/jhfl97\n0xr0OIdi4fRKWQ4ZeousPDoXhNMCxpvFaUBBszH4nZcvsk4rn/ZM1UwOasYG\n4KgQKCXx3+FvHRWZlCPcGtNa02OyNppzzn1b/0VnpPl8Lv/jp18/0THDvCUa\nxMODemW/lHBXTFreplgmtQaG64+IzWmr52VUjEoZ8TMg2CaIXMO80aq0NS6H\naQ7OPIk+jj9mWK3Rm6qqd5mA+2dLIZbGWMKKNT37wmk89W7L0Y1utSKqOpXd\nXke2\r\n=WsZs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/touch-target":"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/segmented-button_10.0.0-canary.623af861e.0_1611632730832_0.8181818172645228","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"098384aea6709fe5eb56868684b0c71968e2657f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.6863fd43a.0.tgz","fileCount":55,"integrity":"sha512-vmB3y24Wdmbt6Qw3rSPoRtiP7UErFzyNDfw9W5cQdffQQMbQCZGitYbTIluejdhin2EqJIxEsunccVxGJ0DCHA==","signatures":[{"sig":"MEQCIE3EF7g8Zm9L9T4L7p8Mjy0LSCmS4bkwXME2l040zhT0AiBmpjneXr8IuL+y3zia8EGINgKa5qJGqBjcP96HBbhAkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIqqCRA9TVsSAnZWagAAJlwP/jc/jqykAu+GVLnqScnP\nNhucMdM2gEB6k1qHMozeGIfbET4vkZ49obQLTFXND3RjY7c2FOs1j21KkXsW\nzBj/qMzLEZKKvQTNIj861FPEW0/Rs2TQZw4frIePe86Yx9d/sXuhrwtv2XrB\n3wpACAiZPQqLVd9BXsWN8CcLCnqaSF9JG4S8xbLJGh1X4HkLOtObIGcXT6ka\nXDUb3Zvu/BAy9PeqiTCEJapoQEUZK7VR911FkE9NwHsf2IxSuQssUELzbGS7\nypzwCGxDlgh0JJccm6ATcGlvM04y+Iqr+Api5+sADmqgogC5FLhCafl+Z1e8\njcqeTmfkoupUd3UyK5cmuwU68Z6fNE64a3y9X3iI3uGYqLDWOh3W3MUFM5X6\nTY9NqNHMdx0ryJVhrVnQi9iouVF8VmtcHRPwMSoEyT0bZhFledIp0qkT00hh\nV5nLY/4XhUz8RHjmMdpv5bRkxfSpypMhY/5kItoN6qhjZhwrVoyxAaqAddii\nVnBjwfN6OaxMqqPKCprGjOnat/++jdp6FKHP/c6K4LlkITtLHMo35dkgr9AV\ncozanpyvOHpFQ+F3kCz6xljvc+g12G8VAyXYCxXpfcDLwcne9Wq3oXNjLG3F\nkWFvRxXbwYolGBLS9M2m40H1xvZ143y2MnTjq19AGZrgvxBRg4qVi5DFA5f1\nzEjB\r\n=ofH/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.6863fd43a.0_1611696809744_0.41305618343945283","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/segmented-button","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"814d81d5511a289173778e61dbc3a59323531d94","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.ea55b87ca.0.tgz","fileCount":55,"integrity":"sha512-n4eyodSisX39GGMmKK1n7afpQjZ+5OJ7HAo5EK2If/yvhDmw/C+72Lt97ZBQPrdQC0J08sIZn73E/0QvozSBhQ==","signatures":[{"sig":"MEYCIQCnAnFMTxwy945GD3RFwuYn1HeJG5P5bLSqn3EYVmYWuAIhANj/6z9IIxsGftKhSTuqNuTg6nKYK0a7Bi3cVh57qJq4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKnOCRA9TVsSAnZWagAAcl8QAJQsuAr6G0nnBxMqedm6\nSKVudJ6kafi2T+8zcjFoCtO63Q7iol6ZehqMG9GBaW3QNwbRXtSKlJIOPgjR\niS3NaC8DNabTRyDJIm72M4qsyBx2O2IFr6g6h37NLkI0DCxZZBKq5n5IX7pd\np14DEplQIrPLJmYN0VDa3W8MEuPUqMoqW6TrYcBJlhubREhHjAA9H4Mb2qqY\ndKThaQJSSLgd5RniQklBF9bQM7Em176F6AEF6RaYeczJv4+eqD/OTlbBASUo\nnLPT/Yc0Bi2cYg9lmHLjdP8CV7y8M53Da0a2qf+xtDP2YDUe6AZptQshhGSo\noSyHhGK+A3Dc8zpTjqWySg4l3nhx/IJKpueOLFVb/q7xK1Ha+yUS7tdgRSBX\nXl6fcRrNePTOmDgnHNyKEgSwOCy97I812UjuZVL/A8wxu0Kiu7X38UN+O6N8\nk3oBJ93CWYxTUoKF0A7HPfrjczrAGQCQgyLlrMyTMppieb2q0M7HfcupYlnT\nJGkS6iu/22ynTFjGlcsl0d28x7OQJ5Ayjv2hCHp/87X4PSCGGTLdcQFz+oUa\nAJBTsuW4g2nxMoU5n48htUmXAll86r0wTMMMb0b3HZRwBASOl9FXuktHHq60\nTE9a5swTDoPenu5VhCAtome7pTq1fpfgZZqbVHs0GxgkvdjDZpiTsTdt0JAM\nQ9JJ\r\n=0bGy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/touch-target":"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/segmented-button_10.0.0-canary.ea55b87ca.0_1611704781992_0.2868381828661952","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/segmented-button","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"66c7c8a656db12ba8af02e223f8b7f34985ba727","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.e902ff05f.0.tgz","fileCount":55,"integrity":"sha512-Kp6uTtEXclE3lRJBmXMavBoVxK4RCUN1IdUKgGDVez7MsvMy6LPHnkgwJUivpfrwTmf90oijWt9ANRR6KzScUg==","signatures":[{"sig":"MEUCIClzQaMg/6oQZ7mpu2BjrxgCgs67aPbhDPLdoyNn6LrUAiEA2ywOqx/rP9ChkiBcfSGK9XVdCabCFhNAdxg+b3cvEmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4FCRA9TVsSAnZWagAAjToP/3spF52rWS25quSLQCs0\neecvMIM4rkRp1b7x8JpEhlC6P6dj6Bwutrbbnn7ah5OwrJ4tLR2X4GKDdG23\nZ819rJWOpD5maG32i/GyVOhc35baRQaF9G4nTbx928RkV+RiMluEZu0+04Oa\n05yELQAnEJ8Wbshi06Uzn/otCo4H6sjQOd9qeDU4ZVKBnt9I3tBYnhVukCLs\nnEXHTSDL/ZUG0U+TBNs/J+bgMEu2Gq06GNi8q1EPMaDWTXIyp4AIHvxFPfKw\nKqqg/+oyEcdhjNFqBpOdf+pwPyNatNu0HDDybQk0THQx7V1Ici5rThahP2q/\nEMFrkg/m1Tae8+5Z3hDydufqSyPyzch28UnWS/TWmrmTTq6T4RHRkaQx1Z3d\nIU92eVN+3Tdw/0rUSddWUxoLfAOuq6FEUeqFecWiIZMfaUWgdE83QZfkTDsu\nE94l6OIPrUvlFg5fbPBlYAL0GtXvmRzgFVmWb7ATAS1xSZhwd9Tv+VklqaTE\nqEhd8BaSh1J8OjA0voFT7Z1Lx78u3a5WcriY+f6g0RF6im082BFBwedsJA7J\nlbLX9+EHG6il19Ez487FCJjA+8SVcI96biVrzVCO1O8f1iKctOWQRmq/xFLU\nueyuthlpihOql0AXJty/9mvxkFrF2vAMJUVZewFfBM2GwKV8WvRyQ/7AA/fb\nu0F9\r\n=C6Xo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/touch-target":"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/segmented-button_10.0.0-canary.e902ff05f.0_1611705861054_0.006369461612407257","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8f479f30f51e1843212ac7bf6772237281efab2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.2c9fc538a.0.tgz","fileCount":55,"integrity":"sha512-Zwht90NNuX/owhLQGIfnwyJJIm10xe+5X2hOIHVM54N+V/KnNhPvB90JKJqKGvkZjVkhod3+TsrBZph88TOVYQ==","signatures":[{"sig":"MEQCIEPKsF1FHbll0wLrokc7+i5Gx/QkEClI8A3DVMMa9jCcAiBkDGiQUA6oDQknjgMdgchhksuZpVvSfJX7xOTkXIasxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNxCRA9TVsSAnZWagAAg/AP/imKbkLVFI2Ue8lWkTYC\n2KefxDCAgqY5AHX0Chbs6mhxoItsAsLGfNyUa+84lpmAlEOvqVsw+lBBzKph\n/lyci7zZUuk9x0IdcMDHQdDer/QMvfnCD2RqumSkYiNJDeI7rPtIt68J5rZY\n1OA4cT+wUjupiKAvrQkcV3YrJ1MWMGwRKTsAwNl9zGqV0sh41hb0C1WYK4uj\nR1HP8ICQZ9dx8XQd75P2vCfh9e4NDgGbbce9IOgdLxPGNAYhaOH26cm76SSF\nEfErxd6AmIhLs7V7RzjZIMx9v8Od1kmcItIf/tZ1LE89QZOnQpBmPnEG/Bj8\nfRDUPxg59IKK91OLH1SqRrBmZvr4pztIBws1GOlcNdjN+ppcp4LkYnJ4UHcR\nK5ezDDB7zLmYU8Yh8HVbAueZI0zUCpN33MzUfi2KitMHm9Lft5XyNL9jW3z9\nYyMMSJLXggZvvh+vp6CyUSJJrTs2HOqTXvb4I1zA/NjbYHTX75a5kcqkLTRs\ngY3Q1jhJwTriyTB9frgLSgJW0GIljOs6g2vRrwvwcSu/C9724aLlIHU8obhP\nSw/IRTLtBRWFnburuhVUdLhQjuZyCzotLPgyCtkB6aFwu9I4qIYuxkQsrz2S\nezprdXvSNK21G/iQHfTfN3Zi42tJ0euNMh1HdOPrcFBwn9uSLDqbLZqHRh3C\nzeJr\r\n=svmt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.2c9fc538a.0_1611707249312_0.39535884188321524","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/segmented-button","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"37c979e2fcfc686182bca00268e4d4d714971b7e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":55,"integrity":"sha512-DIa68gayHLX9cDRQMqONZy9+kieLxOclIM2h5Zpi6sQrqD7clyzfx9y26qIBePMJxNezMpMhW38HXMf7uLMMtA==","signatures":[{"sig":"MEYCIQCIORl6b5fyeE/71suPADvZnSOxOVzlCIPdmjlv8HEIvwIhAMdXrta9HQi9Z1zbvczkBoQV761uYpcW3vabWWUhyAbM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/bCRA9TVsSAnZWagAAF8UP+gPapiRrLAxfcXupI3jH\nFxVVMqM+8SWAiZGsgkkX7/EU+SFnhtKFGKxi7+Ss4Ivt77WvR8tyK7LzNglc\njqjJp/3wHB6WsOyvXbNe2/xBszkQLxEmMtAZRcS2N9B7vb/ksOYkZWnxzfX4\nNQ7e00s5yvHr9qukHfYTsWNwuIQpF+p0ID78Xb++UvUjUQZ5IlOJ6Q4U3ehB\nb8F19Mw/mgau5aIvUUYYNSN/k8S90ISdoae991kX7bPiWB+saX3+nzuogn2y\nHl9VH3lpcXa+lLiWw00xLmGKdD4UgI+Udu+ZGv18yNW2cRVNAoos38VfxfD+\n51k56c+g5E7W8JIp/kWumtoXKAZ7pNV9wkYdBo1iYvdXmU8kT9uHlgW8oK1A\nrEvTHwjt+HpbPqCi+wzBxcIpHqsIVcA+T5MkFdUbZ1PDLHlWaCFb0c4F3s9s\nEgZMJ8aBvlPXDkrYNfpWYVPO3WJza+afeTvoHhsIh3uwaqtG7OJXuIdonNlK\nQCKMgqbHtBetXjf3euNKUPJgK+C+knH+uV34mbU6nbXd/ZK7g55O+2QhtMDe\n0jTNmbcwcZm5/29LqPagCDFjt8Pd7uDj4XOIQcfqtdq/khKHaObrhS62nmuU\nyL92M8jkvqfI3cZZnEKImXHgVXF6GVuGNbHFbYq3xKdJc7UeiaOeQsDKSTxJ\nq/FR\r\n=5AoE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/touch-target":"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/segmented-button_10.0.0-canary.6bf56aaa4.0_1611710424466_0.2338206405261931","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/segmented-button","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1f2e74cc8ef7de316097d579960a20ca44f7e204","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.994873795.0.tgz","fileCount":55,"integrity":"sha512-0SBRem3AcGgGc6OPBuhjHash2uUGL4SuSZk2vnUmzOYlSBIcCo+x1LG38evy57gm9uE6R8NT8DUf+qQD8I264w==","signatures":[{"sig":"MEUCIQCCIZ7mgaFE2lKiSfkzhdUzil2hG9XlVMi1AbhDV4pgGgIgcwY9m0UI7yvZ1Di0x86AnnDfbvaD64DZ/pe8kmg3dA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3qCRA9TVsSAnZWagAAO8gP/3yIDQhk1u2sAj1rM7z7\n061RYuNXazBdyfJtqe7TPlPAvUsNCpKZNYBe+YqonnPc7/14sfISBhJSAuoo\npfZ9FuDDvtxt4gWv59IoiXqaQHhEKWPmjAra/2z5RMqhl1Jyt7n1jSLMWJ/z\nSdbgtBxPg3Z7b/KDSyvXBWte2hHc1I5x828PcpprUPFKS4QOMFoTGL0iaFag\nwWNvRZfjqS7ee/QL6ErSM5z3/HkdhUgrH3o9O2BLRoDvTw5rnTVthXnSUUu7\ng/Xwb1y4ee7nPB3fBfjB67JJB4eXjnY51gCwPKYrOzeEYRGfxCSQ7xlYPPJP\noibsVUL35MAHnWFFjRxujqIjtt5OSy5NH1AHW5EVBhwMh3WVZERUaWRoBIlF\nTEwCoJicY7il+k//RsiwySylp1HfHdYsDFLT70fl6e9pK96F8jCZKgOgKgIg\nBkn7qEvmcrODN/uLqp2uI5T3ejyEntl4WndTPv3GvRNHJfNknz8bVq+mfBUZ\nSRuIWkp1iiE0q0LH2WBpFRnUgbNyswvhPlmI6fy1V2/TpIbokRdCi0atjANT\nFa/k056AWCcBI1sCxigMkAq5fE+J3TQa9hILZ6Gz4GiX/wGpxGf2sFF2KTsH\nh85KFueZezDjeM9DT3LgG9rUJzzfgYwYwjfzzojHnrkxaxC8eQnXiOEKzjWp\nRwXO\r\n=3/yz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/touch-target":"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/segmented-button_10.0.0-canary.994873795.0_1611759082364_0.5225156150142642","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/segmented-button","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"47019d502be951791ae6af425a258233e9d27b0b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.96878e1d0.0.tgz","fileCount":55,"integrity":"sha512-Zm63ITVJM/eV6rN3iFC+wOsNkWTfPNdAXgpnf1qTJpvrVYew0MDiV3Mo8mPfQc3Jm4+AQZXzOw+VWltmgSKoqQ==","signatures":[{"sig":"MEUCIQCU9M6nL1dH3UwoM596xbIPwTE8dgazsG3/r3B4Mb1g5wIgEJJZ6a0KkVYOqIBWvoeWhaGCP/9adyZGc6ls8xf8+74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaq6CRA9TVsSAnZWagAA+uIP/A4cV5ka2LjSBTtMrPBq\n9HpuSBILaOvBHU9enfejlNspev7sAxAXlSvig+Brri0lKUX1E9zZuEXVxBrL\n63EQN7vtXIiF1v4oJXGB8sD1Dn5gX7m7qenlRIQXPjCBIMGxUVfy2r4cxnMy\n4dXoLcbt4IhxFIslvtzKklQwczfqH5p0B/lC6wqRNTZngYq8MXeSHA8WAbbk\nYG0jT81HuGif7KcTVYMN2MMpsv4xUvMp+FbzQmYgf6Zva//BbLreiM/xvoJh\nEaHx1JkrHJMOmTFdt0xdLfH4wYaM1KXB31qq0Kf7AaCVQx+pFAjjWff5cENq\nNIrNMlkzFQLPhGOl9bkmx/D8uBGj3a8+k26Oomh1Nu6LS7DALBAHWF9BJCfl\n6HaAEAedUS3UvRJP0nGNAdxca0vgOTIhWOaoAhpUla6SD/x8BDdNSgMbMj66\nhad+Wd7pdL5noXPnG9mP25FEh/WJdWn1ugI7p3a5EpCRejOQ5dYU2bVCPmHp\neOB+rzf4Za3As5pshiPTAyOzeQwmAloWdFpLvvo8LJr7OMMaIugpalx3UsVM\nLRPadM9tQC9Jb0Cb71tDEGpcpDpH6U/3LTYwO/o2noVCVJlbJKxR2troQiKO\nmDYAXfAZZj0RTVIcaplf8QT/ZZ+oFqpSXkoV8pgNNE+1LbjZJkZsx00OJ4pd\nR5I6\r\n=m4Ny\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/touch-target":"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/segmented-button_10.0.0-canary.96878e1d0.0_1611770554066_0.5074987816902357","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/segmented-button","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bdddd52fa7844da067c482a57746eeaee155d6c3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.3c117cdcc.0.tgz","fileCount":55,"integrity":"sha512-UUbae/gZ9XuwjrRN2dhwEGugRklVje17u4riSniTTL7hhfaZtaTlIV3kR9CNixBTPDsfdpv9SPAY1pRtiooeNg==","signatures":[{"sig":"MEQCIFHPABxGMGkHlndKn9X1Hi2qn42s9bkYeRLso1/ajPlNAiBOw1k9V4GLHZX+uxH6ny8Dx/CsJOHNBSzrTorgigpu3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHHCRA9TVsSAnZWagAACHMQAIfjT4Vm6lG4fAHuokZb\n/65WYZTZ1nwNfe4Wo/yToKBQGYzGSI/wXa9144WTQu03L6Uuo/xg/X359cEu\nEGEeKTabIpyJ1mZa5JYLf9K6d3CanE6RWwQU2uHYq6blESFoAhPzt3FOgl+X\ncehWlqXJcgogu9Xy2GEwV9YnVhmWzYaJt2Wpk3J07X7eTOJ5bSs3VmvgLLm6\nhUO3A553kC3viAadbVn3UJFbes1wnCzMNNz1wPt7OVsmD0e1VoKi8OokNZPX\nW9a3HZbpoEsbWy8v2s/hnPsnmlmXK3BRLfHW6xQIhWnXNGFG+Stk+eqhir/7\nxqVHkIQYzDLT+bwrCHbjmLMO/Jh6fdHtfQE2STYEhWrtbRDeOABtHDu5Od0B\ndskw9FCIVlY7PYMJeu48ljZc017TvGuci76g5ZBs2TfRHxP5KOpjqYdYD1xw\nUs/LMDAz7bfLcPC4n+s3XyCrli+qhjUv/AVgnCCRuHwQw25zKptiTPaU1kxY\nVDwvKizOvLHsrPBZn76LMfsI2CvnVXSfnDYmLp6oM8a1DiIYLGfx84/2O5pk\nBm/Yp+Uz9qW0fKtY6NlM5/0t1O+cnqCbFfB3uGKUv2qXCKvKl51VVDo7DB3G\nWpo1fX3JxXW8MIQqXel6X/5RrGUFpHkXkWaTjbanozNNVbBGgfUN4pFb+YT9\ndPcB\r\n=UjBd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/touch-target":"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/segmented-button_10.0.0-canary.3c117cdcc.0_1611772359451_0.2811686729727092","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/segmented-button","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d067ded7baf5a6c6708bc3270efe798bca4f7422","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.b411e7033.0.tgz","fileCount":55,"integrity":"sha512-4erZ2BKCyTQpyc1n31Sgr807WBXIsj9sso/9tB7p54icFOiSUH0kvF/gRUP+VqVd/YQhSdEXq6ID7ZZe50jPjQ==","signatures":[{"sig":"MEQCICUuAa/k5C71NtK3OlVX25/LCwUIPWfV6upJlUXi2K51AiB7mgStGN0Jx8kOCThHJHdAqogC+Y1HkVv7GFztBORBqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNMCRA9TVsSAnZWagAAZyUP/1Cq1hOX6pYSAisgHm1C\nEVT3fxbl/+T1nzyFIOEaQhCS6FfYwawHmidZ5UO6VW1kkndeVdvyZ1eG01lx\nRue4RGHEecznIvNzuaagqntGqrqpmoUWsH18dhzQ7uvDoMP+XqB5zCbSJN69\nbclKq96kg1AufeHkrQJ4+67Ba/Q6HZA4Zu4MsPLhgKgP2eDurnWyvB0SV6gw\nAzypeFw0F94au9zjRWEisIxNPoNxC3IBvIZev3kX8fv10vGGIU0IVAVl3wF1\nRu43hjAYzPnIBrAYkUSwqTkKs08D02OA6LH//ezAbiJogPDQReoqcLbFvLyd\ni7x+o5vlgdDiCDwMctvdLNCAw0k1gQcYbkE55yKH8A5oWX3ug71QPBy4c5GR\nK4tuf6rDIJVUAN9KaXh58Ayh3a4TQlFQ0oY1PTza1mOP3pud9+7ca1LFOlaj\n0eZLleAmhEgPADtTnNubLZOGBvTTc2cCH/Ppvo9OhmSRYGya8blK5UhZBO0Q\nkhD2Duguc+/i4YphKtd9i5F6p6bqSwmKeJ7efD8bIgipcS3RO8Kl+V9oEo9O\nE7VMSF7gM9RNA/KPeCnSRF3Bc5YvxIeq6yaSMSVzql2xsRwE73+YLCM+QyrN\ny++mzqAPmeZu1vlVljmSghOvI90itYutFyFRuiabjPGY1p+Ur5nVD7CZFIvY\n0X9S\r\n=Uqbq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/touch-target":"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/segmented-button_10.0.0-canary.b411e7033.0_1611785035765_0.9982726855913278","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/segmented-button","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad92dd4acb9e489bfbfeefdab13dc3a893dec269","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":55,"integrity":"sha512-WzPqPAigbnpsDYh1FKO2k271lDoI/fVDKC4ay57sogCpDXwMcYUMj+F9/JdPu/t3DFcYYTrZNnQaYufUtKpZxw==","signatures":[{"sig":"MEQCIDjv5L+NjKTjA59nFWiGoYCMrUiC3YaL8UKBBnortMPAAiA3VR2sTGKdR9eHNdJ8c2afpUDXyIOEGTX8QuZtlBr7NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFUCRA9TVsSAnZWagAAidoQAJEuixRN1TKibG6w63fY\nTLu+Jx12AmVhd2/tMUEyyGmHhWkAbEqB1z0OzZ61BtakJstwmGlZ/zKf3csD\nhQZYEyQtv9TyTJhQFQ8Fw0Miytf23LH1PwbrAlNqxjKjKdPhfcLGWeeybNrP\nGealZ/nh6KQyGmsjBRvcoml1v/fEraUQqqG2fKgURw3l4HwdujH5KMtYFaIO\ndKMD2dfwykd3UEFtEz6vx8SfT50K+niU+FM+k5BOA60oGz9/SVMTQwjwpwGq\nlt0gEMpB41qAYxxEGK5CEcZmrAm4o4IXaj93tmMKOfLBJu1GIWoBX25lKV5R\nas8Q9KyP5u4qN92KN2euCVsYWaaf7QJQUgAYCAhfwZKU3ADk2JykKVEBb9HN\nPQ6kLA1qoDG9NpN4HDVq5cNHt4z1ikPTz6hvyMLgdSmrLzDdFKNSvh4p5BUs\nMEzhguP7uwmpGXXjmf2HG5lVspoY6ABUldn7mroVMBnxwNlHz3FXtiS6dXRB\n+vzoU83Aw8TviuKCEqXvs7exDG+PfYt+6HAXxK7LYsmKlyfB4PqCRD4sULOx\nCbX3n0XUZg35ZSItVVUOdgf3YuYD01v9KGs7fbsEIpQ5FdINupAXAVAAsYpI\n/62+G80UCitddWHfsY2sBhvjEKJij/s3f5G+TyYcm6l5gtDTIXvI344djKly\nfmli\r\n=yjRw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.0","dependencies":{"@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/touch-target":"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/segmented-button_10.0.0-canary.a9ac16b4a.0_1611788627692_0.8875407075443285","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/segmented-button","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"61b0726e49018c7af414bd894364eca42c50ce7f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.fec7b42ca.0.tgz","fileCount":55,"integrity":"sha512-9UTKasUV1LzYu0YrAWgbwihUTWYaRkohRVY3pG4Y33DiSllNxBTlbcQY32qQ0m+ArN781zgNjnWa2dqoRrwcIQ==","signatures":[{"sig":"MEUCICeuG1rqkLRPIKGA3XTjSe9dFQStI1igQ1URq9WAUfptAiEAzSzfv6h1JI5E1xxsRJfa+byTUEh1taGnFO9wVzcBfRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0yCRA9TVsSAnZWagAA4h0QAJhf3CzlpZYcdDVZGFnT\nHKvQfDiszQ2yjvD4hjbOxdMWclvJE2voQIEDQuQ5qwyDhT7iiHu3sJ5KVssU\ndKWZ7IspDYBB5rTkiIZ3X6gmNE1t079M+n7SXsadU7tS7xiKAJ3EA6obucDz\n+iBrBnUKVXp99PhNIGbz0sWRjgF10nz3C84FuzgK/ddnzsm7beqS+EUk8ihg\ncNQmhELPf3RFj0HP/PChg+u3+Nb832G9UnJdT3HqLDFuupS0CH5sUvXZNQw6\nqp9SEAcxp3n2mlnvw9zR/R0QTcFOT93Sqojp+D1nTM+OLMgYVQQcA5oR6sXZ\nxYC9YVfU5B4/8OuJnK6q2iEy108niV6drd/DBLqwcVA2gKiudEjyAvC0dRbV\n5uSGLrgdNLsB46gVrEvEkvEktsHXfLv3JjmTq/kFuQQ+LIjjgL0fbj1fKcSf\nZWQZU3twnW7I4gHvXDAg6ao26mAh5lpl4oR7YvLTcqD0lC0wMq4IEHOgz91i\nAsAggUpy3OjIu9t9CNQsTaQCoGn89o+IeRiJydX3CfIgdCRjMRggBkjknvbY\nmTTDsKjy65U+QOr7GsrLF6/MmHxEJfRf48OM+E/seAEiOMltbOVl+p9rIfWC\nJK0NQ9jzpgS/D+R9zGzmm1o78j8Op0k6PB/EXYvrKblS7+fIUhLmbjlQ65kG\nBUad\r\n=tIp8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/touch-target":"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/segmented-button_10.0.0-canary.fec7b42ca.0_1611861296554_0.6501518256691265","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/segmented-button","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"58615468931b226c4c0d94975b70badd45bbde01","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.8e66dbfee.0.tgz","fileCount":55,"integrity":"sha512-lIj+TRJqGMZdq8eFxYy5/vT0CF5eXfVhRxRkPfzIKnaSdPTAB6/noO1SnklvRBAcHAt4NQBeGGBBQLTTaDObBw==","signatures":[{"sig":"MEQCIDRjUxOCC5su078WmCzAWuhhHHzuIQma1hKE57Y1B17mAiBBTqHlt05yLJx6XnZqrvzyvI9/kxHKS4FY/DPfsl4uuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzMCRA9TVsSAnZWagAAyXcP/RMzA39Z1cSOOwGJ47Nh\n1nN+BdqylPEswwmDAnFysczWV/Sv+/5pZ0SUmqHTeFYvH8h4s1EjWGk47c2l\nY0A0WkVRDg8VJ8lmiCjG3jLZH0Ou4oDgdZjC2ADEzc3BOAOQVyTrpki4yj5P\n1Tz2sMT1UQwgEHGPCEk599sMsa1LpT8aj2ezECrhU6m4kUhl0qxRyQQdMsMs\ngYIVkzM0Aqii4t20CYpOJGuT30Z9Uoocdz0nH+rLAkRRO0AO3doDU2r3NZQ5\npUhbPY4Ti2SKl03u/tn/FJxqcZvwmvMNrVtYYA7sptri4ynDYrVdG2P62vUZ\nTmFSC8jnACtXvK3jMEGawkzxNqqyLMpT7q3u6wybLJio335OOUJyIbXjekCR\n5qp9x5Z9cq0sYDWFMBKyi1E9DTUHra8Z6iFP5eU5MaNNtoPCMkGsSbbK8sjk\nJ28VLZz3GFAY1fRHvpZI8kICPgKPD9l/GUE1yMixVTHH11V74knzeYJsVsIP\nQL03nsK37/7QQwfrF8TuwQ1zYLvanQccn2hHGWJwpWikkXsyNBNvIywhNQOM\nTSLPAkw4ypiiKHmDMlDoCLgmAayD7awIYLsjtz7CJq34VHCfZYtQCWH5mOVC\nS3JiwhLuU8dKmXh7LSPaJ5XsJUH7srceCGQiXOOW3s3Lu1q71G2wMfOnr8AV\n7J1n\r\n=msTm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/touch-target":"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/segmented-button_10.0.0-canary.8e66dbfee.0_1612221643860_0.1980732269142007","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/segmented-button","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b94b010420f40f045d83b41929fda7b9ec1462ef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.637d15da6.0.tgz","fileCount":55,"integrity":"sha512-En25Ctqm+ApGK3xXjVFX4kCWS8s5pbjLbypcSGTB71WMEYKMYEG5eheK7UjNyySTCU17TyvHJkEHwhuehqRBFg==","signatures":[{"sig":"MEYCIQDVF5nrW3StaSLLLAIqZsRzqMRPtChEUzDsKP4iJ2FyrQIhAI8vNXpDFYvt7qp8f2qH7fdt3llvCb74g3fd4GpMROEY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ69CRA9TVsSAnZWagAAX24P/0pMYS4tkdy6sIHJK4in\noNg6w06ANOEA/AJ0Q5uB2RLwzb4g37E5zS7D2DfRMqKp9eN+lsVKq0fq2lxV\nLjAe4Yx0/dCj9zbxeMKjGo4a3zWmfdROiuYqACConMPa3Au2FAsOBwNK3ZfH\nhkgJ127LEbnpw/OtvnzwimBTvDpgHSIuCmEZ2qPmddLI5Xj33PYoYgj0VpXD\niV8zbPnVl3FlPMeFZf73UlBBeoNa0vaZ661AKcNvlDt8RALZQPltuZ1sPpbv\nytYIGeGHXKJt3L/qMZnJQpByOifT0HR/HuDCHdx6d50we/BXwxQv4p+vOANp\nZPMgv1wH2Pr4El3mRufKaYiAZtPmt+tyzdgiN1RX8fH6nl988rgzDtWdIYN4\nETE5XaKP5QoL5K6Ek6MCYbskgqYCY4OKTUdZ4wnxmxA7QmcA98niUJCioIkj\nbNQj9Nzct8Zx7RfUAR3Sj9F0JUnTS9Mqb2oj+8rEd6xCm/E1DjF0cU0lRltl\niiMJXyemd/buGDOoS3wuExt8qe016Q3C+iKzjspJ3TFpyt7f0jtNmqmFFRO+\nnK1z5rwUH2jNXQ+F+Ibs4uY4U+G0kWFr/KYHCLQpQ/Pm4vojPpptNqL+eALk\nldFwrJNvtxS6bcCPHvhK+VEApIJUlJOVx8rUi8WE/yyIcKVhqOJp/LC5/ufl\nvvd/\r\n=O0xL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/touch-target":"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/segmented-button_10.0.0-canary.637d15da6.0_1612291772856_0.4033828730257565","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/segmented-button","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f9df325bfe671ebeeccda790d0d3c2106599f3ac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.fb793939e.0.tgz","fileCount":55,"integrity":"sha512-bt9PP0lKhmjkzoNH3SMMnnpF3uvPuo8n8XXR1mx/o1UkUN6v0OauJtrpWzGdrrIlB2aN2Y8CBzwkkirV/yCxig==","signatures":[{"sig":"MEYCIQCK3IL98xhNG66r2rr+RG91veLjrrmcp7gq6FHf+zlPggIhAP8IqSBlIsZjsjMlKmEwCxoGrEsrHjCjWUjOBtz3xZsL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOZCRA9TVsSAnZWagAANnwP/1b/dKY8yR7K7nqj2c8/\neF91nedKjqPTjkHVf6jr0y/CHvUdrIFI5R0k+IM9kEtFKeVPBNZJrVb9OaaG\nXRsPmI/fNu2MGXOAlpOk7XPTJWE+kIuhfADjKZkfxsCCJZbmhw8IrM0nWeya\nPf4eOVCV5PlAJE55le830fF3JJDLt0jUgi7wVUtHo+z0OR/JFo6ZXXJyEe+R\n53/B19e5PJvb1UNvutQVAjKSyePbvfm+PS6ldcQFc/6lucotrrVcWZ8pBVLI\nJRXAXwTN9vL1jc5QQioq5A0cseRzxFmPIc7/YN8KtcWn+CL54pwRIWSHvZOa\nkKc00L3D60m2qEWcQA9pYesVZ3SsOlLG+g7BllSFQqfuCJgbAGA+wqZl8mIp\n+Gd5b4QfQfBFHb+MRkBieUhFwF17lcyVXPzP2ZOrvCZSZWIiqNfOns8O4YMr\nQZ06I3eI9/Vs7Uylf47ib0+wILUjph/loxf/YeZrUtQ9R4qDwv65AI+eJRUV\nSM3rRB1mGW95H2Xt74CmJfx0N4v0OSfD/yeS7mkya4C0BIGMKZerI7+FO/u1\nPqz6JLXPrxM60R5fkozWbbYBeMc0/XHWsjr/IBopnyZfq3PQ0sWpsyskHBbn\nm+o2mhlE5bWQQXVmriIAADXXabnxkUtVcrSWUm+I2Rlhg6M7Yz+aa4rxQlfw\n4GXC\r\n=+M1d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/touch-target":"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/segmented-button_10.0.0-canary.fb793939e.0_1612309401480_0.0519470994868203","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/segmented-button","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a0e59ea52e2e81e3d09c21ed73ff1b8be607f9e6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.15a4d40dd.0.tgz","fileCount":55,"integrity":"sha512-u+tofDuvYrHkfEPM8IjetVQBAzgSbFmZqtVcn1uI75iaGB/t/ONbTcWm+722XQ74wyP4PTEB/YCJkCyCZsqzrA==","signatures":[{"sig":"MEQCIG/MHDKqkuYZ0UHWrHtR7qeoy3N4kBZKezPBu1V45OoyAiAjiP5+w8XKk5ojhUIMY49QGRcfSGUF1oc8oB4EhJtT/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGggMCRA9TVsSAnZWagAAqZ8P/2UsBH4KeKUsbF4d2n44\nZOYaelQuNsSdIP/XEb+lDOs0OugQDwBTOHfR1vwBs6HslXj7wMnCTQ7LkER7\nDmV8yxNEfKIPrB/TJeN3kRHnEiiAcRRK7NtTMSvc8gD30J+bM1Bk0H5RJda2\nSWb4ziv4IhB2fv1zOeqph+g+yVQxuYs0tm5LhYeriZCLN4uhEjOooRI2geqt\nQLa3Zh2gWdWffaX0QsUzi7qRWkjA2GJn3DgdXo4JLLrgdnMXZ9Pj213QeBh5\nJgIlD0ID6gjf81PAcT6TfJRHyZ0XlBI8FeS49j+JM7w5Ddzzc9FC5rVAnjRj\n8QpHwudys5REqPif0mCNTjMwdq9NUIDWL5rzt8um6zZMOtmpTuQXu0TlWstf\nKaW+Bpq7gaPX30NnRV0MgVl4EPxaorIVUV4L44Z9fWGB484OCv1MYn0N6dfR\nvDfLb+gINXSV77LJB+pVYxfT4B9Km6muJndsiKNbksf9uT19kOqPQZPYoEnj\nraPM67lUytAJpWNhr0UGi6BYtF8b0BKfexSqKdAEnJqTiQWMkHNh7nA9qixr\n6VxxH8kCOlp9FvGDPN+Y+HAJdEYGI6cLXwU9FUtBuGAytw0x0PiG0vj5sRzy\nC1QESfyCsE7eBCE8c/BCbj4ZU/uSF/9czZFf4mqnuuwJH2dtVYgkWNUOUfD+\nvByk\r\n=WGTV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/touch-target":"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/segmented-button_10.0.0-canary.15a4d40dd.0_1612318732345_0.9752897774648239","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/segmented-button","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5baaf75cabab603e0ce8be49fd0a08f88c85c019","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.7a003acf0.0.tgz","fileCount":55,"integrity":"sha512-bcVSwirtr9HT79wDla48NyRsgA9jm8YuO9iparbWtWZXIaxwQp8UnViiUygZEfMbmMe5nqzYrjHP2A/37RxVKg==","signatures":[{"sig":"MEUCIQC9Kzp8zTB15sAl6UQBoUG7etby3PEdl2nXkReA50lwTQIgO501B+2GWHlHQEzu2DpYt07TzwW9bP82SHZ/P3PQ+bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10pCRA9TVsSAnZWagAAwcIP/3W9o+IyANnN7BNS+Vg/\nznfJ4Pp4qzcqROJ4jVsyBw4bdE10kLIDfzmTJfCmLvrkAiTo9lG1PIEIIyCN\n/e/d6YLAqCf9umq4l9tYyvNQy32+rFOulFbtWgkNBgJyP60KU57Qcss8y89a\nFuclKwIPzM2uC6jXQpXLmE9xMOpBtUbt68+y3/h/6DnbptWmpkRWoI7LHvP6\nrU6QPubi1bp2gm0kY+q1FDh2xjlpIbjm7FkbnwTiPQ/u2b4JuzmCN013FhZP\nV06L2UnJ8vz2n3pY6yCsPoTqLlD+vujXyxUyP/fYhGVktjLJ2BOYbzurxWB9\nsItBEhTp87t6fq0hvm4rkUFLbds5/4FvLwj44SyRNg9PYnba9efliVEkF6OB\nEhVMdDiMRNgtde3w/8QPRCwDbX40iRuz3RxvYgJSzE5chwq+Ykng0KZZ2qOA\nnBVTd6VT5IAPI8IiUvI4I91S2SIMUyunLL4jpPcasSYdiNMKhn3+3t21Kf4I\ngfCbl0Lh5E5y9rShvzRbRX9leCB7N0DoG8DRx+syotYQokUMq2bS9rvWxaaO\nPtAGONhWZY9MmYxvJ7PdkUb+390ee3eXgi97FQ5xtefsJDqInLA4I8lHBFLS\n3xmY9vqKkv4HTM7jmkUsAZMLDLXWfyr9A3con2AVcMiJ8U4qrL7/7x3nWtn0\nB7io\r\n=M/P9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.1","dependencies":{"@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/touch-target":"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/segmented-button_10.0.0-canary.7a003acf0.0_1612406056756_0.6037089187190938","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/segmented-button","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3b18e9038a82680ee4e43b425a6c22f3baa0c41b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.05f249666.0.tgz","fileCount":55,"integrity":"sha512-HTFH1F/psFaL4yx7DLu5WQa7q2zZVRJIjh6H3nb5OVzuLb/zh1UQbiknZuRpL4CRO075hoZOo5FoXqNztpjwBA==","signatures":[{"sig":"MEUCIQCfmFV8Yi7IQhW2UXL6Mne9F6i4yfaps25qfJZmq15CMQIgCjsE9nuRhdzu/qyYv0FeKGk9tVSLsf6kSNO8uXrwG8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPnCRA9TVsSAnZWagAAn1oP/A2nAenBOjuAnCkmXK6d\n3ihQrwmSu5EmArfIxCZzvYspsHmmwJss8cJG25/nTHcn9CBmVlRtmkSN1pc8\nm791TUCXJ3L/7OD7n+PCrxRO3c1iCev1bl6BNXc1vaXvqFMG5IHiw0GZIsqI\nXzLNT0+c4kaF9zNktCJrabd+3E+e5p9V4OncN8QzqNrAHOO/zweaJCky/Xrq\npPlF5jMPmctVIPbsaVNhA3KKzaIddRMG88kOd8pLfzeZPRdEXm3VF2AwzPp9\nViqMV5Thz1PWCe5dD2A/o/+LPN6EaxLgcTOb47PfwS4HThHr9yul/s2lVCul\nienUtOTt7CFah4eZL9m5cECG9MKfwfIu6JTdNJDknbfmUvtgWkclZrs+nSUS\neeoH/15z+McBUNFIn0BwLfq+jJSg9ud/XCHABPKpyexLoyjdt6GzEySVFZ3A\nyoPvRHQ2e/kt2kgHSxYK4kAZWmt01hBqujuKE9D/JdemygfizwO/JOrfgg/D\nODX7YN/svSRhzu7s76eUE9k///CSfh0rQSZtM1njjm+FvCOG+ykR4couOe+H\nmuUstjTb78Ouc445Jizw6OR0lE9hyGSu/egZaQ6mLWtwdtSPkKdUv65esGaR\nHfUULE5FTWgI0ZOfnS2dwwEoJK4dlTqrenNiQ67+ZZgegoW3CtPq6+Ae+YQv\nagTj\r\n=CcSq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/touch-target":"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/segmented-button_10.0.0-canary.05f249666.0_1612461030524_0.6426722675798167","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/segmented-button","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bc7370e7b6317d6256f0190f052a70d1aaf19e5c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.1a3a39629.0.tgz","fileCount":55,"integrity":"sha512-/+1DZezoJ8NKtgrh5cb3wz9IQ55yna9LOJ6AmilEr75IaeuQuYiM5Wm8NsH9T0sdi3UU0492JePDdlIbvSFpaA==","signatures":[{"sig":"MEQCIDb6zj3TIc3KmVEHdKfvEtGlhqlK/JaJsU/+FNvCYLdFAiAGFgxAZeImJ5g1HG/HZDMZv1Yxq8x1+zFbm22HIXDR5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBQCRA9TVsSAnZWagAAPzEP/2OcI9BB3bvCl9JKg0Xi\nNyZuu/QflF12+i8E6FPolU0INVLNZjp8BjA0XLs1OXZn/3eSRrf/qB30isIg\nw2sfnLXHMF0cNeYo7+Hl/IYmIuCZjhnDZcrWmmgaKcH63sL6dfRfipoZOWYr\nGvAM6yM2SY3acXUxzSZhYv+1K1Al+zFE0Egmr8ZzNmP73EQC9xqVIcsrNlCr\nd+o7PsFoe4jEINl+5UmQ93zxnZ20TEo4T4BFsTxv5+tjM5BQZMnuBzagVu4s\nc/m3OoQcquqkTYnYQBeeL3I0rrDkeLGDYKYSsIgYt1yo8ie5++gdnolW0ORU\nyTbX6Xc88wl3PtWwk2E4kbdKXkyBJSENvfubGTzl5Mxgyn+XESlFIjsDvgSz\nqyry7lngAWAZ8xbUNqxPU3fd0ZTUwjNIo1Q9FXCNddgFFUdsFx4IVQYR4jFE\ndb/HXN2gdJGsFtbz7HBEwlR3MX26Hd1hL/Xg4nydpYH7Z69lIwjwwIFAhNoi\nj5VMAQcdc9VYAGR6P6uqFsTZ0YzIP+avKj/9sTHM6ghSf6MmSs5HrwdSO75e\nMsqm3vvQBvAcT9WzDvFB5Dp3qzz5FrCjqqUTKCJgHmWCAzhTEHS+ETwrLP02\nF3+qZohvT/be2ad5/226RkS7tQwcbs4D6xyKk/XE9CrosY4FepMto2/m/+8e\nfG76\r\n=nLoq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/touch-target":"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/segmented-button_10.0.0-canary.1a3a39629.0_1612464208030_0.5204669238236208","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/segmented-button","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d36aed24358f2fe27782602c5a6b24347a78c1d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":55,"integrity":"sha512-L9/eX+5SuvLTCpYeI2Bbu0CviTnhbs86NzUhqHlo0GE2Gzz0uX96thPgsp5uxsg6V8CsiJFzWMy09wIrXPTOGg==","signatures":[{"sig":"MEYCIQCZCpUTVJAMS5k3mnVG2sEirdQpOXmbIYB6R1D+BpZeNwIhAKdrYMnJvy7cSxKkOEwXfzO7T+TA0S3iH1h2Xh8OfEUd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHahCRA9TVsSAnZWagAAH1cP/10854H+XrWQ+vLL4HJA\nuVb9evhvXhR6o+FUu4joudnsqtw92zNrhsYEJ60+pTiegYCL/4JPQJelQZd6\nb95iXK1SZo9FlcexhyhbON5l6Dq+dfmamMNzBL6KNJoFhQs+2iM2yzBOw8no\nRqW6xIWhsFtVbP9kaoGZ7xkmtAfYnw+CXAYuJsAC2ybp6ZaI+nF5vM7WtZG4\nSpkb7FZB7OSc7kYfoqv+WEKS5JysAdU26vLcTJZFdgGQJe0i4aR4vY8D5DwF\nWfuA9erE0hVzgXmqFrqFvFMAj7Js0dBsZ/Sig+HGH5NXw2ZQRdmjrK3GB4hX\njiO4kZCG8jBzvxPMZLTtqiw28Z4bpM6W/bFghm/n6+Ug2+Y2R1fwPeVSJuX1\n580B1hwFkjQguBSmT/c4CaYkTDe/oG1TTpp33C4cCZT5mOe2IngQX1SIdShx\nNFkoSQQaKXNoitXQL8mJuRYse03Mr3kZsh6EvE5PKZA5ZTGMmQt5P/kS+pJA\nAbraLo52QTbwWbDjxJ310L0/yEhPCMxMaHJq/igs49N6yN/Ir1uyC8/3gdpM\n64u2Cl8R/WO4opRV5BXKS/bEPlGB0p0ILV7YwwSWqsgEIYL1Mn3cmMH5JVMc\nTNHyPaOpWyHYB731BKs2uVGUkuPQBKPtZj26b9StNCpUrRNbIdiStvIKkF+R\nuFu4\r\n=KxJi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/touch-target":"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/segmented-button_10.0.0-canary.8b1cdb1be.0_1612478112748_0.6985525719625383","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/segmented-button","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c85e18fdbb3194e4f9cca5254e12443dfdfae711","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.8271f00f7.0.tgz","fileCount":55,"integrity":"sha512-5Y9cd+xlMlWDAXmyPhiIyS/CkXik4TsgPIM/QUa9IfzcoTZDx8xBHfdr2eeKYtC8KBiuYXt2Crk8ADHiViS9VA==","signatures":[{"sig":"MEUCIQDOPyPa1YjwoEDlUpyrNZho/oOopX4ZginkQfIdeF7BqQIgfgby/EDugqQdvlxMqEx6cYA+i+MZMex6m69zOfhv+t4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyqCRA9TVsSAnZWagAAqS8QAJ+fxxVJyyJJTbUHus3h\n1DdPmEPViVvaEBikIBEGuIwSb4FN9wTOq23iSVpO+Ucij7EFZFT6swein8Ky\n8DuSRj6ud+FQdWzgRvS44Bz+2xyjzV571+7x4GnF3ob+OrN/NLQml0Yx6Bqk\nd9WxuHEwBBXoHJz9gg8DSJGng/1Eo3GT0yU3/fzVhpt8Ww4m6zipsASQywOl\nkwgJggmEnaOePKoUn9qaO6HT8V6Gd/uYzO22fSm4MsnzCZAVLCAg4E3AzyW2\nmGa3ohppVY0EYLFj4rPl9TEqLSDcshtwm/EXiApmEdUXQiZbKxZQV/Q5KEwK\n38wRdg6tGx16ypAUZrMW8p9TSmjYjhQdnuO14LxnJ5Y7VgCIS9zJQNXIcjI7\nTH+VODfshMjvCI6HJZvU+TB1VletB84S5kR3U1bBfXGDmPgcgx6lndmfOlh/\nXasHIwveXMMjteb8MOls2NLPMVsYL7G6sNgfBZdAUv7uXhQ8Pp8v1m//kG3R\nuXT7mMNtO4b7tZ1me3XcRfsJNyKIuzBjfo8J2wUqXE7vfCOiwCESBlBQnNQ6\nY9aqChLn7P1iDIRS3sG8NIk70fwZK9aq1WZyOTy7+p3+9Bstv8mJwP+yw+3M\nlCgTWoh5CAmovhXNomY+CCEPzBQO4sRQD5gJQo9Bs+BSInAeziXJnXiEB9lO\nO0b1\r\n=EJzU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/touch-target":"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/segmented-button_10.0.0-canary.8271f00f7.0_1612479658034_0.9784523343764109","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/segmented-button","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e148e29a86311413e2a1535710af39172c9b21dd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0-canary.533092a90.0.tgz","fileCount":55,"integrity":"sha512-Y19K9rPHnJmasZFpqbuvrGzcD1lhAyCyTlOYHk2EmT1/rxbDdl9jQwV1CJVEkvsyikFFFgpKrCGlcTaZ/A1sDw==","signatures":[{"sig":"MEQCIEoKp7b1HPARmR/A2d5sBcpBkougT7p3iW/S7GTZ6oLJAiBDmum8JJbeoMEMiHVqF+WSZL6RXU6W8iFRtQz8nKNWXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+2CRA9TVsSAnZWagAAK7wQAI1CzP8T/laFRc/LoZaD\nDLnt3XMPdimeP2Fci8mhykVmF5GFeXjUowBxWfUV6nN+bN6CetkpwM1pUB2O\ns7qa8hY6ZaSQXRWWoXyPqzySLnecv5cOajPbx1xVSeNgmGmmzZKxqJsPqS/A\nvp7bUpbO+o9r8tnh7x4vf2t+ohuqHmb/RCbXbcgd22w/lk460VjHQqSnB8XV\nB5XPOI5Bn5RIsFS0RCuqqVoyEvVLuVxt3Rf9tTkD0Cf/cnL4GYnixrv2Zfcv\nD7uSQFVK9B0NjselChl7XWaQ163NKvFfUA5nUQrT2auw3a0aGqTyObtPIdL+\n68cB419fxhFxQTRcp6m7pLyeTn+yxr6BdQjjYcPWUxJWdjDsu70j/0XkyQ4f\ng2y9BnaU486hiPgt1mUC9mfH/HCjLYYkEtuybF3DRQdbo9Fr6kfhT67yYehZ\n3Xn2IaFGjvwu3ldKSazG0EymLp4h910HHBdKu10VZU8q5Z6aiIb8Zj0qxBvW\n4n2hXEkzqeOLZQxkzC2N7lGodSHqlGyR55GeFJhaOljiBwch6ec8bTVjhF7T\nYZtgmh8qTX/UddPE91XlqXPDrKxk/OLxg6z9As0+qVJg3LBZTYvPv1yudqZF\nfMNmY91Ok3KxVnrMuvdkkwYF7iCiZXVoOLJPvk3Vb+jekRAgG8kGd29y+tSr\nxUIK\r\n=/x/o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/touch-target":"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/segmented-button_10.0.0-canary.533092a90.0_1612496820868_0.9034519826122422","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03d69172ed05b14dc00e7834d5b9d94c9d006b8c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.633a9fc7a.0.tgz","fileCount":55,"integrity":"sha512-ePW9PaT9JZYWxpz+90j8bVOlOzDHDb03Njw3nIDh0tSu+IczQkm8dou7aiOY2vgk8Y08qA9Hdojz2jET4cl/TQ==","signatures":[{"sig":"MEUCIQDarLKX9OKjnPj6Nvb/LdYgLvbb/g8jh8XYuPvr8z1MqAIgFLqL6LtV9e6N1lnfnw7WZ75pAwawg5Tv7od6IGFkXjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+rCRA9TVsSAnZWagAAA/wQAJYq9be6c+U/sxrMzdDa\n1m4yV3v48TO0/R4PsisZZiUQ8/tD46n5QHOkOOeEW/Z4ivUKp+O69tlO4Oqz\nmTYu6C9LI94dAtlcJYP1pTqawR7qoaOPVe+gcy5TbuxusPXmorgJoh6gqfQM\nsByilvjrI5khMJMh+pZ7d3kEkpcFkBjIWGfYpEV32sB85GQD1z2q2X7cM32M\nSce0wNJYsykJQhGWhgv31QQmH8gHRNX3Rx/j1IThhcP43Nl2tu2spE92tZCv\ngAnzZb6+DLgTqTlBcz13lT8RqE0KhIKKxYFkn63yR0BV8ynPXFvDSuf/qyQs\nTVurfK+CU0VDVSeV4qLrrQh/cQzHWBj95c2UGTX24rLsF3FZdn/j5JcDCTGw\nQCkFg8OmYCQ1yvyqa9b/AESyl0lnGUzX4jmFabiHN60xj8frFYdFxtjwTeTp\nTQyh7d4kv4BE4cu0V/QHY2AWhPlBnLMt8IyQXvynLruzXOKe8XIAM/E7l7g6\n+JzIAWfCvq3dLvG5/wcR5O6MDYtTyhuYaYWAGPpxOFXi0f7EOZ3BrQTL8ol6\nWOV+8WSbxe18xBGYD0t8JJvF1559bKcLbdd/svs0KlXNG0k2T8kwhrfUgOZi\nEA4V+BkRLpaC7T7U0GbnH1YyI5ECW2PW6ccMjbLvDdx5i0/0r6s5vyzZOYQS\nXmdo\r\n=argZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.633a9fc7a.0_1612541867100_0.6795478994726651","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/segmented-button","version":"10.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d2c56ae5d9d7f32c1ba9df8402757d08b8610ca5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-10.0.0.tgz","fileCount":54,"integrity":"sha512-98+1Wny1yPJWNkhqPgvKPQtOlxlIXMvB0XHegO51G3JnDWDcyay+JzumDJAlwX3yuhekQ61oQDfEPUb7bZOR3g==","signatures":[{"sig":"MEUCIHM1+xn3d3i5uJtIIAcxygE9kx39YvFchZf316Ykjt8HAiEAzmburFh65Z8KlO5XXUIfyv5g1PM5VIBZiTx26cLLSPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":535962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW//CRA9TVsSAnZWagAAGIAP/2d/VLgpnhugDyS6bI27\nFTIBuR2mE7GTDS7jfa8isONyvsSEVHARFa/28TJbUW/1NR+ohS4RTFst9Usa\n78q5x4UqLE8bj51aNgGDhPeMasl04yeMyklFvcQhOc7lM6Q6HYp0c2F/zCaU\n/gPw8stTRmywf1eEC2sRJeKkyOaDdcV9l2CM7PwCffGw9ZEcZmCn6WWAkBiU\nw105WPtLnlmg6uIGJveMun1CV0fwKBBRZr6PogjyVJOVFxS1uDxej0CmTya5\n90NB32KhIQgAV667r6miUhWc6zyxQCC7Y1rHJaLlq0ltgOdqf5DZnNge0ePY\nkgSQebbehSb1P374HIVw1ZOsqr0o5POx61W0wj4A6qE/4hsUEPCDJm/DDpJj\nM1HiMrVYq20DWkTlzo5MEcw/jKCyhVzfPWYKIxXna/k0k12Wbodfbewtb6qc\nRL0gwUwgdY89QdZKFGq+ZSKzTYpaBjCaoXl4P0ahm1ayBtbNH0oFjKPIRCIU\nX/+L4GsyjK+cp8b96lmLzSxvsPdN0UFds/QLXMywLHtb8g+evAIQOGgeHcwf\nJ9NQhWL5H9dnfjMAUxsyQFSxVlEBrfzdMrPDnbM7g6Zlu9VhJ5VC5EWfddf8\nbNuGppqQAo2MQTa0PJvHFEz1FMw9Oi6jAYMDeXFh6SUGyLxEmJzc9orfeJwa\no+/7\r\n=1gN0\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/elevation":"^10.0.0","@material/typography":"^10.0.0","@material/touch-target":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_10.0.0_1612541951346_0.2836028543007545","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a7c3450882a9bfe4c595464531b8598a5370f11a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.b5227247d.0.tgz","fileCount":55,"integrity":"sha512-h3fz1VoW3t6juq5UU2PQ1TB73uoL2llz1MdYNscDs7q2a/HqiUebVwcuaBVkHmqNmbIzCGQj4XRlIox/jiSz7A==","signatures":[{"sig":"MEUCICtaztMqGgXZSQTBY6NsbhVJzakRULlmo7e7yWBOGpqlAiEAnMjmrtNOGGTyxZbF1XzRamrFkSUPqj51QRumGK63w20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYN+CRA9TVsSAnZWagAAIngQAJhcXymSgGp6mQgCbfiw\nXGFRxANzBG7uHFo/vzOkMxzzNpibPnC5w/e7I+GuqsiJyl1d2Ay7ds1HMymw\n4WDvK+Q3M/SmsduRaIf2KY4N/Y2KEyE3LPmgS+m//8xPC3PN8rLtYOdCnkyq\nMJE3RFeccajWk7reZX14hJvvbvehwGAS/QHqRKWOjDS8Jd435vcjm6JQWAnk\nMiAYh4hakBtOeUMVHyGW5bO/uebFXMeTU+Vhdw6O1CBjYmPRRbrMQSkuoyPg\n1bz0/W2GW4BvS0Rsd0IwFIcag2DcbCZ1N3z1qnW3sQNlDrBa3NgHVm70lhf9\na104kvYMJoPoB7dZJP5Cn+sZEg0bzwRgW4/EYSaXJqkcKYh5kY9PjPCIMsGE\nzmiC9QM7+npHtSPa7rruGL9pxZz36lY57SQ6y37InWCkHVYmwp3XT47JK05z\na75g+wVSR6yu+xDuxIW6oIBFSoE+8kLBxuxHI/pK1EBC8T4rY/AANRy5fzPW\n2H2cW9+Z3fZmW9vvcvd3p2bsxCawOFNP9ft+emPjhN+FDLvg88mRrAkHXBgo\nz9v/0H/qzbh55xBAMF4VIRChgvq0ZPGzRVk483R69sU5Yu1sUsFNX19uUW94\nAlVWfB933suurS0dp9KuOYARm0Q+fqAHJSmN0oW17U5ZkQbWoBbubLXIrL5X\ncJM/\r\n=4zEN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.b5227247d.0_1612546941834_0.7688154165090606","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dcd2d351f360f164fe5dfccad1a45b548fad794b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.95322b11e.0.tgz","fileCount":55,"integrity":"sha512-eZ4CzDr9ouQfEmUInvaOKbi7y1rku2RUv3PtDX3/uBE+RmR0Nams9Wgm/dMhjWITnidTrpZqs+0eNSRWPMZWGA==","signatures":[{"sig":"MEQCIDYGRc0Fjvfy7Rk3kb4uE820CUSeUC5YdR/DcU9e6/+DAiANY6w3JLzAAQe8zcF6W2WbDjCR3f21cPXnP5e756oy3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVtCRA9TVsSAnZWagAAuisP/3ayBhPtNTe+/w0Dqytk\nm0+xFGn/3oN6afU2R+c64wcPmsqDhYvtgdzz/1XYG82zavaKXEU5+kArWtZk\n6ZMGHmNIXJckrHfG48DL8zbg/zeQ7+vpUCd880iOUwyLY1S8wwC92rtovY4A\n1EaUIAJcyXt6tfYMlW/vn/amVBGTOslNEGiwQhZwetnqfzXCWpxy3V7fsgUK\nfC/PL/4qHoaLjmmwrPgfDZOr+/xDKlk2tCD3/d+HiZrTE6uKzhtqGJt2F8DJ\nF3yunjVg97jVPemWQHz/E1XMq+4c9MGSoWgcmSMTTt0ou3vdLUq1vM/LQN6Q\n+NjztAdcq85zkaAGlDYZ62qqTXL9lu6na25gyHUSbIDwMaVaOi1W3hv4Bnx7\nDdhangyKQfR8tHsBv6+vxEw9vQHq0CBEL0igGYRQN4O7xwI18gu6TDAGieAX\nwI4f2ShJbK1GAEnLGH61BqSGqeQa+4X23wf8EOyyMWGRS8h/IiQO5OWNk6al\n0v7OpgkKrJTX+oz86sqpWk2uaVE6Alr4fZySyopaKigFmP0DIYsL/6GiSQvK\nyMHd15FdznoQzEmE4+ohCHOhuAQ8PdQe/qKmwqXSPzmBi4osoSfswkbn1p+Z\ngg/9zhkLxn0X2X9fxg8w00JLoqZhzJysZxAo/MEIfcAcor9r935+g8IhH0NT\nF5Ii\r\n=cweG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.95322b11e.0_1612567916953_0.4517141004900147","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/segmented-button","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5f4a9b8974cf8c61fd0af65f21621ca4a17f0de8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.1f318ff0f.0.tgz","fileCount":55,"integrity":"sha512-WaXONvVSayyQNbjFLuMraaTlgf1NQGMv4kNmPZ0bB6gmx1nR1cJe6gJbSWDgTpCI4UplZxjg9s604WdmotYcYw==","signatures":[{"sig":"MEUCIQCcpm1NROMCao2ZGWsa7uyV4Lf0T5Q2AG5ph+RGjhp8OgIgXla9SfHnOJ/Sv7vk8wcTh/qqwKnCppvH+PkmjuRFWAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd00CRA9TVsSAnZWagAAjH8QAIDxk6ZtMVNO4z5Yt4h0\nUsdpAPUtMMzPUXZZqoWidqPJxMrpXUloQifrspG+ccR3IlH6Pa3NdfiWFXR0\nK5M8Z+Qw+zSUZGkTw/sIOgjM3mXJQK0oIWczisksDk1pc2+L9aUmyQlPM6Kz\nvIVZ/tzSysdLvgIolvjc84FuPxOpvbMPnhqhDyWxjCCcuGGr9B4/b6SOBmba\npFoLVQwwDrOrBwM4oL+Ct2BdAXgdc+HnW179mHethmxsRDYb9l3mV2InXDbk\nqPsBaEvWnf7udulEtxQn15vF3jnI2mm1Co9VL9yOy4Gw3L6S0eGRMTY/btyG\n7HqS4duu6bZOYo6wXL29yX33kZD3VLOm5aMnfAMobeEWvF4vVAWhSwrOw7Bd\n/ufvF1E1SDv+lsJz0o/N/NzSOrhlOsY4xS9woj2wyWsNGjzGnLCMnAIcu6E+\nBmblmSOx+ISQB+VgYhUB7Qsyg6bu27PQaA8UMD+lLM7bGJMHVqM4Qp3xcjHv\nF4ZLTfsgO4vvJ1YtCjDn5HsHjqaeI5Bqip/mlRfJDmc1E9751grHo19errfp\n0xcUADlmJrI4eqaXG94TUZALrDXsLlASNgDTQil0vCsq8ypMgM8r9FZxKLAb\nVSXrcQ7eIjrAZuhiKgvd1jalJrDXsd4NO2+kR7QOMmehUDRqyySOxClvIAJq\n7oP5\r\n=L5Gw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/touch-target":"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/segmented-button_11.0.0-canary.1f318ff0f.0_1612569907887_0.3070202788042269","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/segmented-button","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4fcb1d294fe4115514ff15108af70d955ab3b09b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":55,"integrity":"sha512-Y31E/Sum2BpQ9JoyZyi5LItnYOt0vqjXQsyasKc/ZRaxqAXYcrYe9dKnpM/yCLBTK0I6hcyhi/K7vFVskRU/MA==","signatures":[{"sig":"MEUCIQD/WqSE8eLiEOyGSf6DjHloV34e8prshxH+rvukzJmRIAIgIF6xbhz8ZJb1nBBiANF4CfacAPgsUJhV3vXP3koykEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLVCRA9TVsSAnZWagAAAsoP/j8b3H+9YoyRRWaEAcMC\nle4UfuOUekxZfST/LIro7lKXxiIqGaNdyvvdEwgcmOvI5/R0aErmQJFIEiwt\n6VAOE2FgfquJ52OcNfANeVhp6HikVJcjpUk/S4OGRXbfK28q1Yi7EIGh0Zux\nA7/FfGwrDfcGKHxqsnzhPeXPFBlNL0EwQLGpiYEK9p3xVH6pp29/b8QCq8BN\nv/OOiS5ASQICzOk5JtrRFw0KM97rUoUE0+08NE3X4NWUtO7I4ul0ekzYTWm8\nZL7nwGSJosIdK+50Lso9A5gHAR8iiaEd4RuWF4BvU126H4Kj5W9J13MUaNl3\n9QtKc+MPM74xY0i1Nt/Zh+0R3vAEjJu395gCVo39//g+9mnjxCDRJYi3zkYq\n5dy9QlSjHzYyM1kaZoWnAulvMzrF4JJ3Ld7SnVWlWndxNfVeS0LunyhHlH/6\nzEKpG+ZxAz9OmnWzJThHCUIOWIR99GF/aEEwyZO0rOradrgfv7J8z0oT1Y6w\nlAL5zCsfs77V5+Ebp3tWajk1TLzjqL5RIY/DJ58jwjZK5ARqQZ9+g7n4JFbR\nVZmnN88OHbG7TFuMJoPqasWZWDWFnQsrB4XX5jpGfy8Z2Wm71zUtLargLh8q\n43h0PSRXECrdSg+n49qBJDQ7KHzwZpjPojt4ygqNrO8JY3WkQU/DADVxAFqU\nWjA1\r\n=U/cY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/touch-target":"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/segmented-button_11.0.0-canary.ab12cf7a3.0_1612796629335_0.38117626645098723","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/segmented-button","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d5d8374ba828d12df4abc8ed17d18c0f45f7a4d1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.98db2c5ec.0.tgz","fileCount":55,"integrity":"sha512-C5vuSabs6G9sonNUNDJnfdmZaaXQmrZ/e7ES7gxL4eOyvGgXro+wCnjT3RNspgBPyA44sf9xkDS9dFegchpgrA==","signatures":[{"sig":"MEQCIBVK+xuVylXXFgyOyQlw76qom3pYLe1vDAKuNTSIPb3WAiBwnPTE1r0zLWZB5ArISRl9DHaECTXaXFqze4Zz9YCRIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVoRCRA9TVsSAnZWagAAproP/iVl5ljWD8SR8QW3pESU\nalEY5TmN9f9/fag67Zp7UU2xQ7WIvErpH5cqIe6EJ9z0EybjCO5PSnYLNN1F\npw10pgDBVpI10z5aWn/xEaqBinlVAMFZnrdzuUmAmHlQiQGNU6XU7oj9JfyZ\nTa9mUKaDSauo9Z7MKWGE02DO4rEYHJWxO+MwVZbUxqG1g5SycV0Rgf80TpEr\n6rVl6M7sgNWTimfEe6lMTHefQVEdhm/tqXssri+/FrSLysuE9bfVXv3kw2Yh\nvpuJ2bS3LiETpxm14OiM86P1GvqbDT+4sWaBXd9cyjeZaVjj9zPfJ97hWakk\nlszW3zdG6IiuIVeaYp3F7ZQEAQPdul9o7ZPqa4KDqSnocuvW+vrE31dqcy6l\nAmpexYK8Vl+v4H3B8XvW/u6o7ZpaD4fUqQVfEFYn/XzTDDtok5oAbKJ6sUM0\ncfqXewKkDorv4u34peUiWrwiOYbNheR3yPRwN0h7oSaf8Q1xzCX8MpYXjBmI\nAhMy/PZ79F54jwNL07vG1/nybQ3931k9sdb15t5Tcv6VjuRchGAYKa6gP/KG\nVh4yBwi84jtBe05rN8pvNbEGsbgaWrflnjWPMZRlemuFFRNOXizKdQuAezZi\n5LPaRvemUiSsbOIpgFqjV0Qv9hwsWEfK1lCBe6mTkg4B7Q40J6Gjt37QbDAM\nVoMV\r\n=e2nK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/touch-target":"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/segmented-button_11.0.0-canary.98db2c5ec.0_1612798481017_0.5719290523009666","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"11a4cf63c377852b2fa8340e0185ba7c32d5c426","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":55,"integrity":"sha512-+PvMPtAKw45aOP+jyeTsh448dl1A7N61peXfAOX8BcFSmG9+mTK68GmnYBsdTHcvei2EAZRu0KsCbE77xGF5qQ==","signatures":[{"sig":"MEYCIQDysGzCdoKxF7K81jdRG8CNofXR+W6lwobAiCQJ9ta5PAIhAMh7KkBKIb6iWltj5O6N8iT/eARfUQgBNVtHd6qXiyxG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXI2CRA9TVsSAnZWagAA4YoP/2pQak3J/CGiQJCDnrNs\nAa9iBg3UABSBfv6KjBXDfLK3yLgrsLI6yylJxqq+0OfQDOdOloVZ4lhRxjbP\nwbQvASVWG/MBeL8YU6f8SLcITPlJgj/HlD7FT+o4Tudd8H8JtanozqkMrpQH\nW1NMkWj5pgq0o8qZ/gTN/6ewQDp6FcY68UA4qnus+WONKtMzQOYbMEovk389\n3Nsjtvd35xTRhkHOGQr178ayO7Loo9Pv04gSS7mRV99j3TNL0m+GPRKIfMzE\nJ0O7bzaBWnSuscQyAicAKPSFqLK/d/8MoOjiTYyzBFr70GH5gj5jRuL/PfsL\nt7hqTdoAosgNYmUTxElcDwPAhqBW6rqumBOMtKNf208qD0PG1ttAcSihV3Jz\nJsBOfzPPqGpkx7qDsDCxgUgjxBDqH4PYryBKnimf7+ACH2Ucnwsq4aSvhEUd\nenBHl2+qENUCzlPHHFxqEuAet0+ENhy5Al1KFfgyiRfAbrgNPLdZ1sNHYehQ\n4X14ld9laDYuZRjaH3T8ZPlhhIhxL2RVa7oRPhgX7/ojbaIpZ3lCcdkRXoyl\n98zAqSUQ5Ju+7bPqi9d4vTPKyBROkDQUqerJOX+DWDXJdPEEcPf0cFjCcoky\nyOg4ExmYJmH21VTqgzEzifXAzUPqkC2k4zPy1TT1XbncDxb60rHF2YzL+HV+\nLVIw\r\n=fQGN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.1f86b9f6d.0_1612804661771_0.8692772059749927","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e074e793f698b3e943e9e42814749bb3aa4dc89","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":55,"integrity":"sha512-4U4mfHDSaWDOo7HskU08FQRQX5j6MtHGetGRgIh+or7QpLi4w3RHcZRot8Hbr9q+0k7Gjd2EX2aYc6vX8wViWg==","signatures":[{"sig":"MEUCIG6dIHN1AKxbKBIhwGytvUOYFvhYCxDLi2asD6qpHqnLAiEAoi/uwCMXagQZSVlx0Mi+n7DIi/GCt20QmMkAcPQegUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXxNCRA9TVsSAnZWagAA+VMP/Rr3RkkfY4uFycXLb5MF\nzWnGX48zqdr9Q3V3LKQQRfKt6J7MMdq/3zsU+bycR5dpYKg81RJpZRSKQU+u\n2Lc5iNRizO2gT1zFMTpHLs0+1aL/7VBk0UKU/d/QkqKotrCNhvMaZWSGXPw9\nxtDGsieYhN7yRUusjMIHsi2OfhoIubyfh2w0bVCriQC9GZ6AgRRr+bh+rmmM\n483mWIsb3xF/h9CfFqOvtsFXv2nqFf6zo5Y3mrTq7+f1Q4/nMXbphYTEwICo\nEeSU/wD7Z8Z0PxC/9OTFVQWU+5hXjdiy7s8PYwbdk1G8vT0ycG4GTyD40ueg\nyKYUaiuHEKBW2ug8xyynGTeubvIqFV0RbTttHJ/jJg6Y84l65hwlYVTfMCdr\n1E2/zW7UEwI83YuguBjSvJlrzN+CMzC75QIxGbKtoQOV/pX2wfPsFSbckED4\nbhPmCVF/R2wG0vjyitV5P1GmPMpei28YaD+45c7G+9Xi1eIZevZJO1TfT2UI\nCsOktLr61FndXlYc05LQWob8hhlIwV9ugM6MDudi8UI/u6d1nL0TvTOmk4Vv\nd5jetofZ4APML+c9M41Z5k7eKch6uubdPIZatyx0YdalMaSub8XlulSrZm2X\nZVrs4ZGKobrNaj7q7GH2yHujfDChLRkz2elrtm4k8y0YwXbJb9oXR8D9nTd/\nc7u9\r\n=88sm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.aac8f5d9a.0_1612807244664_0.6693970379698913","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/segmented-button","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d666bc6e1d4f2bb132c0babc94b266b7b7852856","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.750e18fc7.0.tgz","fileCount":55,"integrity":"sha512-EPZD2RGCLc4iywg6V79hi4IHcwq5Pd7Vntn42apZkgkvjlZUYVOpI6dN8HhUuu4ShgzBv3ZSeEu295VjA7uN+Q==","signatures":[{"sig":"MEYCIQDdVERWw+P2kfBUOklkx8GQNrdiAxe98kYkPi7Mo+lF5gIhAJ99h0Mt+1oNe+BzQPNzDrImntdqK3TdwS+fpL0YVx+e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbANCRA9TVsSAnZWagAActIQAJsInlo0O3CbJxuVPctF\nzhHIYKDtFWMCu+uD4r2BELltGWv7dbzgIYjWp4hczZy7Y0kx0a1cr37J4XcT\nun0H9yswW8AOeqrafJK7iZdQKgEQWhB01am+gMMRbpr3NvnVi7zmj8iv2MJA\nydFCjG4hBZVqac1zT7QoxkBClGDtMemtW/IV5MKp1FzwRIbshDLGwTu9wJex\nu83epvN9XumkCA6ar+Eq759OgFpIFwaWHFDweZt3b5RqI8n7nB6Kw1SxT4k6\n785pRlYb+hs71vqZ0zvkWrx6iu7n6cIjr0d4MD46KgDvK8PLgcxijezqZKNl\nHQ4kBppnrF0oW+Q43eV4bH6wXO5RBysiDP7ush649VdU+vKVLSR0mS+xa1MZ\nvNi1BKt7/NyHyvY4B4YjkCIHfrguYOwVIPY9LJ5NoRfsmrVZdMfwE/cnHRqQ\nXmC4H5Ge+TqLRFSXLLCU30ctC//oDQcSwsOVeXP17JjXRQvU4WQ1G/aTGx2t\n+8B0xybiEQStDrPvOFjywaCCkJ/IBW1R5bwC6YKL6FgkdfXkjkFIfkqAxSzC\n6D+PaGXjXs5HmBPxvn8gz7K8l2UCmyE7SZpYHMKsqQ6bdM/eo3XB9K1wpvH2\nsitCXip/LP/6c4hYrQtbp6BpvkaIfohOWDrzj+XIusQTGv2uVWJE20NIcEEI\n9eNt\r\n=PyRS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/touch-target":"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/segmented-button_11.0.0-canary.750e18fc7.0_1612820492931_0.27328324231323964","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3414f25ae17e070e8c6e80a982a31d898ed6f960","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.b62b1266d.0.tgz","fileCount":55,"integrity":"sha512-l1pr85jd+ThDBysi4Amxf0CB8LHtDyIoAQE6VJ81RM4LUoNx5LJM0JcwhLA3BG0T2+6szOw5JtXYNLWVOdABdg==","signatures":[{"sig":"MEYCIQDTjuZ6Dj4XTS0NI19WDlCFwi9pGGvRWrZYuCbE5i5npQIhAObbz8JE5zbnsDdOG8FVWhMsgdBoFl5LQT0uQD4At7f6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQ3CRA9TVsSAnZWagAAMlUP/Rdba7UvBaiqQJ1FTmPs\nCie6jep9yE2YcIIf3amyyNI6rahaDf/70BrwF8TF8TUgSD1YRCHFkPHkDRSi\nmsDyB5mDt3QW0oMAxD/M0jbqn1XwCPtG4b/TkwFxJmdlvAN/ndTQextu60c2\njnzg9AzrPfkIC1BID1yIST+h+QKHJcwl9PSp5gJgEGw3/gYcjBjiiLHqad5I\nqn9GBxfDSKtsW+LkE5jndi44hZ29AqCxDBK/jX91bjmtw8TGeOOIYtCl4wwe\nb1m3s/OpIo+iJgdOZpEIqXRBobNcGh+goN5fpSYpAJAdvM2CpkpPXttAg4+v\nDYpwbVkrs6Bxoxmtwqcj4lTLFj/TfEbKb6/gRp00Cgh6xOGzFstjqv5Nbldv\nB6N0c+2VB22i4EDy+teYmdpucWqIxCaECcB5J2y2GTRVDARJzRcBBIA+QXeq\n6fa9LpaLvOYqfKS33V097RSZ8JcV15vJxIbw329wJf3zcZzXuDXrQCrDRZuX\nFCL07fCJd1Vgv8jLI/c89p2xZjHHWI8I1GQD8ZITHZrJWY/CMOg58HxUbVmA\nO0FDzI39hgvWhBd0vhYCsDORFX6LKiOlpKAKFaEi3GtuwsHCzRDp6VH3H+ov\nunyjzuGOVN6p7xgMfZLI9JU9kIhKRPdeepglksI0mQ3sz6Px+v1JDNyPG4sR\nATXc\r\n=tVae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.b62b1266d.0_1612907575153_0.7682316608195126","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/segmented-button","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"57ad2e1e44ff43e9012c9a19eadeb25f39d027ac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.a6b3101fb.0.tgz","fileCount":55,"integrity":"sha512-1RsMGZEfyJ3H8bKNR38Zh3WV/nMugMd2ZDq4n6+tO+IkrOLbuFs5AYxwHFC+ZfQIFOp3+dgZVRDnLvPXc2Fdlw==","signatures":[{"sig":"MEUCIQCj06n7q8PPrCeLH6FamFIv734gHIrC7xBiTOQAOssO+QIgElM1J9AmcsOLNFnTL+MfeTSF8fmP0/IKHE+anSG7Ht0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbr4CRA9TVsSAnZWagAA9IoP/2EJKmKkgtBbXQ1chmiP\nQzOySa8MQBVyzJ3Q0d+4wxbioy/L4qku8wn50IZ8X26CKEESS5Y1EiSs2JpN\nDFmYQeI7Q4pEZX15bI+zjsi9VACOC5SsycY8s2HyNf9Q+ASYFlJBSptNlENL\ngAwRrBzUM7LOvXejn4nDVOpiWLhybhbCioFdgHRS+Uq2EdaqmrS7UvLr5w0y\nK+MuU9LOQn8ehAlLpp0zROsrGT82nksUaW9zimw7SdrxbQnEUTygCv10ODYu\n3HW3GnoWeh3zUVwgsQ7L0V18H5Tg1Icsk6HRwQvw/JZp2RMzFCEeOcTtEwOG\nY5frwMOf2LL4kFpIz5gX2VOQMNIlzadT/3Za8o38B0visr3dA/qkLDuw/xAA\nPsxFEwrSNRBJBc1oiL33I5ift1w7RGe4DDZ4St31RdD7XIi7mfMVmd+B7iHj\nGf6FSzW+TkyWtqs9VlOEXdTNlB4+5W+VqTiiZNeVQ7GzHCizLHnrp1zXJ3mw\n8/rRBgt0sBWeMRUm/xYdryUC5i6xxaFZfdkbiwpHtcNnlaw6A4Nt7A+dxiBX\nJ55AWe2lerCwbgo5JXOA00nO503oACiut633HVwpZj2teImCHsJi4kqY7NxP\nSiyN8mHjqOTqu/1bnMfFL72dwtBGWl8Tamr/cBDl3T5i9rGMzMY2HAWnqO5V\nksDD\r\n=gHlL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/touch-target":"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/segmented-button_11.0.0-canary.a6b3101fb.0_1613085431635_0.6686953077781057","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/segmented-button","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7f847a625cf23a1655b5b648a93e91bb2301e2cf","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.ed88df700.0.tgz","fileCount":55,"integrity":"sha512-ok3AhTlggJ74Yc5UUzjaAgR4B4Js0Y8K9b01XnDUiVyrYQK+RhbBR9N+8gjMUG2X90xPr0zjE7s3e06+5spgOA==","signatures":[{"sig":"MEUCIHgJtIytGI8ut+pobP78TasJ4hSO40F8APVs/4cZNdTWAiEA8Us8iQBXK6VjS1Hx1VhZm91lfc9kL5+DIgd3tDNvLp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcauCRA9TVsSAnZWagAAluoQAJqllZ541VhKH3OGeub3\nG99wFF0QMx38RMGRwPAZerejGLpCK6dvFAaPfrM1E0yn6W0wdjkKAlqpWX++\nUfoo/mSfdmYe8gCE4eO396/YBFm7RNDMMp9TOoRZ8H9cPLyt7Z9e3Op04wSh\n50bJvowBo2kgoVTqETkDRDP9J5VwmVPPuKUFL4MkJp4MHrTtF3RbFiiEY5ip\ntjmrO6DPK7ro1JY3LfGUx2//lmvH840VNwj2u6vmwOjbaL38zM0R1tvs+FM8\nnZNF9lXcgawF9lZat7czf8axTB7oI94nJrlnaEMJOmDb7j0Xhx5eVoiV/7Uw\nppIEI+KUQxMS29/WDI0xo0skmifgGMxtHoDyy2FxFYLJwSTLjO40fzYffLui\nQ+5JSyOmEw6VoAr7N2i7nugjlJjIpxOjF/BKHX+xD96wlZQdJIYeAJfnzFig\n0AfzJ69zFIFcb5wOl/ZqrojodV2Ux4zDhmmroluqHu/ODt+p8bXPaOrUzv83\neqFLuj/i7hmN9BBOaaUhJDHxzptUtQieoSE9pYZvKS0g44M6y9Y7bcE9qEqF\nlasajUs3zr82h1G1KtoviEHJCMbAB8U/TujWvqEAC/jlmATHM/gGIbEq3M+p\nnrYLrVM2ulm5GI9oh3f6FAr9cylTB+iapV/SZpejwFy/9CyhLPWPxSbMXa4B\nN3Mi\r\n=W3rL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/touch-target":"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/segmented-button_11.0.0-canary.ed88df700.0_1613088430424_0.22345352481965963","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ed570957e6dd05ce56d61038183e57d980e4b57","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d30efe6b4.0.tgz","fileCount":55,"integrity":"sha512-21TyxCRwtN0CPGEwKIKedjpE9aFvwqIJJYxtOVn2njijmXNgldHRSi7eGlN1+74ijtVmwkTrp81T/UrJYmBD8g==","signatures":[{"sig":"MEUCIFqQ3WKlvpVOtwKvGd9D5lV5YwIj0Jhqlx2PhcoZ+DzlAiEAuC6hDKW0N0Hedt/f1QQdH5i+yU5NcEaut5M6xet+gSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJesCCRA9TVsSAnZWagAAL8cQAIvcfC7oEizS23tpNmi0\nJP1yzHNk+6UQZQZX9VHTaSFVwiHIoWl0VTBTmqDJ4Gx2jpNWhxQAQ+00vYyx\nFAwMSG9V+Dzk983WUZUL8hO86m6VoyXZ6J4RP0STMj4nBOZLIWU/m8N+d06y\ngNj8Wj3FDRtowyKEg8XX/6tVCpuNyePwig7NUVj+dupBNfENIupPw6Ow+Zyn\nN9OPIouWQql30I7mDwN4IanAsl5NG6WlHhhXvNVYgI8Np+7fOkqwq5fCS28K\nfFB2lH+cegWAs/yiAc1ROnMvI7uyxp3FY2YTcjC80Gig4V0iCuCBVY+2Hocs\nrEiV6P+K5Qcw/mDk+zMBvcM455juZ9SMC+j2G+a0LizbzQp7k42L1v6kiXF1\nZTO0wOXQw1VrcK9oXbv/AyDUz7GwkY8jZqL4yfSH5QoZJEyGDU4kjU+Wd+OT\nCiBkhAiIGCpHE8W/8ykHiEX6q8/Z16JjD5RGu4R1mP/7SbKHmZMXRL5SiOP7\nRDRn1frfGSIDZooLmSB7Ck6NixRPFkQ/p2y5yxv2Hfe9zmpaQtdsgJLv4n5b\nh5W1H/dLM1m3Na7uA7Km2Q7ZaSmWhMPvzaED5Y+syHzDdeRCH5jhUiCqEECV\nL9AKjit3+EC4hlvyIa9xqJPYKmqseIfIHFTaUc1JLhl0ncHusDVZvZafMzHu\nv36U\r\n=/qqu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d30efe6b4.0_1613097729755_0.12140359820702584","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3c920e85a08853c8a245a1b7ba33a7d213e6acae","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0393bdc4b.0.tgz","fileCount":55,"integrity":"sha512-VBEabh0VwUisneIe3A9KL3nB2tSPlLpuK8AbpCbS9oEpbs7M+OlOJ0JGp6URc9JM6rq54nKqVuRmv2vmjbXXnQ==","signatures":[{"sig":"MEUCIQDN0JtKjOYlzAzQhDLzYicgc4ccaqdvy8j3BKg949kcZQIgQTzh3pHIUXIYqVoe/HFhBB76m0Yl/U1QZBJYdKvZPZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSQCRA9TVsSAnZWagAAykUP/3ihkHNfJ4gcv7hfwXuK\n4qoBLGB2yo8jC0QMvdvxOW6tG+l1n5Od9VZ7z0M/mF4FDncDtTNGu/kIfUqK\nCVvMkcK5JEGg00avIF70k8k4lSZGfmCa69DN2YjZMtIT69bGOu7PHQoDeRyw\nL5dj6pM93tzpr79q61m9ql4yhI1JZI0CEwwTDsErDWJUM4+k+LNENd/Irpla\nVySDZuvyGgRY2T+3FpBhAFTMy/zLg6B4l+Gnj1LhJfvN2eRbDXuDaeZGmggo\naFm624hleS0/vvEvto5OO4rHPppXRgyTl5UY2HJb9wTdwSm0of0wLxqc4Obx\nkJxr4B8PEFpHEh7YercNJwQz4M5xMjlYeWc+rhkkfKRY1qkEXsjazG9T09gY\nweCELquVM/DuPMFzJOjxkdJKRtj8/emo197K0HIbfMd2SU1/eZVvRFrdF5Z2\nc5UzDggexoAh1XIIJ1azsTI9dAyljC2XXykP7NqX0hOhrWRuZJ7wSEjVkDN4\nnAmqg9apOc00wOARiiSqH5kG+Q10Y0Bk27GbK6WPd0VXjiTTYOaL8gPPYBAM\nICmfje07v6XXwRGR2B8N77F0yodipkICeMC4/f8fhO5gorI/yxwwZm1CtFEn\nGctVegNAmdIMrzwHyhUzsjl9UGzhp0vAe6LRIPCg62732xXjeBFBICFVS04d\nvIXI\r\n=oTar\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0393bdc4b.0_1613104272185_0.5117539179921504","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5eb4f6d4196e0c4dfa96555442ee46457613958f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.7cd26af4d.0.tgz","fileCount":55,"integrity":"sha512-xAY5zFJoC5STigu9Vwx4842/k/J9KBwuU2hHsneT1pkMYpkkkkNsfomOOL06T4r+M/kMZgIdI8ajWWoqS21lPw==","signatures":[{"sig":"MEUCIHpKPQ6jsVFCLCF3Hh0UlCBPy3CkDFrwv++h+kp3a/mBAiEA/Bd66P1xeII9BzvXKPpcgRmPJafMa0+9vxdVl7iQDV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXrCRA9TVsSAnZWagAA+7IQAJllq0BvcQUm+fg3HLRO\nr9TLXICEtpAjsxL0RxD+ZMPqMY4ZYOwL9QvSLMi8tpcqspMFBYjyannEo1PZ\nHEO/4zh2NHdJ/92w/9R2bgOYRHu2uFNVPyTw2yjSo10N09HVddFNQCYE00u1\nvoEQs8skWlYMoayzvLGN+B5khEKM7E8Lhn5Cvd+RMinhoV6OyH2ySlZNgaxF\nqFzlU4klxHtgJHbY3pgLQMqxhckm3RrzsStH6mL1jt/ybmOF/2suMTMG/rkR\noDE1uEsq/O/tuDyWeAQoQ0tXIcC1WLHe2MNi+r4Ny9NljF9AgcUE7Q7etcvM\nnOh3bNly+bZfl0FxI5Bl6lbmMrE3gHIwZCdV5mpSH02ElaQz/n+ltpyxjn0Y\nRiulVM/+Y2kMN1uKIUfv3LxGAfqa85zM9+Er5ePNgQq89xze9y7abnROZ53D\nW98C0XQAbyj6YJzaOK4OitC4gfZxmL3ciBIWJWSUfSEHBtCGMcLUYr5M8fmT\nDbKZG43Ob6cpXleEtx+M93ekrCwHCnOANgIB3RFjj2jNDWrbPYsdxV76Un5m\nITdGdGg1/qHlkWiXwJlvx0i4r7sCZswxEGQlsQnAFbgqjGoeiTJ4p9Tge0Un\nHpliOObhr6nNQMdBRcKtUDtrwR6PYEzWGtprF5amO19HawH+2UKnfMkTDjPv\nhP5C\r\n=FyMV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.7cd26af4d.0_1613145578952_0.8931571748044178","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/segmented-button","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4d57faa17a01ea000988d491ad6d3fd6134a8b4a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.71fe9a067.0.tgz","fileCount":55,"integrity":"sha512-O8DYfeXKX6H91n63z2F/al2YI9SKPAvGlShVabyKEjEYR+CbrJBczQgjLSqHTY8LiUroXaw5+m2Xy6taPmjV7Q==","signatures":[{"sig":"MEQCIG2mxH4NhkteJR1K2IsCYVRWBZARqpTB2TIJ969EQkSSAiB8uS4DqTvRRnAdCucDNd9SCIzK7UcTII8RPZhljAhAsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1NCRA9TVsSAnZWagAAoBAP/jytnMQXQ9/K5B+E7W6w\nuQEmuRL5Db39RxxbXZsir6lmEK02YwIOrHcSJ5cFUR+cSgqLEqOtXD7mkbvq\nbotuU5VNAiOFlCWjC9iisJWjxWNbPbECbvreoKC7EgPE7k8ugVRKYZWkxVoG\n210dtqqde930Rrd/dmmOzeP6hJSABnp5Y40hWtXX5E9HSdEYvbm6QhqaIsgf\nVB7Y4NkIFlSn+wmHn+MbpgqFfEHF5tDILWCXWW7uymWwcUUqoxAtckasC/2o\nOb9lVEw8nFDYc+XR5qmYjdtsv0QxbFgyI7ljVp/jcJMjFN0sCQssKA+klcfM\nqgaqacwaok7M1Q5a1j2vMgf8Bju7TagLfqBbcalVfWw3RYCLVxnbzjHB90jC\nFE8I1qSR+ryoZnGTsi4W4AXdAs7hs/n58ZGrPT8vD2H2rjMGaq14uaptq/Hd\nAnE/p3O09DugjOM/gstsJTts7xJ0VTkKObEYu/hXcxeL/l73waES3wbpry3V\nztrOcjv6GPrEau2dj6dgI+TABfTN3gLTsIM8yV7WRz6XDMGDYr/lKUfdaDJx\nyGEyLvM/rMeShuLPRnwNR1g0pC9eoLkYZDX1RLrktqhrcCQqnliNjVmwsEwE\nMvYalvGXB+WzYMgAnR/tLM11+NpCm+L7/EXhcl4p6K+2rZdHjWW+FTgRuBvK\nLZuM\r\n=YpoK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/touch-target":"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/segmented-button_11.0.0-canary.71fe9a067.0_1613147468997_0.5684643347285461","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2f391e97765d676c519ddaf7082beccbc2a37e05","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0fd56a86b.0.tgz","fileCount":55,"integrity":"sha512-a1W8LbLrIqsv/tiVSasSC3xXEs7GFMYRBxB3fPW3MNEzuxJZHrRAha0WGTycyt2kUkkaCXAY87L+62dahK7TJg==","signatures":[{"sig":"MEUCIQDgWeUJzUAoyI8Zv1sBKY/wREcXPL0qhyMiF4+NJaAuKAIgVuKL3tsM6w48IYhViYQ04aPHc4f+UTW8ijiqRqZWi74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxlUCRA9TVsSAnZWagAATx8P/3FlV8xA+21ldpSeNV2h\nuR7zY1zsHFrVsdXAOey4ucecOMitmNf7H9IBqc1bsknsP8uvAg7E0PE6nMFG\nMGrFQq3L3lUx+5D1gJlEBqROW4YX2mdWOdhvBeyQ7TpMeYpC1KE4UKlBXbSk\nzP6QJ0cf1+fSeumzlHjtzpuItxi6BtB4ng7ddU+VuL6C5iH5oZXTZK5h4MWF\nqcbZMIC31ZkXB/TcGzTFSUNoHDcGigNkh5Y8B5lxzSb9Y3PTgezIHyzNZCF0\nyEdN0lnqggyK6qdEZhmI8jUTBMgpHdTvqV3qmBZPOmq/TbLXAb5SGbTA8dOS\nWK/rXMhbXEhAl0KVyIk6oBRxaK5nUDXwk432JGoEriJax98Jarw1adyFqETZ\nbvC7vVlPUItZbeOz83UuNzrVWFwZpg3MdzZ368mF5gQIvQpfe4XGvApxgPpB\nX1TjhMf6avWpDN4lpLpe37RLkQg/XL0UOFPDi3mOfRy59UNeWoZzhNkYgxcG\neY1mn4xuNfnC45SGeigX9BWmUhN66yEo6EsOx+kEfTmT5WwBMlWxD3AHFR5m\nAtLmEJyxCrRCupHUSnHuQs8uK13wZRcARqIFxbVGPLSS5Jp0yEo8LwPYFG8m\nfFSlJoJrhTKAniEA8c94Y3iyF5qvlD9jjr3Kp6XO3rqNz8VVOZJ61xD6oPmw\nhLmR\r\n=Dm9X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0fd56a86b.0_1613175124311_0.7834685831766504","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5863ca76ad3aa95e380e7892e18662acb4648ec4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f19bbc4af.0.tgz","fileCount":55,"integrity":"sha512-OiXMH50ZmQphNQD7duD2rLCPN5z2N14LqXs6Dkoixng1P9TsGSbJ2B77714wIKJlCXx2BQkbp+JDwHch3oAmHg==","signatures":[{"sig":"MEUCIQDWqcgpEBT8uCwWe/ITgmNUOPh42k8dCMIk22oy6798LAIgJcX1D0nUTgc22YjNn7eZlPIqvE/7fbL29O8Wfx8ogUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQ7CRA9TVsSAnZWagAADPQP+gPJg0LY8g5a8MK4twTf\n8+A76IHqS2U0p9MybmZ7mY0gBprdo51ogT53XfMP8fjbB2Kn0Hbo6LN3u3Vq\n28LkKw1UzRuyXhOfcPCnBGl/qOkUMIE/vOVlx89wVsl2nSSM3WcySEfoOUXd\nYd+mM6HtUVRyoYD1rEMCjdc+JC04AMDyzgHKRAvtH7BrcWAgWxTkO+Vw5Fss\n/kJTqt3+zjEOGfSw6yzttCOIgPLCJqRQD3Hg4802cZntSWFSDSfvQBSoJpQs\nj0ZhjkowQc1vfbm2HDVNWaXBEzIi0um8GcPQg8+UrxAqEy4ceendUV+YKPIE\nvtgkvFJRMbQyaZOUBk3LITXJQCdewSF08RK7ubay2atWHQQZU8IlgcTs7HZm\nodqdgWfV6TOYMVwfWCH9a4tGH52tzggVOSDGGPKDf3STZ3IRPnVVpFV0qD4t\nuEcC7X3yi4fFMVTD0oUOPYaQCwcc5LGeVYQDt7fUR32yCwyKUxUdF33GLGCK\nlMMBz2ADJcx1LUo8V1taMfUHeAh1LwNrZraqH7s2eh9JYDbkPOiHcRoLwSFS\nvQGauic/3CPGJd414WG5YnCvF1NNX+2LM8lXA/2ht4GuzaFgbfzMZoNYd42X\ngkXObedJrTg0YrLZZrH4PZIgkKfF3IzIgm3CQ6VCMzZx/y2Yue6o7GhZWlKm\n9wgy\r\n=G0ui\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f19bbc4af.0_1613513787058_0.34336303946127655","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"07fe0cfa9f37e3f629e2a33530a34ab1129fb15c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f9cac96cc.0.tgz","fileCount":55,"integrity":"sha512-6Rnvzq/kqk7KGQsMjo8a04ADvZDCOaaI2EUX9Cz9125JahC0fmUNIJ9G0EqnCQBVCFnwSf0UObhmuoB25DJ4XA==","signatures":[{"sig":"MEYCIQDE7pFWL8rJK63NTP3uDV7A6yFfAK7fiWfb1QIA3PH/AwIhANfKeepbid9AZAuuboxe32ZtxSk4HTSIN7bfT9Y4W68w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/gCRA9TVsSAnZWagAAqR4P/1kFZ5T+4d5L2vG6BIWj\nXZ/LXQ8wNWvDUz3BJELu0yyfyI/nipRhBiKZLlrjeIO3BOBKwX3pydzhJIb/\nfsVCfmdwwWJItGQVJ7xCFdQQkUsInhdkrlWukb2qTC9uXxzmp2p0l9DcTgLs\nyV5DzA5MPsC2m7RpM5YG/7bD3hx1/0a90/5E/7nEuASeuG/nGm+x96i63XKP\nS5DUNWOXFcaNbVad6wPHX+0eiwsYynIJeHiBvPG+xZzOaSWrDoq1nUrl/qZH\nYPysHQtMUW2XNPmH2hQyQDtuMdBDu0KC8VJ4dfJADTwU0KEfqQPpNCa3VUom\n2zeo9igX8JpsPRxRzjPd+TrsEMWNDRAfFD5ch8HozF7XjgLJR50r0CEE3Vwv\nVHvqX8lrqsUZwIVx/LTooML5qZQVZ/+YBN6RA80n4CrfTHUbejX2Ikwjwhz+\nRZDJ9crXEf8wKGtknfGLxVOT2iQSSpY2A2FKPQ6D0VXQf7Futzop1MTf5vKS\nQupDxAJL3mdmOmHPbZgjuRVqluY7ae2hS9weFfO9qoGuL7tYcWBNfi/IYICY\nwR11h8X7Ime2Ct37epUGOMSHEmSdREu6Uu9ghHVvHkFJC3WWs9fzuWI0G292\nZkKP6XRi0qIlWF9RbKeYRGof6Id5Gmm/AizrFuzUzdxOLCvTmlWFOSBBXAa0\n4jcW\r\n=DKx3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f9cac96cc.0_1613578208057_0.6774234817877205","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9cc456fc94da96a3691ca2c65afc3719f31d69e6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.79ce0878b.0.tgz","fileCount":55,"integrity":"sha512-hZtoh/FXXcVwJCGEN4VLWEOQddhd27uIa5JwmfaOS8i8nScRTl7i/pt6ilDdk0py9nIaOEIpwNBicfc4fMlpnQ==","signatures":[{"sig":"MEUCIQCJYm9OnHSx1LzPbtAkhQKAbbGnfGJBCY6yUqQvLUY7SQIgbwvuFEFw8S1wn0h4NXe50lWaFjQohItJ+tBw7AooI5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2jCRA9TVsSAnZWagAAEB0P+wVXotCFdF89xYpCyGBZ\noBl0G2eAwLwpb2m9GViKgGvc0mHm1N4hRxVmaDP3I+P57zXIgm0ORYoXBcl8\n2V7lOJB4TnZRCNUFEoeebSo4b8oxbCbQH7EU7fsm7tmJeomvn/LZIjjjiYd5\ncpfma3UOPKgMGap4Ce8y/NKN0vntyDTiJhVxu9qEeDRMn23AIFmjbCXQyUEG\nXO1xsWXhkZDUqAS48OUmHfnpKvAHihcBMjzaLIW6l+WQM2hxhijKTVObreCD\n2esxd6K86cAVdImDmDQ0V4yPZV07Chv4QvF07jaJzKmEjj/dXkqVfWXl1kQN\nvVU086d3XVZIKxf/FnjXuitJ211colRsOsSidYU8ByZDn1lS6Rlb61fqT1QS\nYEtJWGhTlYxGJJ9T73CzF2OdWrM+NAwJ4zLhv2Ujp7jXKuIcpKW3HHdeCyns\n5fjrh28LF4SoUF+NuyczZNI9RKbr7z8+4iYLQqcNzZbhuL76ZqkYr/+JqAbQ\neg74tPOOqO9f2INA0u79ZMkljGOhMWpZ6hh8cBrnv4osdn6aqizH3oRuNy27\nCjJNsqBHGPAu8YvvVIEAtAUoToifT7M7lc1arHGxvAnqBqpgAn3LN4UR576I\nohBOe2LwvRSs/HhDQjBNRFWIcsg4qYDcjie2UQd5ODxewKVon/WNekKFmokB\nK7js\r\n=a6Fe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.79ce0878b.0_1613589923459_0.8055148974414106","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c869a803914d8c03b3dd2f5a76ec089729b152da","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d6e507b5b.0.tgz","fileCount":55,"integrity":"sha512-e07+IIOmkjKheb5PzMx/OETOKLP50Y7rKwHFAxWnXlaGdFtzOOxtCDGoIR/w0UoqYUfPVD5wad9LpVH2+M213g==","signatures":[{"sig":"MEYCIQDCqwx5wnTjxibIUmj7b8ZngATDdhykH6+4CixeBSRuJQIhAPO+FxYCnu5J8wLf6qa3Ht7ZasgYvJ59xXu/kbWraTX5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXViCRA9TVsSAnZWagAAxxUP/R0F661F7kwAhfy3k/YP\n5I4OaqZEEebBt46KFctiUjoeuND7KRNpbOVsb0vWw9DGGAWKM0qquVyZZSv0\nxp+xb2RAq/fqf0B4e1aC8RyjuLQzrsbPdMMiw0yz5L1GXmUvVQd8j5j+/DN5\ntw1RrnhTBvxTHpghLQa54AyZeC+KqG01KWbRNUnZZ3HVlNj+dSr3qJEkbzYE\nl8fAMLfBV+GlTl8WH+60kL13NmPU/wKXGDwY5s96M+TcMnwtQyYPgo3uq7YF\nyuRhNnCln/wpQMcPBGdgF42BSWsfZNPM+6FjWfoFqk+KUt3mdu8mAZX/ojLn\nUcX6Jk5rL4PZY7VoEwPfe7Tgidv/kxlwlJPCHmGTfCVT7P+MtCCGSNxsDkk+\nS7FeSUm1SjuGTve98XqAwRccvoq/S/dD+ca4NE/iwqe5mdkDTg2oQ64SENjs\nXQ2gtXzpWSE36v54OnwwlI/2grXEJ03yUuJgtvt/bv4umoA9+fzfTcOIgvAi\napFZo+SCjmFeRxpBSE1GDShuU1CHl91vVJmLt2rbN8nBgfJ6wlBhvxW4xRMg\nFTCJl3qfvpL7474qi6PyndI/eGju7fokIuQAkAsKz+Egowf7aT/T6/W/olku\n7Dvqu+eFCFoCXwcjweq2UOa9JFLzAq0dfmtJyFtlY70e8B299rfoUTqHA4YU\nhn8e\r\n=Nn28\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d6e507b5b.0_1613591905821_0.5419531536721163","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6db74886f126f3c37ccfde5ffb1a104bb6cdc6ef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f2658381b.0.tgz","fileCount":55,"integrity":"sha512-1PuooScjAuppZVIOgtoy+ciPnfW8wUB1UgRKLSl/vPAQBhjx1hjMJ5oIufmE7GLFgL0v2BGUfnmgxyNUCKvzFw==","signatures":[{"sig":"MEUCIHVyfd8nO1XKCVF+gj5HqiJPSMbqyZ0x3Ns5y3I7wI1nAiEA2yCcx64oYRwOPOSOiXf7C5l8wAU6NQhGcWSNSttm4NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxtCRA9TVsSAnZWagAAoN0P/1gkVVdapiSeOaUtXlS7\n1pgJNPfPHYkjyemVMjciTwd1TM7IpYdq+ojxnMl+x51GQYLt8UHwLshGq5sx\nkflQI1vBc8eFUPsGztdLyLOtUYbjFtnq6HT7q7tNvAfQfD7aYhWM+DPSuPkb\nrjxxWe0WahVzWqhhuOm4OEJTctf9BhtVykPSOj9NLmrgl1zF0oEy+LckP/bS\nwgkesqnfqfIO6l5egnDXEeUYMikoLpEtd9r8Y5YaX5VLQXVIA7TGof82iwKO\n+yoiPcuyxEWTg8mUt0VOxOi4hcjiV6mU7SFylJKQLvK19XSFJJVBJbAQMxyN\nFqZ8d8XVJDxzqGaUJhHZiIoEudM3IqhGfPkqWfxfyspmqh2CIvCfH+Xx1Cmn\nbBSYptht2O2s/5exxTq3hPcmNt3Xogw4XC9YLJTg/V03PLr4vBXM78Aikuec\nOU+oJ8p6hXSK5TfqNLAmTIHMttGFJunh2vKnRsW4IdjBQZEwgnbWnj/Csf67\nDE4f8qi4zXPbcW5owk2niZZmzO4bC8PLxgbF0wY3K9x5zZXpk+wsP18PXNDp\nNk1H1AX0waTTetfBQz3ww3gsBUAy5UU/gv/dLCMV8dZ3MiEJG72RJrSmilH3\noYvD7cKhlVtFQvkXLUGTyfzZljnDOniB+bTUfyZJzB6Irz5VhcuRyZ1WuoHh\nv71S\r\n=SvFP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f2658381b.0_1613601901269_0.05930606392104343","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/segmented-button","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c9aa20449a3f5b212eceef9f4bc04a6ed6f0fecd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.97c4d4035.0.tgz","fileCount":55,"integrity":"sha512-s7PjvnE2WIKkNFl3RVLVntxDs12O4TK2qpomy7bHELRUHvT14ToQ99p4VTU2tiW/HFERuxykLDWN1jwkzOXD9g==","signatures":[{"sig":"MEYCIQCKAKMAi0p72nBIbYq1SaPdp3eKEvs69U5A9UQeRRuJpAIhAKeEenSmZ+seqopvpgEhZ6SbfRY7trMokCHOMU2Z7/AE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJpCRA9TVsSAnZWagAAxJMP/RWEey5ZnijYFEdfnr3W\ntB4Xwvyapg+05fqjNUNc/l2VE/3nMcuV03slQitzu2GwkJhUM7YuDjAHV29u\nG5iWsqbSfULGpAVZgQiMvPqEStSL4W2CYdINDLfbZhS+IuLjGtuOnVRoGqZH\nDPn0BYHyfkOIYq1SNiQ8J0R4AXF4k+NuVVc4qdByhP/Y8cZ3VGr2iM+hEZ+/\nB1z494s2Ddc0mIfO37p5h8IxA4LHrVrOTqdt4IdiOpukMkKxEqZhCPY8ey4q\ngeI5cJFylAlg1KR1rLON2RMPyUlQtw1B2wHpGuv4cUOKlXR0vkXWgMuZVxL/\ndGrG4vOHKr9SBnm2e7oHCaw5ZMtBECIaMmAPEfNpgLj3dglNu0ddqitMXxp4\nhf8BOHeQyRIMs5g56ZinqGLobdervtu4qyF49ukTnoKGGX8guYxVVZcXKl6e\nabrvPQDlK6msTLlKp+DBWoR0WaPzg249fWxxgKnpWVlrY94cx02qIkOFzBPL\nq1DB+F9LZ0sXTOlCjfR0rMBgF2+Nrvrcua7rPuLWo8/5igEefj13BKGt0k3Y\ncIR1oAHR36sub+oZcLpQEFKkqgS2i09VR2Ui3rM4idssTiwdcBV94Mc2Gazd\nhvOTA3lqMLexosvU2zB4iKQFLphYL5fegK5h+953Mc7BiLU1Vr7zU4EBM8C3\nwMPe\r\n=OnqQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.2","dependencies":{"@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/touch-target":"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/segmented-button_11.0.0-canary.97c4d4035.0_1613615720672_0.6939885112497999","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1c4dd872875e3013f52f47f1c4060fc9830efbd7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f5bb4648c.0.tgz","fileCount":55,"integrity":"sha512-hps56m95T2sCzUfav5Rfpdh70PYKHT54oTUV8Mw+etCtnS2lr3jCBzuGOqhHsj62wt63l9MW2lnjiG8um7Cbsw==","signatures":[{"sig":"MEUCIGXeX7+ts9ose9s6QoKm8sb769TzRvoA7gV0iTjDY7R5AiEA07/w8KVlBc+RdxpsLjD8TDnQ9Exia0EV71Zgbru03gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBZCRA9TVsSAnZWagAA6NMP/RnmwlxGeFKNE2WHJq6U\nk1RhVPriDYES8LSO+qSUzXUBSvNVZIxmkgCUpo/dcnjg8BEcSs0P6rJO7sWC\nF0e49Dn3UduvBF1kfevXZpTgnj548ZvsiZ4lc4npCS7RWIhg6qJnZPQgPIbA\nNbKS0qEvg4FOMxN2BnYPQ9dSFujOPK/iAiz3aQA/xxLmTf0deD/zVJR3Tv+u\nqemldiaoBxbHkF6oVvSXcpdOvH8to1AxvCBnZr5SToQmHi0HIDdmI7eUsYge\n3suSVwInE01gItlJjZhuN2CCgTjsfnK0+m46iZHCm1qZ4kGBbO8rrPc9KBQY\nxw7KgJUbxFiTjuQRij3HMknLt4DE9c+tA6P2RqxLeHwp87frMXCpXK8rLU9T\nWcX8vncO5Zuzzv1a3NoFAee33orrTgvf2rVqXawFoM/zF05Vx3n3jC/YzNdD\nFz9gp82J5UQJxDSkZ8fCnwBanQ6zGmvUVf6JZi/+XuRvLXZHeX1D8rTYvqZF\nYgdnwBBD6DwD0tDAowHPWkjOLl7vTxcXhVOFbxrSZufxlqrK6b+21iKn/37E\nZ8cxoxE9R6c4MJ/VRfNb3kkjgQZrtaShll+oIiQHg4ylBQ1HMyLk74L6FhP3\nmGRM7pDd/4aI+YLCGGY+fQ1Zd1mygINeI6J42MhgdfmnVgVRGRMYS6vBduPC\nSL3p\r\n=OmVM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f5bb4648c.0_1613664345143_0.8864781704894793","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/segmented-button","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2a32b4ec86388cf36ea7754be8f6bb35e99d75e9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.302c7a960.0.tgz","fileCount":55,"integrity":"sha512-4jKgzq/jqAlyjtjVSMNFxna7S86mQTxF81HERUv99FF5pwvcHv0KWcksr665RX4q7De2owoRHlOLV8ZNcI8LOA==","signatures":[{"sig":"MEUCID/o+NSoPhXiRunjcOoU6MAVvbWwDH/wme1bx2BDHTpgAiEA9O6rM6CcZJ/lw4JekI6vLN+4HvwySCIY5wdvo3A5XBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrQICRA9TVsSAnZWagAAKgsP/R4cITP/uQbdPRPaeBc2\nEVrzLghaAUPAqILhYmoF9eHj4Kqo2+zAsl90f3uAigZv9w82RdBl3gdTq5DJ\nqtPJCp50CT6rj2z/HTcMLE8vIhPjucIt/AA2QSwVmoN2ROuT4zKn9VoLcV9Q\nPKMBKybiaY1cVRjjC+jZoafg9ydRYagWAOeGHcndEGeIbIf8aIU1l8Tex+gA\nFYKTyDifT8AbEpYBHe6x1yzP1QDLwKEV7fc7vA52yAN94ofNYncT8HhnIzAP\nSbRcnWbPwhoNF5Fgwcn4bDnXABtnkqrIFs67eqzdY89kSPdd5D0iKVIC2F5E\nlOzrbKPhwIwEAvwTNin2wJRtGGPKbj/OvSQ07Sb7UGrdJcnlN+osOfsW34yA\nQ3aW4XwOqpJpXqbNgQm4P1OuCPFoBlvDAdrDgwi+TfIC7MmI2mqJtJzNKwKs\narUo3aF3YrQW3UTu8JLp3LmHUgO3KcCPHNJyWPBNYU3RvgoBSlx/bN2GMC3K\n3pKkE060mLfoXkZ4Q3O1Ia5/ffr/Fb6q5Yzk83et4fl6rR3i/OiLvUHSLKGV\nxxji6i/4nKDHQAwwkxElV9qwtRc7Nu8oYF/cdDwRmbylCr3fUvkGj/C78Quy\nOtVkdUzWDSZxabL1/WUwtT685QSkBiqMA5e62CgbThNZrn2JzfHb/MiCUW3m\nTpkJ\r\n=R5Dy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/touch-target":"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/segmented-button_11.0.0-canary.302c7a960.0_1613673479603_0.5147749382398739","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/segmented-button","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a084211a9016a1203741d365430cf5c034d1c1a8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.aa0aaf026.0.tgz","fileCount":55,"integrity":"sha512-1Funx3jx/GhGK+8Xi6tvpMmcCNhl+Rko6fuy4fcTTprfP+UtDLrU4oesblPxUbAgxMx2xoLZoyyoQNwnk2WvXw==","signatures":[{"sig":"MEQCIDAeq4YHEI91fCnWsrhNgar0Z0pBPPJquVjwgXTr+D2YAiBt7BXSezO7xOGK0hkmziVqYlIXex0JRWFlVuyQY/UiYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6+CRA9TVsSAnZWagAAuFYP/3z6poBrDDOgpRyQQnF0\nN3I2a61u42p5s1ro0nPY5xZSVAccSsnLCPFjlHikQoplEyFvkxDFDZj7x81D\nivpJRp7yN4qTrtuIig272BU+T7W5mK2mcXiDCkT/ReSQltqsePCLUf9YzHq9\nX48HTOfFrA/lmwr0R+pJFE4bgClHic/5CcIvJ1zeeJ+T3tEumM5ckid7/aS8\nkMMnKLwh1XILNlaBPXa8cw+iZQmJeOSUARcmh95gR/aotN4UfPRIOg48iLvN\n8jc1RKKNUZelcmC/VlqnlZwR3AaY18JVpQL6gWGHMEsb6pbKEFd+wKmHihO3\n99++qwYn3M0iwkSU0B4R2zH/4NlRPNuSiHz7ulfc4kQszcWYAO8VP4XEQQmh\nnwlyOejGew6pGcjIVkVZ5AXQlJpah1eUq8luMKf71nRoNcvkV+zJ2RLAx3wx\nF2lQWPumc/dTUlbEK5j4K6hYTPgGMZZ7vs6mHpHU8Oao/le44XRmY7HuvHUW\nV8SYkINBHTIzy33vtWYLhkoZYH/PhLTpFyMsTymD5DtqGIr/V9RCehkK6sHU\nNRYO76SUEtK2xSMX2dN3/7vwon6EpQshFIykvJFanC9/cUxFHVOhuWassnN1\n6ozf3Plld7PSaUaAdTH6ElfKyku+Idsh567jjX7IzDo1YfWwmOj9au6mLv4C\nMnGR\r\n=PYqG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/touch-target":"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/segmented-button_11.0.0-canary.aa0aaf026.0_1613676222032_0.07101487665627215","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/segmented-button","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"81e61eb6d6208531a174d499a70e96a28de61109","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.07ff0c452.0.tgz","fileCount":55,"integrity":"sha512-dA/eXtpoSrhRgTJomB7nPO4iFtpHsvktW3iL3pbj8lO8ftX2gP8j0C2vsLW98/in6APXVlTRbAm85Z3jNlixEA==","signatures":[{"sig":"MEUCIBpyWkiqjOHnGIjV7cQaHIuC5uz2QzPBLhHOwiXxi4iPAiEA8d9LMXyyQAo/Wcw1CGrJ1tYUdve229gUAHrjCGjO230=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsM0CRA9TVsSAnZWagAAi2MP/A0xQHCQYKowMux3nHSx\nZi5Xd/9STp0kUVT/mnlqwfRkyZ8A6ui+RWVVH+ztip7yvX+a/cK24Y+gwXOD\nY6sRKJ3sCb4YReTC3LEbkh66BD8noAIaroQes8AUDv0QhgrbR8CBCcIb6X3i\nxqRBgQcc2V+p+v3DG81khkVB5xds9yOg73Xzn4EbsOFqAucTusX2jKK12JZz\naT5yY1RPKN7G/ijNLM92LmpJO/Akuk0azsTWkKkcNf58fbf4xZnM95gm5PNv\nRLsPmla2hrLgckipaGwHMIjgpSNCoEBQtyqMEyzSGlZumAcEC2ScHA27eC4D\nZ4nwLNCUrG4NlcDkymCkxnP4mBe84Gqp+J19MZCO1DN91rpLimo6L9aAwqrG\nvj/mcxgCqC2d5Nsh3rVN32vs6vM92WXhPihaogysoUGmiGUkMkxZoScbIC5y\n1qdSQNwSchg6BriH39l70UqZ4cJfJWhiH8mRnM5bbGJbHH/BTI9ZSKkfzmbZ\nE4v5UXlxWVsZNKxYIRSGF22t15JU1lz+iUfzhAjr8Uy5avM5ioQcLHVvvflI\n8xqAiLyZpc8rgyM1chdsUNIQC5N21u5oUfUY6ADIHwaDN+W1b6YOvybGBygo\ngL9G3pUKoo5WZcY9lKG613irBKLqE4IrOxxlj5T1SLosBuLjZ2YYISS4YW2l\nmv2D\r\n=Iy1O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/touch-target":"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/segmented-button_11.0.0-canary.07ff0c452.0_1613677364350_0.31353615630720144","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0b8903a108c06c4f1ffa63fc6e146a65963876e1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":55,"integrity":"sha512-MU05qkWCk1BXYk4P5/J6iMWAZ0SULVEcTIMb0SvMtBcVLI/zYPa0VniocQBAUgUVHYpxArMibY78lT4vx/Mw+A==","signatures":[{"sig":"MEQCIHs0cRGCvBrciqPRMJIkSrVKS50M2XMibpAn6j91X/rrAiB9H8jt+FDQ+hppEWzopEOsxtlJ2WmCAU2Mv7vtXtok7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvf1CRA9TVsSAnZWagAA06gP/3Cc5pizvGlXD7s/3x1Y\nh6PrnNhB1KSwXL3LLYx1YgHM2uoKvYfV2+5+HZRzP0/uqhIJ6DfXpnz7XA2W\nG14qol1TvqdGJwRjYgik5OUy8Iu5gONbp4TPhlHToj4zA2cSWPX/qlvrR5T3\nD0Wlabhe2815lgYHTQ51ByC0eFAqAwpvJX8oejkSHnh0b8hP2J21olTb5Omi\nIPPGupZuQRpUAWBWCBLYl34NEDuFGpdtTrYFg7vw6QrGp9WPwIN+/sR54hql\nTkq/tcqjMdlwIb1URSy5xjkTrloVphlzriFWW6c/Ui2QDEANtieVkqay1LGJ\nAODTDN2AE1ugwzmFismmF9Nxdr/0jxsiBCUfIFp3Tsee6C1AHglvQLHj4RUu\nFXIAD5DvUPQfYppe0NBaJuk5JvM7b9d+g44a2NmmSgWQIuWa37gy30OKqOVH\nnPjwSG/MRx/ZboLAzuRksn9Kd60+5v5WxxCl/YU5DShPSMKAzFaecGGn0JzT\n3lRVw16epC4nkB2debx5g4p8OQwOzxNH9mVW3gqL6rbKZ/TDOwA4xRlV3D3h\nu2eARsYt/F9d3hF2qVsim5E/mjY8SCTNbByMJvJWK61CbkJV8y5DvQt1KHMT\nBnutPZSoQ22CkDnhqorF42qAin5fvPyjRetCGJfMicSEqfkl5yvmBpbev/3U\nfSSi\r\n=d9mO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.bed7ecd3e.0_1613690868743_0.5908508238861883","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/segmented-button","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7695004cb3f7851beef80c002e43b9c47e6373cf","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.06dead2d6.0.tgz","fileCount":55,"integrity":"sha512-Dq6vBHhuPdPn4K1od2+Yjz056HwmuEVsT5G33gRSA7kOr4EaKiWH8bMlZxphi9QRo2WUGiw1pL6dCL5Ki+CN7g==","signatures":[{"sig":"MEYCIQCOHGo9qpQaLc39WDE3iDowouKEokKA2TDxLGlU6PPvGAIhAIaQhqARWGtSmHcLOCL/7qPC87/C3k0CIB5hE010hbXt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwg7CRA9TVsSAnZWagAAlN4P/3eENBXiffYyt5kGkjzj\nkt2zP5bsTfHA8Au0TisDzBf4nN7TLiJNGjAtf0B5E8OeC8xxH7XpuX/P8Vls\n1LfIOaDC/PAcfr3jKcEhB0DrF4ysaIMRNrI2Q9d8o/+MUjEtlp0h2ufLiSyt\nsa7AxPcMds+d4RY9ZG3V3BcUCV+KGLRlRNB0TtQ5iH8x9goBc43oLIIGsl3T\nrsegZ/j7hjySbmza/qKK5oXVnbAYx2L/JgQuiGJv7tHQX/LF1L2cNGztWQP0\nboInTl2h4Lwvtd1jPoiXxNpcz1cd4PoYhYUOKxf81VeRh0OL/YoCn3VzHUKP\nUWt8jDSbAGrlxXAYjpggJ7e6e4FmUuQng0gkGaqexX7c4zx4yQMDxXpyv5Sw\nqXIQMSRRzX4IM6BmqbHFHcHOsPfIpj9cngWrETxK+kXEQgABpEO7e0Q/n5Nn\nWXPJsCb498eKHtgr9CnQ7f9KgvgTPiky17AsxpkBtA0nH3J0hA2Ds9F89osY\nnzZTMSdta6ThRBqHSTh8URvtCqtc7T6ZgpHl2qeoKA7/oW0xjOkwKDSn3H5W\nIvkktcOhEQLfzwNoxy9FFZ/03WbwD2p16WFcnvpOc8I5usDX6JFiBNf6KBzK\nfJnSKMOQjWvjwOjJO2znUbugLFfr/6izogF7ePORzktuvOTU0HDu7UseQ9v/\nm8ID\r\n=B+4Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/touch-target":"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/segmented-button_11.0.0-canary.06dead2d6.0_1613695034834_0.9641324416374151","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/segmented-button","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b8a86fe6ae298efbdc7467a0982e07646b53ae62","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.cddb03553.0.tgz","fileCount":55,"integrity":"sha512-iyFhA0lqs+E7sVJWDHYnBp3nuoo18nyl8cty8Aam8IIuSy05aLiboq1zs69VV38j2DoBAyIxytn0Cfa5teU0Qg==","signatures":[{"sig":"MEYCIQCSmJwmZcMfiJuZ93UeiArbq94w7M0dIs56b654aUyxxQIhAOW/1DOwA643lB/3urxnWy/EBugJoyz7wsY9plqx36fz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzYCRA9TVsSAnZWagAAcycP/3FEOloqKQLn0/eTKkL3\nd5uJEFCvyTnMJougYZt63DJp+FbWig5Lx7c66x411AH4HJ+xuulsrZPZWl7F\nh5CLWjA0LFPNwbub07MXMAjzYowKtePR70r6JeEU9epMb+G7Ce1TsBuvqe70\np6ptKbgxqe1w7TA+So4G5LfH21meWjgZju4RlOiTleY6WSP8HXv5IyeZmR0O\n9oSg+BdLZUWVdJVgn83iKjJ0+XpKALHZ8otP+1EcquQif2DH2pGwFa/wY/Td\nzh9FFPph9GP8Xt1ZoYIiN3jKcRvypm68lzfTdP/8h1aNfbkBBb+kHammP7jj\n1Ab3cLPmum8qNRv+kzH5TeSX7HxFfAFHNagtBKhJ689qz6wLvlVhJK9YHpP+\nJU3wuEq4x7k/hU6EGldyh5S1sHFl/Tz55oPxNLeD/5NPnooyw2YVM8NnVYl3\nB6r3i7MMyNy7/capfpPMUyUJW/BHfp5bhux4x99NmisffBPe9P8HcK4HeNMe\nOyNElApRZgsY3zyf2Bq3G15tcivRHZPqNo0H4jv2w3etAFIDE6QVMDYUq8Go\nOPqYS7F+n0R/IFsOYTB1GhOKLYurxLCz7qCLJbSbb//kkP/n0KmAAFEc6tXz\nIC+11/sWa0NoZRiggH1tAq6THSqpGOse3cSDBnRkoLkKemAx9G1SVbFZs1kB\nUgmt\r\n=Lft2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/touch-target":"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/segmented-button_11.0.0-canary.cddb03553.0_1613704407994_0.9482360958649934","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e07405be3df24f311158857953ce7de64109b6f3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d6d8d0476.0.tgz","fileCount":55,"integrity":"sha512-uYfjSYCqih2jnUGQnqpGS1He10gjzZdwagfwvgwHdh3n1bzTKBOh9DFCn4PeVIU/uAM4SJlQQuAc1oURj2z1EQ==","signatures":[{"sig":"MEUCIQCF4Ortgm02WbIC0YzTE2nxdfmP7jSGzczoWF1uGWGnMQIgBXswO/DhIZnObKOCeuR/RLgzwKPObYPSKUhkShPxZs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL052CRA9TVsSAnZWagAAh5QP/1aHiMxZSeig2YqNaips\npRXYE1H6BTKQI72UPI0tpz9jXqiWBjn/7oMZmoigCtsW/PfzxWWmvnL9HiWM\nnz3S82MxZsx8lfodwInMxI5vZ0I8tgT3xoCmhMcDdMHbr6RTAkpq2G8QmYD2\nuzXmxZEEacuYBit8/zyafOV7qakwSLqMQrfS+FqSytZ5uNeRnfa3TjSpl+4h\neC2BbRcQiyIBoZRGsbvp4qKIBa3wEPXh50UNivQqWB2ZfwBhFnIZTaOSqy8F\nOdKT3m8LIH38lvaGagpnnU8JE9gseXtSbQFYOXh3paWOWaO0cFwS/34m18Hv\nLrqZ7xhpgFBaF21IHH63eHivvgGky4OlVcce3aI7+4zF1aEXTuMUPdAPg92P\nDJ+8m0aZk0sFHt1LCYd7wuWnLbcbIcLai5CDoWpv9mma2YsFULgx3WJqylNx\nA3qVuV7Fx0AZwrDPqrWz3mS1C4yiesHPE+0YXhqQfKGqihEpUui0UcMgrSWM\ns5AFxKO0dXpk58IMsOdMVc7IMld8o0Gp7i3b5t99znqgRNNbyMcZIN6EyZoo\nEl7VYbpCGT+SJg5C8eJ0Z70zlNxqotcJSqjAhSswepfQL5hJVDApslvyUVYA\npk8+5AmXy53Kjt926x9cm3rqzJXIWqk5E3sYwOWVY95QEBAmsN0hsU404G9N\nBLqd\r\n=Fvch\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d6d8d0476.0_1613713013569_0.2821994316300127","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2f667e5c666dcb5e7a4fb4a60ab8a5cde4fe148c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":55,"integrity":"sha512-sC6H1NjWAOFZCokrIirryg9iWMshs1m3Z1DM26AWP2ETl7jecmjt0zrbCS/Nb7JqGgSMLRBl/F8TmKYyUFmgMg==","signatures":[{"sig":"MEUCIDfwE5IdQ5pRQOBjVz+i791/UNLo851ciEVPa/VM89MYAiEAiH98jFhBfFy70RIuy24mT80JsAa+DKUbqn5JL9DDhrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL901CRA9TVsSAnZWagAAEmEP/R9zaxAP/VKGvyuAVhPr\ngOywKG9ViUXGvMLpODwJjB3+u1XFXSeoi1rHiZZKAZcg5aXEclfM+3/T38na\nQ4ucm8f7kz2gC4znancz49vX0UiMPZwNuAipct7IHkV+YobFu0nHI11QjOph\nHGmxmcTbD8S+OvcYrmWEtz+esGg6a19F8DVbE/NgfbSFIv4ZBWHbhcq65mmc\n/+ni6e8iSKoDUx5Uv5x0kukkQFKWMYZYZCt1nE/oTV7lJCnyy/i0Km5+SSRM\niRcP+D73rUlis1ds3LiZaVtdcEbDL7a+vtJb0h/6iTpRoPPRRrsZzsrRDMN8\nXHjYNhdHJfZxGImadyRz2grOdzklUp1jutIRC8cSof9CwvOClftkqOqNVcGI\nUxzM2Wyw4gRjBKQfeVFerwobLx4ttx2oSG79TleXqb7ZDDg1zjd5IrtrwFqR\nliKdbh4Ec1ig4IH/fv627W8+ufkZXUR2A5BC+JcElL2YEgHqXDVTFxUCnOFY\nRG5qCwDN52Qlwqta6kdUN58xzkCT7le59HcecUIGtLrmWgp9gZCTCRC8JOF6\nMOs7KxX5WxfFwRiF7pV1emt4FnqHA4aO8mphiL4bBze1Py47yqghqst55asI\ndKDB1f7Lv53SdavdmmjExTNoJE1Ys1rP6QX0SbNagBhMvaz0sLJ95O91sXgQ\nP60F\r\n=LnjW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0b4a4b2eb.0_1613749557146_0.6863454094240575","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/segmented-button","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"889cc6a1785a057af75998cff097ba849ba5d301","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.3201cae47.0.tgz","fileCount":55,"integrity":"sha512-0Twkr8EmdXVb++zGJq6AmULCkokvq1D2UcZhJ3TgfFAkkjwD/JqPuXlA5nCA1kImUnNd/lDU2x8BcAeKQtBlPw==","signatures":[{"sig":"MEYCIQCXF2qcigQS4k4LJt9G2OnBLL7auRdoc+VFsfDw9xuV/QIhAPDQwBrSGE67DzQ4jxiQwgum3Fzny6CN2iPdSKbDEeyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMoCRA9TVsSAnZWagAAZ3QQAIjp41BtTQfTdpfcTrSM\nW1294HQvas+nONwjBXveOoYEWzOtoABjnoUs76Ewn0ANuSTFDgVGAhCUKvFm\n2xYhuZ1Fka/xwAcSxf4BviXMOfGPYDX5oIkglRZiiTiuF6mnGf4gbrTBh9cD\ns8/CcTY5WzOwwjWqZ+thWeheS8dtlq+yFX6TjGrHmMKJTZ6ZPhYZy5psGxpl\nW+nbF+cOK7LmKz8t6M7Dp4YwSX37uf8zUJKeqJHDyLsQOHohvUu5hwhbJFtw\nBYlbzZQfpEJa0sOEDtx9TtuD7fZzoSnrQ+L7lYSPIaMOxbtVc5eLjK0dx8TF\nWSwh5wRgx+KPClkO7iO9CbqxPPZU96IzuF03nm4HOW0HezlmzWWEpX4WmEXf\n8Y/MU/i7eLR0NvKu5IG34BNfHi3x8NjIjpk915aNYhZg+C8hFJ/X983lbok6\nI6dbEVJrc4c2KwfFxq2ATw1BO1VCpc+AvV3AU1w2s1oEAL3PfmM64dCcYMNO\nLIskQSsu1IiYyork5GYq5o49mfpADjl5BI1dZjLnxAFwbglDG163oiY5cHOe\ndIoLqyu8IMpeTY1t79+FxL1RTcub3Qh/gKzcUXiBCoQ1ifM/Fr/FGnMkg3R8\nG+V8+8Aqzm788TWc5Y63QLn3WHI0rA8rmCU5L0SIFxsr+1+0WeabgaUNl1TW\nWxHC\r\n=9KHe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/touch-target":"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/segmented-button_11.0.0-canary.3201cae47.0_1613775655928_0.40580111562261933","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eadd7d015134f781b1e34aa35c0b8c8a65862358","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":55,"integrity":"sha512-i93txquaKVF4N0/JsDRDSLJ4RHTmbW0T9lin67gsYRN/aivY1XlZ/Tnj91PvuYS1fN4tiFKQJujhVZnpZfDoXA==","signatures":[{"sig":"MEYCIQCATArykC4BeW/DBgaSsNOp7CebAeCCJFspsRuvtBfRIgIhAKCk/NXHO/OgaqBZ1MQrv1emWR83tf5S12QdWBAAJSj6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArZCRA9TVsSAnZWagAAU1YP/0qmRuslY3E2NmGIO79L\nHlkr8RyvbRAy3XShGeg3vnxJftXV1NPFYUBxWmqS/IQom5N41tIl+Z8Md8TD\nSkBEipdkQh0xrnysf5grUVZgfx6BTv7U2r2OW54e+FeQSnm2prcNNj4BYs2B\nIiejfI8d6bPoU/QJFUCOwUYtI6K6FpdOXmoUgY0vRMmahxpDkSgVitfaEkHt\npHDctHLjwS5tzbtaYTClUBZs/8oLNv3u+eWUfkxqhDnP08O8o4U/YN6QcRf2\nDVRDEsBmWuGPSnBxvqg8qezSWHOPBIQAVpi/Y1rWHlNsCJ0I7F8Lhhu9EJjD\nl0Jk6t3QhvsvXqyja/fbBGUyThzJFhmrv3QtYu/O5wBdajC+quyFIXid0jHI\nYO4Orq3U24IGIzTXmzUraBL5Wjx4eZiMbxYAkQM4/xD6I7Gujq52jGt0t/Hs\nZp60Xcq27kQkJRVPoJsKdnh0p5GKe+9LMw+i+cBcCTh/WcLH0N8RWV+iNetY\nTEgeAfVDvhaBrSXIMor7sCmMM5gZWeVqVCfEbhIngccC5QhMXMCQmocvm1QA\ngcwiH/d8UCJSUCI5dl/Eusz6y8QqBtyKWugYab1DZMWqi26jW24u/eENv+tN\n7FGpjY7X//orcTq+TOLTGNCs0mc0VYGIs1idDPzR1wzzK7yk7rO8eXH9QDrX\ntz1z\r\n=JAou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f1b1fd5d3.0_1614023384687_0.6548733812113252","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/segmented-button","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5a36eab1a83d488496a5e048386317dc033fcdc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.7899e0fe0.0.tgz","fileCount":55,"integrity":"sha512-EM9FINzTyt7ZUFU8M5Ekwe5RviV4rC1Qrd8jaM8aShvWjS70CCPJcbun33P+XmsSurOSZd2pF+3iZnwWzeaRzg==","signatures":[{"sig":"MEQCIDFwplORT2WMJJwOYu5arHYr9ksW2ig+LN6EjqHM6PpQAiAQATvbFPvvy71+sG0/nGQFU/wLcL3ZZ2RXNlmMnWp2IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":540374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQxCRA9TVsSAnZWagAAFkwP/21hoPNop4I6tC/bhguE\nu1JwKsS3JsNM6zp7cDLNnjaFzBx86rh1Qvs7W2H4EJpJxG/1Vm8s3WQWF/JJ\nEnePMbOJ1r89RukRP7h+64O8BlFNTQjM1K9cpCbgk6xZQRBr5AkScfXcY9Z7\n64kyOzNo2xPuYq1+Ci5yZJ/KZFSufJa/xULHswZx6yLuykU6A6KXJKvBSJxs\n1bg9Q8o/rBBYz/E1KufQJXbZHpmHdmcsUlQGC5GnS+wy9z6j0QjJ5/SRgV/+\nUOj3fmYJxqFf0IW5KTKrfi4DNS7DEnWNDBAB68MrKY8xZKVbG3GuxZ3/TCIH\nwcKXreFlffqjkAv6J1I6vCv4E/mYagPx+9A0vQ6PT4BAR4qeYXqKs0VH8Q58\nTXFJ9hu4q9YDyvWUWBQkp2SORX646c5N9tQXyaaMILKkQiu//awSZs4Ce2JK\njuWkeoNzwYl9aLbzXlDlQH9Tr+yvh1/FEKwTd3xwjwZ9moEOcjyPLX2YCf8Z\npMN9HeQpddFfOqCFHfhce5AdkzuKvi04PjhEIuGsyi0ybplygzN4rCYJbBdU\nnUE0+UkQMW6znF9E4yoSFfCQd+bxqJ97HYcEisEkZuLpW8i5PYo6Lvv/E2tL\n5Wt052TlkuS73xwWyME6Z3BCh+Ky3BVceBMlfe4+VOvmQm8oQ1QmZlwzMBAI\nVNuC\r\n=1la1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/touch-target":"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/segmented-button_11.0.0-canary.7899e0fe0.0_1614033969095_0.38390398040872786","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"58b1123197b79ff7136e9cdbf8a47ba1c5177c5a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f19c86d13.0.tgz","fileCount":55,"integrity":"sha512-0u4ahXa9s2zBNQKE354VizGazxs66GGUid0vrUVHTfXAFSYPHkHyqqQp/NRGdC1EoJfXDkeBqlKgReP7+K/a1g==","signatures":[{"sig":"MEQCIAy9xkQSyQzZabTXurdi6ZsVYOuhwJ7M7D5Y92cWiz56AiAODVLuZxUh9LYidWx8o59m7MpRX43GcNj+vu1yN//RlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6tCRA9TVsSAnZWagAAVJ0P/ikkC2HQzX8ImPJ3ToIC\nkTWNDYSYCHPua8+vOLrtTjIPoMnOLLwgUtplH9l22Qfyb6o2C4WZ8YE7QmSo\nh56KLoIzoTyZ1jiB5Hx8F2blUdW501p342g/RDx0IcwivDkORo6fcBu/Lb5I\nn9qBveQmpyBzemT2BBk1I0ItxjLxKBgnXmJ4ILgGCoZO5RLcXASJ84E5fv/U\nRBmYdmAzRXDeBQ95auShLuj2+M5eqbU7EfZV25IFcfWmqmrMO+RuCr03pLdQ\nXGJksEfM2Pa+xxDAJlFTSvTacXvS0R2VlG0VldbEcOavvAjSbiMTr8Q2nAu9\nT7V6dAVHt5/G5WPxbuLTYdVptdmAImWpDmjQbqyuF4o3B4+L+7Zg7oo9+CJY\nqSpbKvaFoAvBk9ZN6qc4Ioi9005EnIU79QqBinljM16u+kUNgbCrwvsukwLD\nFbBiPrMxVubyjTjg2Xq79SiYI970AMEIJ1e8JKcdsxtLnbAd8U0gDwAx7vpd\ndBFWcOpBaMi9JVLtlPeOYmcYXeOJqFIDs61oOke4iS1zplI+DzTbWwaVFDIF\nozqH4Gmru8+4zSjHkOIj1pnjAxKI8ZDQuEeDw3u78D+El9vJLne+z5HMJ91i\nrR9o6ENkK4DsqGHkeyXBPZXzTyPtv6v8YwXgPE93PrIi/hjJ6VG2JCS9n8aQ\n/puo\r\n=l8A0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f19c86d13.0_1614036653088_0.0973074675882244","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/segmented-button","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5b285e3171f840082b2b0a2497a2ff144b0e1a8f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.60e892d79.0.tgz","fileCount":55,"integrity":"sha512-pQft2JxtUASTS1er+IOqGwMUdbCwF82IQUlxQN39qTH+k970rtXsXoNuFBhKWJYEv7MKf0wO2sN6WEyLxflDVg==","signatures":[{"sig":"MEQCIGHRm+5cHuyYi9b6aGGveqPRoR/9kyLqMqzS/50qF+aPAiA1ii7GV5O68zgbWwtSY/9wEBY6D8v8nirYpfrDj79vUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFbjCRA9TVsSAnZWagAA0g0P+wcQ/jfxUBjAE4dpmxeL\nIeW4lmJUDyQy54uVCOrHsty3jHU1K7je5kYlFtJZr8YNK7JP92mIppaq84Nm\nwyqP+p0TNFZzLkSDPVs1+NE+A7/MgvPSWgsAcaToYcuAnY89w+oJ70YkoENV\nBcL+5EanDckVMj/zkgaANqoSo8U8WZkvg4maYE/j5KcjRHsscU04NfHbAt3g\nD26zSzTcgOTC7PToVuc+qnl0nShVUmqbWm1uSITlaKPgB/R7CWMHy458fnyj\nA72eeEYrbgu+soxqs73Hoq+Nrk8bmOyn0SKqCyQNOEXgIENfJQrUooigVs60\nlFvYngU2lhlUBoOsZOlGd6hVKHuNE82YHwLsRsJhaWNBVEHgPssOQ8zzLtv1\n5hgyLveHGMVmEV6QTreKIgt9U1TV6Q9ZjiahRhxgUFoYlnADQR5+KN27+i22\nyJ6hRLinqyGj7dzgcSsewZv5wGVq9Ci/ekC7DU9TPG6CUOEkUsydnpQFfMF3\n5NIKvnII5rDUU3aTz+CFKW0RIamo4to64Nn5UvmEA1zqHH4CplG2E8mSuwBI\nEiqdIhGhG2q+jXqnD09yAjPuGxDc5xaGyNoENurUDVDnSwfWJ9shetzUreli\nRUpNsv5F5or9vdxOJs6RlW5D8CBDkGl8Ylr5dGwkNvRQw19qKZaoV20cjFKK\nTZL9\r\n=Mv/M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/touch-target":"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/segmented-button_11.0.0-canary.60e892d79.0_1614042850875_0.8965116328812508","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/segmented-button","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1cf65e26f05e97012612829bbf47e858ff4151a9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.c96bfa495.0.tgz","fileCount":55,"integrity":"sha512-QIbzLrQQ2YPXLIXUlG9Z3v5J2GsLOJ5IoSx+LUNxqU3gPoTfTh65PTEHz8fN7cRKmGsbxJ6N4BUpK+hgv6yjvA==","signatures":[{"sig":"MEUCIQCPXwdqpzCAJRnufP4BbAgPfMgH8r/g3hFuhzmEgva1UwIgTT2OGKSVnHR/dMr+RrsR/eRaH7B3a3iGekScPZvmo1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVh2CRA9TVsSAnZWagAA6kYP/igxdwexi+bj/f/9Vgqn\nN4Eo5VeQVwbY3nExnY0eG/g8VMQ7ZfsLqHVlUpq3Tyq5S73ZMTO9x1nwiL6L\nGt/Dxv6SiTJJYQcqLWxEFQZmadbsSehOswvFL+3diekBA6RFy9OB+mO9+sjy\n4J4SJYEtEk2ZWJGP3q4T4jgohrUBlfxg8KvjNZHV/SSPMnQ8cImRC0f021b0\nbQKi2r6Gzz0F0oZX3QvCyjYH21GOhOXh16T85mPm4H1oeO+QoXOhmp5HVUyb\nPYJteLvIMAEZQukkyGhysyq7J69l5ibCCPgo843+B9cZdi2VzA+oP2uh5eXZ\nYpGVVJueh61zl0FxcbtAzCHIiprEt46i8v1CY3PYtnXKXJkeWc+xjaYUHihe\n/TVVkXC/hnT2OhBxEHSuiizjv3dxTRsaGqsj+0rUWUA8UjREz5WMpYMLcTYn\nr91hPIO7rH/Ulse6ky3txIh0Nzfo0mZh+ZvtP3kLLgSH5IiGgBNNn/7e+se2\nayGsMuYWN63ywAQOHcBNDhpGubDsESppGorG5FNbdm/WuXsRjXVPYpiSbQl9\nww0TTtggvxkgEF3jwwtoMZLVu6USDI+mXFIDwTg2nklqSx7QMk5HqWSMqwxh\ncRTc7MYp+F7K6nJUtIXOXlMFTXEEU1Xx77ldA3jg5xLoIuSK3uU9FzETqfcN\nMwSK\r\n=YVR+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/touch-target":"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/segmented-button_11.0.0-canary.c96bfa495.0_1614108790105_0.2416470867059788","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/segmented-button","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"10c85d0a1a3c9eac8d23a8f8f5e1c829a01f349b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.fa9b59f67.0.tgz","fileCount":55,"integrity":"sha512-JQhhTwU6B52nGc6imgUPLGA6PdKlPh2i0KZOR8ow1usm4N2ZPjg5ch022dGqbhr0Kbq/8suJuGWbeFJUNLLfIA==","signatures":[{"sig":"MEUCIGHAz9F0RjqAnjttuPlVfYir85RswaWqefAMda1hJF9VAiEAyUzRoKqrRt0hKDG0bnzSMEaMgp5zJe+zMQnhY6H2bsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjFCRA9TVsSAnZWagAAWLcP/RA8RjZxSKy3BBc9sN50\nK9tzHLtEh2w3JCNaqEJ4cpOICb3OOeWDj11yI1ZClMW2j9ERH3ar89hDn7Tb\nYWCYUXcAtPh7P23BWLXghZsAyRHzMbQgnGpNYb3z81tfdPco/TzlghrRY9qr\nh7rHDQkSH0xH0JuXxL3ZUclykWGxv81LMKpPBBLFjzCzVLCdDSk/zPLzp1g8\nWbURpbZvKS9PHHH3yRl+IWD1UZF3JGmAKZbayE1h385+M2t0Y9XctsZi2Q5r\nJ110u8sCgQY8Bztjl1hkoWWUifG5DLI8K1XM7XTkEe7g2g2bK+UQfv9klJpG\nESs1l5qbbdik0Ia5eQqSA1Zl8iVkIYX8x4YHL5qPeIHnlFQnIWBPjFMZd264\nlv3iU5w0o3Z7Co5k2KJpZP9yBU0zit5cN9RNjtqHYEX25NsvoK1QJIaQ6Ko6\nOw1d889PlcPma0+dEwRI9Y1H8e39G9Z6hIhaNq2zqsiq+feWo0BUm0/k3g54\ntnIbMxDFTRCLh2axwGCnyUQlRyCKLP7EaWuRZPr0BgSZZoOl675RZOZOMWz/\nolXn7YlHsgrr24PbsztSHpCtmAsHAnj3L/l5nkOKU0KzXh7PWswsBC5aTxyY\nx8CDZNb3drxtMZIM1brcZq9fmKm4ukBf4VXmUd/hNCErZ79zfO79DCEWhIS9\nuUXU\r\n=akr+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/touch-target":"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/segmented-button_11.0.0-canary.fa9b59f67.0_1614108869223_0.012546547074579584","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d3f437f8a5af4339aa5884e88012e53315d1afb6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.869e3497c.0.tgz","fileCount":55,"integrity":"sha512-QPDI6v0AbOUi9wM7Z9WQnQuM2eMN/G+50zrURbElbJTv0IdHYxnrahkH9JMGLfqhiSsOSXMqVB/yb8EniBDMgg==","signatures":[{"sig":"MEQCIHOQGGSveVzTCDHYstcSb0B5ynUilcqMs412TJXLigyRAiAOqtDB35UF+Jc+Lyk3GaZ26nCFcR1V+LD96kCHdmEc/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjlCRA9TVsSAnZWagAAbyYP/iy7Mhv9IOkJded4+vTF\nf8h+oDSQhdiee8HG36EDpaZwV5tYDEHLXPZQi9U0gpNYz1BZiVtO2amp/fmF\n/FRqBPJlPeO74REQoi8Y7U9lK9deXzinUrGduJ97LWbFRfk82v0UquYzjBCl\ne7rVSgumy9qfEKvLTt+Nk1/pHU4J8+7WjlVbEsvbScMh9kO88X5tNMhCvm6n\nCdzWFIcWUSTcaBNuzA3jQCHW0AYE9HMSjiFEo7j/A7XFOhPmw32GnrvEk3Hv\nE+BqQ4mRHZNmMe6iwUP7Fh+TOl+K/+tcwfDW51LqOG5wjQ42pwYD6xfy0gZk\no3tLcGn2izh8J+bAzVhxa137toWQjr+ylzpOaHEApts2AVHe1naRtUAuB4oB\nR59DuvbZIK7SZGllUxh+hvU5kTeF2K7xE522pT9zEBbzsT1dnYfvT5fCAZsW\nIZp6z/RDIeYBykXze03g2dLrm4QiGp43awjPGzzdGWNgNVvI8UJ0AR9gAObS\n2tpoGDC8cc4CoDUtIWobha/h4C7s9pG1aGAWN+GZIpiecyQ7X9DJT2TRtb3y\nF8xO/1rxT/5QJzAnFQrl6GsI3JQ1xrMgA6oOjehLpFBX5gFZCUYkb6up4bcW\nDoYrLtNbMjE7CZOLPnV6cRccy9PZMnA8XRiHv7nIm2ztHxFlazqSMmBeG4nS\nejZh\r\n=eKnQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.869e3497c.0_1614108900533_0.04177072938779203","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/segmented-button","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"791845d7387cc360c3422750c9383e63aa074b07","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":55,"integrity":"sha512-bSIDsw1ZPuRU5600Jj95QGC4nbejEsf4rPEqnqY6RM/rQF3Z/eSVw4/Xn/zy9I8KF7kozC4Uo5VUFLVaKWLP7g==","signatures":[{"sig":"MEYCIQDqhj69ZG1xvftQJ6VuZw3k/1o24feFfKOIEU9CfmQbOAIhAMpa+xA5vUTSWT53wWyJgCadlDE24tU6tVfh5EKnr5ol","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVydCRA9TVsSAnZWagAAd/sP/02555HOMj1HqSmub8lg\n+EadmEPmjt/uQNbpuhYvls0pwwwYA6riO18RmvwO5PJRGDliFuu9XJhfOjoF\nGrbqhyTLt+duS+e81yIByH2le2iLengIIm95YW6IGlAGJymnkHQSyZ3VACL4\nx4OpokY9CJdGFjemdI58Xyt823pxUi217Elpwsdk7V+zYuZRGipijVqk/J8/\nPjoA1/XLwBg/3V/XGQcF5yGgxYZmUEIH3XDfdOkrvvqOMu3hZ9xdzs+tc3EN\n6GuIXuwFlNUz3+Fd/JMISxg8o0+7sYDdOby2jzty/0RFClBM7Q1b8eMM0Hym\nYH9ujL/SqoiCiXi9OaAi/w6DMo4cX5BwuLr8VxtpPgbGC1ZeL4yNtqYLYj0V\nHQmCPVuIjtXl92QCqOhNTvSJsIrva7fJVW2U6G3xDZAuC2B7MAyNMSK63FhS\n3+CFtOJm9bEbgLDmDmtRSPHNttCROi112qCdq/PXp482ynM/tayN4PIfY72K\n0FroX3KMujlkl7Imhw6Gc3QU/oL8xufrisAcj403/K+/SXz+MaDQ3nHjjVk0\nBH2fCFVntVWdwaOdi8aWvnE3v5Zgb0qDwJmMPzkZIEyAmJxoyU1e0L/UfFSv\n4Hl+J6ilgTGynF5Zb8zxxjjjhvkNSWGBlrxu174sr1XFh7/JK2smMbMa1ZgE\nZ1Kl\r\n=PHeS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/touch-target":"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/segmented-button_11.0.0-canary.8ecd7c9a9.0_1614109852844_0.21137565054340768","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7e1f64dd7ed27df35647c4f73d89fe6744cdce03","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.9c85d505b.0.tgz","fileCount":55,"integrity":"sha512-vciDKCsj7ghWmZy0jWwO6CZ0bvh7PkqA24yY9LLDERS2am5Bhl45QRCh3J/PpaaOP/JdfCiueKOgQHfFUNwpWQ==","signatures":[{"sig":"MEYCIQCavCRY2Ml65bXXq78IoHHuLanng6/qJyhRYe/ig0BiVAIhAI0Re221laaCV/nyl7ZUI+7LzZ+uOpnpAffhYQHmkuIE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6WCRA9TVsSAnZWagAAa2cQAJIiWDhMu1z/N0rOQpbB\nUEXloS+o27JebIoUxDdA5P6OrdbU2DmfYZiYJ4f/qppJpo23JIa2zWZKJlXn\n3R+dnQltvAZvpdwr0JTqsCPlN4CoMrk2ZvDupe7RJPshCpRDkk5PSmJYbXfj\nBnOgXct4IML/CLhd3rtCEMKfMLuu7/0loBf6WfdY35zXfUBlQM5VhPjasZ3v\ngXgRr+1/iCoTkOA9No/a79P4/1yxqQdFdEX7eVwFFSWvN+LAb1BUXs7s4Shg\nZLBUjdXzbF2k2zaVWx5IAomc9uCkPgUvVLsFFlz+3C2bEVpdXYOYaXUCd0nI\nqBqdabAiTGsmRvUr3eKYjmgXie9iO1F4lEyNaFv56OlPdwS9/Q/hBXjwxBqD\nAo7j11MB/IS2cxX61pyujqOmAlM5//zfRFMJr4LEEYPlH6mwDge4470a5QR5\n/l//tztgg5wkaKwVOF3kivEYIx16lLV+g4yWQY9CyXF1Q04YZ+gPCU/ymN3s\nMIsitjOMd+ZHnkXG6KrpH6Qy4saA39YNcnhl7xYYy/jKvjdmsgpucRuhPHCZ\nIazmb3JWhr61Z8FmA7reyAoQNg1t3FZAqtJyoD3YWPXkVeByYu0Wrwok7ENA\nEGJ1g3qekfYYgfrF8I+E/M3rYUTsGE5LL9vBkPQPXza3ifYRfqWiHflnqF6V\nbMak\r\n=qbb7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.9c85d505b.0_1614118550139_0.53839986174145","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/segmented-button","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cbdf6b57afa7b14bfe329def70bdce4edda026ce","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":55,"integrity":"sha512-onE1AM63PFdYWXIQiaSFqAA89xKM7RaewEvTuuT5pFPfK6oSuGktBy2aYFZ2/NuDf5JJp6Fq7C8q++jT7XNdhQ==","signatures":[{"sig":"MEUCICrswJrdLuzOL2zTEz83zkvABmZkkrx8py4DUUXR7VHZAiEA1v1AqcAODqMcvt1O45EaOsh36rWER4nvjRM5zu2SHhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbBZCRA9TVsSAnZWagAA92MP/0YXEHJG9GZ8Fn20la+D\nM3de+4cs/ZjPRvzAARfD8ptE2LauSxntK3Vwh4PcnduzIhElBXAIdEtEQ6n1\n5nF1ZUNyXqNUjx0fzuhwtBPtNTndnHptkGKc/lgQPYSj6DOLOyIAVY5YVW/P\nb7uaA8L3qHGPzAcNejxXXRFjhXtL1D88Lnqr7ocJlEzaLmwV8rdavn+AdfFf\ni3SQgBU/1zTMdciBCuEwNtGCUkKmmo5uhToD2mLgKG5y7U7JpVHa2vew2M4d\nrVWQmIS+1rX10vw8z56w89h0G90CZp4faZ10sRJTF+UsCr26MZku4lGy7yJd\nD8+NGUPxEEngQz4Wz9ilBXx+bDNUPaCH7bxMk8QdfaQayJvfOLUJJPXm/SB9\nILOJM3fodv3Kf8cc7IRUJRexUutp4OFyPskqphB1OvCF8xpKh8Nc7UfpVwLi\ngGz+9Pbv96CNRN/8L5YnMlyBbprzXz2nYUtgDMgMMIVd1r+6/RC8yEAb+hqt\nUgf6SUkJ7i6Oox7B7KI0y+S9WDFiGsVfYX+nKEeyeVcizdlbHV9YTlGhuRCd\ns+K6OZpy5tiO4myLCbytTqZfmQfGwzhlGvA2FWwFhJoEH5XNjYiFXAZhGPi0\nY6vgh37toIl+g8alz3SRohmNPcaKMQEjsmRdeHdlyxULJ1UfiJygqgBrcT3O\nFNGi\r\n=7IlW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/touch-target":"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/segmented-button_11.0.0-canary.9f2e85fb8.0_1614131289404_0.37720091139763956","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/segmented-button","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"38f775466378f218b6e4b4faaf41e4bfec738a62","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.19c4f29ef.0.tgz","fileCount":55,"integrity":"sha512-eF7MGMPiUu3Q2oHMECslkxB14HUs/bJrudRDySt++nfPAV+OenbB2s4aftEXdpdmC/Hux/RalAQ7NPlknLrXPA==","signatures":[{"sig":"MEYCIQDHHtHZqF8UTzEdfxbEy+kTcLZhxCT4CACY99tc2JvdaQIhAJ/9BQRtxzcrB0jInGZk5/etvPFfrmqTnp5SiPei8VDq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/kCCRA9TVsSAnZWagAA7FcP/0/vVAMeHQ46boT+ustJ\nlcbsKo+N0GE/nYAf0a9rdwv8QqbRwtebA/uikKKNJlLst8EKcqX+k1XU1bvv\nRV8BiEr1U+aSqop799oBhJzSkm3Jl7HfRJZ7LW+fgNpKo9bFINvHVsFJTlhK\nQH8kvh+h6wvjBUmUdVeTPDA/3hZ/PjlzupQzHSSeHLHnzpnZpXqN4fpqbl6w\n+RCDzji1p3JyyHBYRQlP4XHFgZfasLcEy1DlKY+5u6T837G58A7jcM8SrwDj\nA6qSRvenr1iHv+6MoZc1bmwm6U4DN08RB8lT/CAU37e4zgtV9RMuQps3nWyO\nbihoGZIOK0N6pDMuOUTx6nlKaSLxFBc9CJ2IxVLb9hF2ZBUpRCIi4aEU0n0i\nPyRmkocuQ4h97hGzAd19FhfHqO6WrKNWggrnRQlzZgPXeDjOSRGslqRlaa18\n5ziQVEsUkOuC144QGCXd601pOueojzB6C18IL6uh9M8xVp/j6Wsj+jF0H5oo\nhIfxivM+vNMN6xsgxSS2FCt9Ff4cAbe9eWB6OXKOaDEw0MIMJFiTecpsQcbH\nyXLXFlvrD0cXLM9iYf4TZsysj4c6My/0QfUHQbd0gNmmFX4v/luIeLBW0EQI\n4Q8GVYveI+i1ykkN1Qt4RMNxkSVbvgRHPRNhFlFg20iXh2hLMKnXscutUxAG\nrpNM\r\n=186v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/touch-target":"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/segmented-button_11.0.0-canary.19c4f29ef.0_1614280961653_0.5022112747966785","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/segmented-button","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8b17ec50e3c7cfd523aca56ab88a8ceedc92ef1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.63df6e9bf.0.tgz","fileCount":55,"integrity":"sha512-7vfD3jUxxEKe4y5nAoYeLCYdrq5h7ni1zsHonPs4c4oTR6X+yxCszeP4mhjI3WqABlwuYqC/rNvlYqGeQznjnw==","signatures":[{"sig":"MEQCIDu5TB0YNRmBifln9i0NyIWiGhJCx7MELRe1+Lmp/6meAiAEu+mfKW9bdeDpXhFCmH+Bst+TPKCs9mUZYKbQrlxcJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xyCRA9TVsSAnZWagAAfeMP+waKJfZxu5d/nHM5I241\nW1qbCCqtC7m0qMQ3wGsZ6UacVTGoYJkGUS2aoDxy2nXm4cNL/fyoraA8a8Y5\nk1dFkvApETEesBAqv3e5ECsRvTMWUAGztGNQDt+ClvvzWCqhFvnNoviBSsBU\nVnvHhOk1iYYKgRf2cXNUYa5wGlegr7lmTiVusQB8I9j3L+5+oKEyvIYSqI3/\nxUj4LyN2bZW4i7ywTPIxDUdCD2ABNv2cSiN0D3+P9LvP60qv5H3mRcd/toQ5\nB4IQXoKe7sJLqudFcip3+C4GJQk1AupVnDKc6FZvgIY6DJfSQPKHOdBh1RyR\nMUSakAt4ZCeu+vZGyE9xwNzty6dnfCqxqm1Ub88hlYvT77abGurh/e4fmTUP\n2kndX4R7WRcOxDOce/GKQKv2FGgfFjCoA3pTKSXs/DjZokcMLUNB0tFGmrFd\nKTU83amhjLWb3pVsvLnO8BtJwTlYPbe50gBF0M5h1LPiu2fN502lggIR3QKA\nJRo0Rwm18Ive28jVZizu2CyU6YKgkbK9TccqWckRMfVzmwZgCBHe9fL5q7Dn\nWNdYVQrmoNyiuaAetuGptuUtYfdZvnWOBfEduoj2/bKtlYaP2KHnfwOvoBcG\n5QRrV9Xl6EfIRZexXlswcxnaYm3y3pgDgh250K5qYYXuR+1Iq1jgto3lqrNU\nzuZp\r\n=Yr6M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/touch-target":"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/segmented-button_11.0.0-canary.63df6e9bf.0_1614281841500_0.7387088893683516","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d7de12f3f4e5dc5e412ed40ef65bc3189654bd01","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.981ad970a.0.tgz","fileCount":55,"integrity":"sha512-SKS8Fo2yYpfN0YjdznYZg7w4pV05dUsd9vs8iZrGQRS9S7gBTiAg+0tpr7gEf9Rg6YslQXiiqxQBGCYAos2KsA==","signatures":[{"sig":"MEQCIEea4EuGshBMkcNasm4pRdbpvc6Brd/Gw6md4Oz6MiU1AiBzHAOIfW0caj2TNJ6lHLYLpDx68VFJoCbizOTxrCDOCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvICRA9TVsSAnZWagAAH0QP/i8scnvBPQhPAvJUyz9Z\nkXdtphyacjXDEWl/XkMHKZe05SxUAx9z6AVdIxLwmhx4c5Ee2KzpeF3jPeXq\nr5aBZN2o+NtmGaZK/YEYgbHjDzjLgnnX935gKhX6Xxnsy7PhxggxUQZuD97T\nL0o3aYbiJqw2EROAF0UUz5/w47vrrpmJ13sc6VVkF49LZnIEGSrRIc18APCo\nn5rcesPmwISSm+QMSl6mSIbyBle/Zksm7IP5HMkIuHuzGJUMUisjP9mZcUCn\nVgWAHFodtnP/qL8nhG1DaSCk6UBtlkZZBwtaB+mULAbEKBb43/e8CLvJOQz1\n9SsqAjjoODogKIoIH4bQO1GA6MGP8ZNXxm8p7muKPlBNv2xre6vYJhVTP/4/\ncQkkWQtR3xi6fcV01BYEoEyHQD8TISXeL9uQ18NnpEciIvxqFNLuCBux7oxs\nAaJnEfJTVadSwRnGzrMwRBRKeFD7Zs/osnWQdCKZamJqlKeXdveQ88/wjYmp\nkIN6yefY8y7rroEsg6HjG62cakIznYJbNEDqLZ2GqiVgiimi9RaHE3NKFnVN\n+rlogpdjRK7Zk+fJfLbDQdmDYT4iyuQDdLnzgh3BbUXq536tWdM6Vkjj9JIb\n/zPv92U96MOPfuMTq6f2tmoJWfA6fBmz1IVCUbvT2EDJ8vj13OO09K6q/j4x\nwGg0\r\n=rCg6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.981ad970a.0_1614298055749_0.0580383652587928","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ab491a23d948d6bec06e658dd0fd4f30da7780d5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":55,"integrity":"sha512-a3HcuXIG3Oi1XqR+mgp7E//NrdYjkeJjSds2S8LUfNnyLXUPtNeA78zzQ76k1N/LiULj+3eYGT63eY0FgbWuRw==","signatures":[{"sig":"MEYCIQC4QXAQd0xmit8JpMee0jzWpe4uQ8owM6jrsOHQ4Kw8XgIhAMO+G36cXJhLyDZaezAJRYlT6q64f8/OPd5gYk65AOeW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBJCRA9TVsSAnZWagAA85kP/2PklsC834M0NM1FmJsB\n4QHBo0xg1W5l76lVoEKrOGMF8/1CHsnK2LId/3Iipze8hUZDFR/tNx4fY3Ft\nZWq/6QTX2p9GT+andek7QmmpxksryShT6mKW1L3MCXsB24d2D4bUUQptBW3d\nUambGvigvd2bVJFTFLC7v6Oi3AxKLK8IUKwBGGFnuTMO5MBLgpEjyqMEzM0q\nGqcDnzzVsJHL1c/go3Yucd6u5pUIPbcGlHMFW67IrlRSpVy6Gt2T5zzx+iQ3\nNRDSyi62msIsz2jgBzT0NtJIKMbEKlzgVUzd0meMg/z3mGXAZDvs8j0S4NL0\nVAGc1Ghzpt8kYLjjuQnfqr412OJxeeozk3tRSj6GmjXW6OTbp6y090pDwhDb\noX6uxdfS60+ORGctYsGFpAkKiChCRpv9PdgxBf94Z5YjEEI39n1eg1t1FsBK\nTMO2bl7En/ZsDGqcWrudByj1NUiZfrE5vcyGc1G/RrIJ57sZe+qpRKef9Rj/\nboxbOACr5yx7hPY8LywC1XrOyEmDE1QzKCJvF55ny2FagXL6KXRFMVS9RFhF\n4dru41NeNseFsD3hrNt5liKKZxyhMZWNaFb3ifJGQb9dKrQrEq5WB6Ji8Wfa\n/DCaz91qYQLG6XiRKqDIEtyu/sUsHeZGZY3bFRE1rIUktk3YaYGWH+I17jO6\nGWyb\r\n=3hoK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f9c9e39d6.0_1614364745050_0.3565353635158197","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/segmented-button","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b8510bd0f2e5b3ded279ed6bf318a4a81dd6e949","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.c97d7d881.0.tgz","fileCount":55,"integrity":"sha512-BwQ0iAkxMnepent+IiLdig4pg2K39yvXHyosPpp5vbtQtOczI1MUrlKjDIjP5iwq1G0QtNVEC9OVmKJoMquFBw==","signatures":[{"sig":"MEYCIQC2Uj5hJdmoLKCQvBbbmOMUbtkEXIoXHUVRpo8EPAyjfQIhAOT0SS4l52xLFFMINN8uo7b2euQGgb8dHUqYyzIgC1iH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVRFCRA9TVsSAnZWagAAD6kQAJCBHdkLMwiKe43DCa3H\nSVlrbxtm495XEuYgFsLi8chiUbH9tnZ/kySXzfBgzwL1hg7T3QWqu8Oe0x6D\nsveOgjcMCPABgjeEaWzF52UN8NeooyAH0qCdGm4A3ZFQTqt0ThiRYsmlKaLE\npCgRBXlh0qKInXcV15YyLl49CtcasomTpeR+JaaLUcQUy9NwJp38QlWQ9dc/\n6ZxzgIZnAqCfFObWuVZ37mCSZz7kO2ecQIwldYXXv9q91s6Zp3zpqbtY8nCR\n7lofwk1pa4ZrpM2DaJql+zcsff0iZCcVyHvY+26VO/OKR6/eZwGl31uXLmUv\ncA+JO2rLzweujKEBkBuPBCpaWCrwo98PaYasm3RXG+ZNNPt9sqVFYYHilIkO\n3i24tevXQlGnlchl/Rnqqkc1AZDlu3+538xGJbAxsuKH4EjL4AdI8Qw46ZnF\nprY9f9KVTsIJXE6RLOQYcqL6b7M4npM8NYmUhF8PGn/aYanxzH0qPWdnhbgV\nkMXptEj+Nu3A7YgMO71ewPF+E91Dzt9BJ98CJEnIftcZuqL+EFGxNURwwi9g\nDKEZGFg72K2PsfYROsVv0cDuEmW9qwV7BuXTyIE6Ym6eqVxIPKpWykCylUnQ\nSN08l7muwCHLp8j75ucNKEoXjBpIFvh79y57jGdCNJBKMi4wfN9uTSISrRf0\niHIj\r\n=3mXw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/touch-target":"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/segmented-button_11.0.0-canary.c97d7d881.0_1614632004631_0.08979600688323242","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/segmented-button","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"335e3c8776ce144c397dfd9d22bf97b752e91405","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.bf670dad7.0.tgz","fileCount":55,"integrity":"sha512-nkK/7KYjUkWUcowm8gLldCQTDvd75uTVdkI2enLOSQ9GKDMrhsJ8XRcxoBleOhnEDC82Tyy3WJ/222zhZJwdiQ==","signatures":[{"sig":"MEUCIDVYqmpiqeP1hajHUO/2+wIUBaE48b/iNgsbLGF+IXZ7AiEApw4dnz9SEF07FPa9VM3f/BsBvCfaFaak+UEf7ja+000=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZ7CRA9TVsSAnZWagAACNMP/j8H98h4MpeSxb5opwwf\nXibVDAczqswCAiZscY5vpukCqSilJrCJqTXjh3e86aX7Kx9vA5Fl8YFGYU09\nJA7y9oyejjCGNOuWF48UCBuSzW0yLiKpARLoRM+fES+mMszwZ73q1dJT8YVq\nk40yPv6EBYBWeq5wxM4n9t+ma1meZ3DMOaQxQLJOICgdMPSbk1du2p55xi2j\nR+KzYfk/WlO+lMuxCo8u2kN2n+NiznFxgN0c3ktp8n6l4YT4T7MQfHv+43vK\nxOdzjABMBPi7jw1Pskim9+h35Wprsp3TZWjN6eiBLi3kwkzo+yStXvtRWVEF\nRPrLO/60ynUahUNJ/XlyPorR4KnoWKSvgHUNLEGmPYQ/5gsdQh8yknYOaw44\nxs2Xxz3NBCRWLseD5V1p/Ei7KuXeKzkS9aHL0CaKl2TqkAEq07P/xvVBGHaH\nqkDSuJvFR8DY8kLxT3NS2DEz6epRgwStq5s1e1sRA1epEasUsJ1uDXgbz89e\nj+1fY6hCOjrm+a7pImymfc/AHBeMd2HrDBPQLxggHK7yvPsNhSRAamtpX7YW\neDSHDhQkWOmwUa2ZML0Xbqi5OosZX0JEkK9rGZRHWi2c2uoeNmrUJpXPawhP\nGuMdVo2F+1Bmc0Jr9++VIsK9BFaSWnJHD+redlaY4239Lh+YIcXOYmrCA7NX\nxSWn\r\n=3kAg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/touch-target":"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/segmented-button_11.0.0-canary.bf670dad7.0_1614730875181_0.7509726243908779","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/segmented-button","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b7f2d3372745f01caf2fd763ebfea798b5e8522b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.c7d98fcde.0.tgz","fileCount":55,"integrity":"sha512-OLI6aBnTbGCfYJjXutlA4RL5/5ljXHW7kSJCuK6Fd6z3S59+SQd669J4FOwJtiuLBWXhvdVlxq//MUyPuTvlcg==","signatures":[{"sig":"MEYCIQCsniGp2WQQg2DixQ4DRBbVYD46jbSez8Yige+DCmF+KgIhAOEwFYsiERGmpfcUL6HnQBFDqzwoRpKyjmUhOg1zQTHZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/JCCRA9TVsSAnZWagAAxMcQAJg/VQSWrWkAK/Dw/E/b\nF+5D8RlJIbbSLjp1/uc3+ksUYpalWf8mSrHUjjtJQ9bEzU98RcSI849CLydF\nSoGf5gqEDz/AAEQ2ZJPZEyLahGrMWZ8SY1RYZM5fUVlUH6b6rJkJr2O+2DMM\nd7QhfkbfsAd2sPUCdKDNrFsv6YVcU0ceDeLyhNulpjEQ4JXLZgOKWRhuup5+\n7ROZO9yS2mjdoTwNKmkRURjVje77X8z71Eur7gTg1nyhR9oGNiXBwDAX9IOh\nJdeVP62rfdAf2AKwq3gQL6iW0oYVBKazfRuXGmBQkTLCkP7sG32ceRQKzTsp\nVF9foQPPvSab/VPSww5Dct/5t/3F+cStdrLJtkd3PJY9X9W1R0uo8tKttlMe\n+nkONaAsMcRKe/EbwaBioNOrUMpukDow86aGqtqLkKj2qFYkSatgVOM6ByT/\ndIn6XBEfSR/Wy8HPNHnamWGRva2lH4MyoiJw470FxV3oorAdP5qDijnWM9RG\n5qWGpqS3PQ7KrF08N5O78Nd1E2dYMUNuPPccdyL/EYHXQ0lUUrNZAS21Af1E\nK//TmzTM/2kDXaAO8qurkI4c2r6psNUCF0ugVvfjhkcNigoj1eN/uhMHZ/YL\n/SVKKXeoYGGM1rfm5LnCar0O9EMGMXP7IxzIZ9Ayfmi9RDFBtkub/Q4t/Ufy\nvi/6\r\n=5Dm4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.23.3","dependencies":{"@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/touch-target":"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/segmented-button_11.0.0-canary.c7d98fcde.0_1614803522243_0.07457493827785333","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"243a8ee1f54cabf50af4337387598ed6afa73d4b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":55,"integrity":"sha512-2MM0FVUGbaA5hFceDra1RdkClq6HTKGiDkDzRnvQ+I9bU80nzVzhwENpWviUmfKV16fhUYqDkY8tA4IunSWsOw==","signatures":[{"sig":"MEYCIQC7JHSfOHyhErvsOoJDPQ7Pn3sWuVe4qWfNhyU0IsTXKQIhAIzxpQF97xrtdYgfOfgjTqm0L0aw4M8pDPRntNQAKIwJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqpCRA9TVsSAnZWagAA448P/RGUSm8YG4k3xgkEdN6a\nC7zGECvJwLDXtQjqd3ZNJVaPyznNdZg6o7P+AW1WRj6jn9QXP0nU1C41PxYJ\na+uspcJQAU/3DwyGNNN+LgipZfVsyPRHaRmC4tBZSKIBdX+wD3nD2waKPGd5\nLyIeKgPdMC2UYVIXGYjkpWLXLB5UjP1CdOmDREvM71KyOv9BtiTSe3RB4zGi\nfxgi7tdR2wSbsN04kuDHx4kmLd8k43cTkZ86Hc3uo5ZsXFhXHBCi1TP32kZM\nfZkhAwz18sFycth04AGdOfPlN7QEoENEnozF7zh3wptLmDq74JFuQXsfZ3NJ\nRW6RzULLYo3JFLOUsDYYN40JKZY84A65zZoZ+sx5g8R3jSvpWI1RRGXcQjZK\nJAKv6ORC9fGPWCffjyGGhuqp8eQaqhCnhA162qS5vzctJO3A/3vnCaZVhzA2\nSZJQMXfqAPQU6IDMC+Mgb2H+wISKPW6kwvWiYPcOttq0qM2rzlynuxssgmKE\nEBoLjgVk+8KBXdZ1e3WaI94gJ4np14TDwiZPZc+MwvfH1BAbsb/3EnMEPmni\nDRtmPUk6PVlXitRCPpc64KH5KNAiUkQbzLy8P9U3VSg0DXxjwzpjA0U2dLtj\nzjZzkJnLQVW60Gn/KQCB/Xe96wVqvimx495NEHXUNNULS0WiauD4FDfsq98e\n0zUW\r\n=/kzO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.4fef8bc1e.0_1614813865009_0.5287911305457467","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/segmented-button","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af473eca31d51fc870050e98750d092e02b67544","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.afae3a3ec.0.tgz","fileCount":55,"integrity":"sha512-PE3dkawgeiVQVj5iXrxB/FgvBWtHPnffx0wfmaa+RXcPQgv0vH1vSN82/KS8MPd6SD5MRTl3H11dliV78kODPw==","signatures":[{"sig":"MEQCIFc/KrkuAy5OvRNq4gVBIKqWo/WMPoFUXEXkQIaZek1IAiADBwJkHIVXA9TqVwdTggHpGFcnFdkV/FahRp5RWLFGKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7hCRA9TVsSAnZWagAA018P/2vS3HMV/kE7ea/ktMwh\nuhDOfhor4WaUY2Ppr/LXkBh7Driy7HnNJW+ufSVuxlv5TiDr+/lp14dl1LpJ\nTRTyih1St240BNi37fjrLYLA5o2t6TG/l8tm7mkz+hDuN47DtQkYNwhhELnn\nGbKly+W4k8EohmWeI3MBqXbfQy4CxVKgS0SQoo8kq+Cxh2yGiYrumJdWlB4a\nTOrGFCQ+8ensCecc9RAig67EuAh/sGOY/ySXEoaWjJu8+Mpg/96XIaZzg6Oe\nA1gtBnFgByWrRFbfgiixuX+W7EoDPXR+d9NWlYMtxblJ8KvEQ3Sn4nbhMK/1\n4UxXvnM4ohAgXjdUIptvn5T26OErmJJFbmP4j1dC7oT0JIb+eqUj/yd93eDg\nucqrh42d7bK/ZKsmJuFv6+AWoH5YOZexDTfd70ZfI1qXRuR3t1cJlcnNHt4n\nuhv0U9vEFMaEQ67wGy9xOfcAOLmoTL/k1PySGr4Gqxp4EX9/JTPoRBME7+pp\ns0NdVyvGebvFWHiz1gEXaDQuXkV22VD/FzG0KrTyYHbVQT4DAX80rpFXhMc1\nikaFIfhyGfoaIIsdu4nFQYy5/q6044roZX68YS+F3DApiMy32VRQcPwzb9va\nLYYcpGJouAKPZaQ5X747bjNnILYFpDavAVi6JXgEW7v5z/nxOX3Gi82u9EPu\n4UWt\r\n=tmHS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/touch-target":"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/segmented-button_11.0.0-canary.afae3a3ec.0_1614814945249_0.7222919064425475","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ba6fb00af3aac44c2d57bed0a921a6c34996e1a7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0a0b10f22.0.tgz","fileCount":55,"integrity":"sha512-h7zTgF4PbYwaga8vbSp5GS8FD5h+hlvrGEnokb1nquCbLylZ4OQX3NHTVo3Zwnde8cI4HOduSmm4pzaO9Z11yQ==","signatures":[{"sig":"MEUCIQC3jf2p2yw68vUgZ5ChcQX4WPeKXR66R1upFQGK53jeWQIgCfMh58BNarOLeExawFop7ufbtgFJSGWn5q0zFtnQjjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNLCRA9TVsSAnZWagAARfwQAJK5Jq2zXk0eDu9rqpGp\ncVIhxneqmNy/D21VTpZ99TaLfjUkv3B0/T5KtAIaAT4zlcfNCm6J1GMy9uX5\nM2ZymqYmuPxidW0Jz5tjfvtkZruo3wMt2bHF7I6jIsKng3gRQQULKpvq+vyQ\nV1LErgyeaZLRPHXyAdw6P5gRM3MyB1aOPUEC5RtcTvJrco/MV7/DtetqFY4D\nV8+xIxMxvrcvdBasnR05JTPD9hazExIHcabvzJXqO598ddwwSOO4IG70cWKU\nR8kQgmVmX/R68N6DLK6ir67uDgyqMUuTU75uQrR4T6ufnlMmVqqOLbaVm/Ea\n6I1meEzsPrYQuhczmY8JbzlvgMekxH+bhCURWUHA+98ET9RBDkIUsvsIxr6k\nfcTmB6cdXrH8d/Qa/a9/gOkgHgPLlaIT+MbJXxVfuPf52xxX7lX1ufNv7dUA\njiq1XcIm4/Pnz7FsoJ8x9rf15zGfklm5/TuuPyu1ajKHYnozRGqhpyUFRCQ+\nnQ1vOKn6+f5WtJhBq0T6TTE7Q7BdKrvotI1LDjJwwVCxin2KziAVU5bSjWHR\n8zVBAb1NaT3z+MwEkPpYiMuPMuKBkG4I6u6NfOI89gxDLGqjJo/bwQS8xA02\nR7e0HeOVVWX9SawH+b9xkVqmXS9isWFwDriMVLfi92/7qy88tDTEcP+OiK0y\nJbg4\r\n=0slJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0a0b10f22.0_1614816074992_0.6674073015490722","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2c5859c08e7448d8edbfb951dcb02a7b1def392","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.6f678a91a.0.tgz","fileCount":55,"integrity":"sha512-HZ2ZAkntqY1oEukgmGTLP2K4ib91UoAJpyGzzatbk81dj6PSlKwx7kpS69IkHd+HK+mP1yZMZLBt3gj5oiPrmw==","signatures":[{"sig":"MEUCIHvLiKwg6xJhL8FDMENuSSfHZorl/BzSRP8GU1dC9UuAAiEA6k6s5Jw0yqYauTaVAn12KhZ5rfl1Li83475OIe3W11k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmQCRA9TVsSAnZWagAAOdIP/3eumxPecH51CbZZTWMN\nCcHNxDFBqjQyzV2E3d442Qjk6aTVJCAHZ8gCijH4KMXgNcLI1G+FxV6jCd64\n7xssQEuPFad5U+PZ/BCQqHrGrVi8LXS+EttJk4nAiQUKCIHVlL2M4c+GwuCz\no5VdPm0cHe3UE4d+1J5kbT62Ejn6GALP+8OMFg2Q7mvmgFW3ZlgzzI3UTyvu\njKSyNS9+ZAM74J/ZAi10N4BVpN5OS5HZdHQYE5yiUFFMl60Jh+BRYqoyXECq\nbwmuirmKf7D5jByqhKv3Niwp9oR7mdZqcjlhP48qBY6wYWJz2Swk3EjpstGB\n+YiBMXkiaC7eFuFkKh37fKlGwdv0C1uHuXVB2G0lu0iqtWkyD6s4WlcGRpoV\n3VjZqz64+z95tOfR+1ouuCnjth3r7RDGmM4VpxM2LlEyqWiGsXqtMC3RpT5q\nUDoE1/Rla55iWHPw+ORQSgVZwubTedHzrioeNz9i/DcdQhZoNebWHgm/S8Up\ni70IHhQdpGhUTgW1iiU0VpwnXHIp2qJYiiDauROJ8oD8t5ObBm5s/l2PZ0yV\npYuqUXmzppcVN472m9KA+UQ8z1zTIBqj0zt/hcmaZHlIBZi6UyLnv97UmVkH\nGFty5q03UHKqmjXeESRXnVkFERiOqsMa+9llnExYlpRAlZKb9XO0AA09xWBn\nJCJg\r\n=95zj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.6f678a91a.0_1614883215344_0.23134855004730914","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0ff5ca0d6c5bb6dccfc4ca3e83aa6a6a65730815","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f5f1b613c.0.tgz","fileCount":55,"integrity":"sha512-ELzsnY2mTopYL2O0zbYOfFsN3t591x3ChaCyN/5bWiyOb5+tpD8JBk1lhsuTLf+7UFJ1ZHtDwIwtj989R9Cw2A==","signatures":[{"sig":"MEUCIQDPg0uJsKvxQfCO2Xz/s1brKauu+POP6YpetrpABMMo5AIgP7+q5GmwMc5sjpGfqbfxN2qiwU9wyrYUvEQFVgZhdY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfqCRA9TVsSAnZWagAAErgP+gITs8LH7698NAvBnFka\nHv52WZ9kj382d9mKmcNwyDfv94tEjw5shhhp0faiwFwoePlTxZlJeh3t/Jyp\nCou1n4FuRzCcQBoa4lY7EHgg8rAQZYW42o7Tj678JLdzFMJ4RUc7SLo8/+4V\n3r9Fp8qgLknpkE0q5NX5omT44JguYLFF+0whhe3NsPPG1Zw0uCU1AXV2Ctl3\nRqV8hZdtTSGvpqRLZyCKeMaqd6/jTkrsBYTQ/02QZCo38W1ZXXEekfqVwVFE\nCkTq37OJWAQhIR+RJsdk3u8UcdlZhqds8VBGjUnqT478goEs3pIigVARp2Qm\n3RnCPC6huE/hrAqwnlnlCGbnmKtOijWp+vAnnyz20glXNmV49K2Afsn1nZHH\nf6vyhxP3eI7+fRkwqMuHUg/qAqGx5yNvtGn37zwCYG5Yp8E5Nj0RXF0WN6i5\nIo0zq2c3EJA4HSEaR+kz5HerP2EHCzwSMTkZmlBhqWXaStbgze3Be/Odv6uD\nMWu89lIFfJM4yG0lqP/I3aHnP1BE9PF5wRVNGQKLVAPbWXihfs9crg/cGTrP\nLkau5Yb7q2Vv+GurWxVqlmehboawy/mRBDcJC6Sa2WmmMyxmqQsS+/j6xWaE\nUwxN3UtJjJ/Hss1kYPcd5iDYdZyeJHTzqpN1Myk6w0gnv5Vl4PTnEdWkfGrT\nu3qG\r\n=NXT3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f5f1b613c.0_1614890985127_0.9605964655947459","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/segmented-button","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b375f8f12e62408f4fa90b5c2f7b6df3480b0e69","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.606e767ef.0.tgz","fileCount":55,"integrity":"sha512-PjmOJvYRfJQQ57lrc8ebhlATqd56jxQhQu3+KN9LJ6aBtMUbUadvrz0edB4Ws446SMz1FqLvP6mjE8jmO/M+Eg==","signatures":[{"sig":"MEYCIQD6W1K4C68r4BRSlLTnqjxPZMfYMM662gEKEg5QAqK4FgIhANa8zy2Hec2lkcnnziWMzWiRWlbI002NETCFMTspYySh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUOCRA9TVsSAnZWagAAzAsQAIZ5EEYQbsT6uCyUSj+E\ne8RnfHASmHbBCfRtzvuLiXL/b96RoIYajfgjLxZJKwy0MRdmzbMf/moD2Dfs\nk1cnS3IQBZHFpzam/A7HgXqcQWA9NvYplQIx4B5+lad7QK7lSAtUsFZ3Ghyb\nhPZQdKc3ljhbTPiA8EoQ5Kw3N6sob16mNtTAuAwTQOGDGe5FIBUWQBKxisQg\nNqYdwxroj6CmO+nZim2mlFKB4wD7TuUUXNOBUY+x7RxgXZO0n40mjTwcvB4L\nRnoZzUmAA14psSBzq22snKDPkPrUs/M61gEsoa8LVHe2BizzswjaChcl4ObW\nO/ZpzGJqoRKHv8adZpRFuUh3H7v1V65puQBxNXwciPb7o7PKZAW1T0BqAqMg\nDpBHT0Yxagu7bMMfB6gqiU+J1rYfJwX9Qd+V1K/DWBVOEm008L03Ia8+w+BF\nthNqmPmdnty7840jW/ZDdfyA8OPCB35ea5pjL0HuafJfvaQx5T5mSHVAqVYQ\njCX8FJGjZYmFIWn0mMuLCgfGgN677rvkn7Bmh/pYolDGL0IIBecGFSVgLCIj\noa28LQCHWJv9daImtz0D5RGT2pqT3woooB6NjbqxrHPtS4C7NCmyC1gVx65J\nmJSY3GL/aOj/foXY7KQI23ASJKTO2Z6MwXNrdfrsQBWj63ipkYWzcbu3HN9L\nYDwc\r\n=acuy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/touch-target":"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/segmented-button_11.0.0-canary.606e767ef.0_1614894349537_0.8755908461217177","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"59767afd53e49e8baa76c1b2092a63b464dd07ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":55,"integrity":"sha512-uIgWOK+F7vy/pb52DIqqq0lmnLKjLlRH5i8v2VEPmzeYU38wee1HE/YZh/cHXxikBmeMSrmE2b1iulT3tNES+Q==","signatures":[{"sig":"MEQCIDnwl25RRsPvHCgb/IX8ArFqnqiz4YpD7Jfoa0frGFDCAiB7zt0KAS+chxkGo5YJvSW+UyGwh4acjMXPq7FEv9v8SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwenCRA9TVsSAnZWagAAwpAP/2wf8LAWD4OffE7nu02C\nDaGp2AikbIy8geyIx1exJXdHkt0Vnfr0UyVEXxLDNei9EtCA1rJcYL+yo7Wm\nfrc/FN67uUAtO594/Azc9ILLEiMOopvuiNYM1LNutGieglFakN9szlxlsP8z\nBmSmLUrVlOnn2hIAZxKjlChA3SBpKROdZauv+P0WCTB3wPfQo8SnTkc/DqT8\n9rUP9DSA+d4o+UNudRgzYQgNHnNhlfOzoUUwgARSF5QhXQjHqoS6mIRFUd6Z\nSHMZG2wCcvGkDys8Lyri4WqsdhdEFknSkbIt4BwegyGAbNSCws+i12h0j85v\nU4+Gdg6Ylmy5dJmXqfmxdseWNlo91tAWn0mDocsnd+VhgwCg6o8dVknfvzdh\nqWQPtl40BeQN8wcqZ9wXTe95AGtZVGsWW8YPVZcmeyiWdZfsi4pBygpMryM7\nJMxvPZvxE0x8lXfF73rEGdaJ4rq7Xy4m/P8Yjdto7Y3HsuRNh01B4cKfewA7\ng0tfejDRIa+uPW0undYKFyeJhUWrsE2P0YcA/4VjWKYNtMPaoeBMaULWYyHI\nISJrh/wF0k/2xH1IbFsmBcEzm6o1FP3/UT+hHTNq8M/qZlsq80h3GO/IierQ\noTClB8HknWK85ohhzrioYPEzjzLJOq9AQn5vYsnhK8kZjbBt4i7NAfGjIGt3\nXqGh\r\n=9veJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f77a4dd1a.0_1615005606992_0.21826598766137395","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/segmented-button","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2e00ad1ab636e91fdcf3e44016c65db49bb73a52","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":55,"integrity":"sha512-gZoY1x+wryqNeOCt5fAtT66s+f0I06AOgLYvjqFokPvHtOQBwvpiyC+em5jaAVUa+9y3UvpiA6+PviMywFkHew==","signatures":[{"sig":"MEUCIAfuYwwjGNZP6tkPnvL7/orU1GAhH+ksV1A7Db41elAYAiEAy0Lw63tIP5c+Okb3I7JvyrwaclTRYlj+DTIBXIaDRLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjGCRA9TVsSAnZWagAAHUYQAJRunUJDcPJQ7mb1wGlU\ne6eMeKKVqGanVwPXpzYE1FFDPyr43NllBfq7P28SsLSl8cJdn68/kwsyKT4Q\nOHkOPT5vM1yhF9Ym9slF41FJ6M+mk5DpWB4WFZQGZm9rGZEM+hbVNGLQ4IVr\ndjZ/mPsv1ejuMOnJwx6YFTldQ9xzIcPPQx9F3qOgprctQGHiV0tuyqep0WID\nvvvFf4WiPqC1sPVAkmbGAx5IvOM8Rrog48rBpTfj99pOHAQ7pN5uzZanrWx0\nIUdvC1+CNCvCEv/JTBw9NsrOnSKQaXHWFCpb5AO5RJEIkwMwZw6zhS3Qpgte\nC9p3QNnuGkdhQqIk+hlzDtrWMsyzssm060EoFgtj9pW0LbXDjH5FLn0/rVKF\nB9hutUqige7SYjmcl+3PCiTw2V2E7AFhXX+miG9cJOo2msqirWhjvV8z387Y\ngz6XAgN6HWvDqVnQvd6LOgodjnNwjfs1PRupAltn0KZHghV2f7BXBGcj9Drq\ntDtlD0bfXo0vhQjsNb5vqOBiVZfHJTUbRvKH9B7hPzqx2u4DbxOYNlN0X+oy\nFC6KT1T2I3zPUChgqe8SrOmWxAgkWbuaw93yalBxIBHHuWlLH543jC3VRbdo\nOwB2WKBgqcj5ILSJZG57sdhiY/Ji13lMCqbB19JhoFTRgGTZNVoRywBn2j6L\ncqoK\r\n=zfl/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/touch-target":"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/segmented-button_11.0.0-canary.2d6ba2c23.0_1615243461672_0.2524975683217823","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/segmented-button","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"299e34b453b72af143c2773e78ec7f294452a4e8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.7522dcaca.0.tgz","fileCount":55,"integrity":"sha512-iq5LIKDcO/kqr2eTQi3/mIHKJrrJMgV+zEUWE2Cm+gbRb0s8KSLTwYqLJ7ilwmM/7t2Lm57eql2Q23gz93mzfQ==","signatures":[{"sig":"MEQCIE7h/vnGrQvmlgrgUjWClNJQekVbcx2LE3e2hvjIa/4XAiAddf0XqNvEFR47CQyg9Jifqq5xdSheCYbeMm/9cwKu5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsD/CRA9TVsSAnZWagAA+nEQAKNejpkqh9Fx2cNuFOv+\nASwy2wa7jI30ntbs3z7mfVqd1yxa1mxhl1+AoVi3TPuVxDUxaKtUpbjCzBDN\n3CfaH+kA7JGwe/7Bj+227TGKmUSge9zQB1ndwXfj/T0KyNir658glHK41ekb\ndyeYekc26yVlrV8e8mDE7rgcrgbo8tnaYC0APm+qb4vUJ3gOmnOsMmf/wl06\nRnuv4P6c/IsYGBpwRpgYLLGTR6mzW7jH2NbbM/tTa4OM/PpUCe1M5K0vdw9E\nqmjvjAKNU0pD7BFPLid3bfhrJhK7B0xxZQ+PXPv0Di8aiXesMZsRJMP3nm9V\ntWR2bpWzBIixPUntRn63UOi2XYDNFcxrCllkJJ5K6921/6fe3wFLfwtkNdaK\nZhMY5gFZsI7RaUTFudxw8aQqjJunDJ6bYFPi08qUOl933MsJB5+6qYHz/jj6\nHDqupfMk4C44G9oEdG/SIZpFXuGIOAoM5JJQ/k84a3KS6SmzSztAx9lLA8Nk\n5UHRjwgcj7D6ek/kPUZXicBElRLAdAJVGRkWOQfzs73ilzom+1KihIK9fAyG\n5jwezshyPi34EuOfSgoKVkdyksN6N2q2Z7CG+veak5LxOdwIH1VUAkOcuWXJ\nTUyhESeHdQdh5glV1NTDRWmhEFWfJkcARa/hy5Bc8aSbSQVZR3W7kNL0UirI\nx10L\r\n=rPI0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/touch-target":"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/segmented-button_11.0.0-canary.7522dcaca.0_1615249662542_0.422263571818547","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/segmented-button","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2badb65ceccafccab73d00255d8ddf0255a183b0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.5c0ab7401.0.tgz","fileCount":55,"integrity":"sha512-lvXWvu8NgED+mP4tHlYtSNwyvE98s8ArOiEiSor7Fv0ORWfr6l/HR1cPhSjiBRNcd2MxjPVXPB2197XMkB1vxg==","signatures":[{"sig":"MEUCIGCqUR+I9WkY87z/kz98TpL/PI/Sjd39L3aTVJflLt/5AiEAuOrfZPqNkNoZZ3BiI+su3iD0mpvHO5i9bYR6xeE8dAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wzCRA9TVsSAnZWagAAp/0P/R0eVSe/2a/1ofRIVR1j\nTaZQ5mgKLymKfhajZ8a5zKE4jRkTXc5CtQL5BZ3/3t7or7a+mm4Czf92kwjO\ns3jcuJNYM4+W8H3vBgv2W8RXQAmi2Wr7eqPSe7s0NQFWsJAHAscBwKCR3VsL\nvZi2dRwNSkJdH1E8dlcdtO+uyDXvKh9/pSJ4jhbrJDn+NS68ez6Z3pkd+U8i\ntqEl0WRxzvEY5+z3x0H3o1G9CKkLDEUVunbpZc+ExWtr53GZYJDHdT6rt1IR\n3+WwMVlj6IG4RTX8L1YOjhFcq8jvkNS/pUBX0o+82bMot3xtBDrM2JcFR5Bp\nWDm2pktQE7qgN88k11mSaUw7zSrI2wH6Xuh4gQ5Db0j8IZfDiRZZnAAfx53T\nGDOyq/I0lHNv891hbyB0LVQz8FUG/ArtlbfVQwGXWKG8ooIElhxai4FafF8v\n3MJ3jGgXj+9ej7Zv79CqAnlKtXKAxt47Vl+lB4awT+8bybieS+6KGMwAN22M\nBnawXN8o7ZSGGXCust6f4KUqdBRHd4P8nMZW6DoAgA+cFbd6LYZ9eEQooRP1\nVoN1vBbgqqZGwadEwXlWWdUsf2crvWrVmc0DSio8zV9pI5XmaTTLnIjvw5bn\nO/HtZmEJUXgPQWRWJiWZ8aYXk6j6bmbXRY3SCRzJoI35xLm1BS8X+ud2AeVH\ndjtf\r\n=//Jn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/touch-target":"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/segmented-button_11.0.0-canary.5c0ab7401.0_1615330355243_0.8298786703415328","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/segmented-button","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1704d72515cf61f602d38b0ce93d337a24386c38","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.59010b6dc.0.tgz","fileCount":55,"integrity":"sha512-jpXCpGj2L2Yk6zYVJEVjVC/T9JrKe5P5gXUy9kkGAuU3QUv5p17vDuU8dhsr0eGCWaPu/+C64Va1wWkNWrSKOw==","signatures":[{"sig":"MEUCIBf/HgwCuxqJFkpL0Ie603Wv6kc8CKokIh2Snon+W8bEAiEAnOmHy/GzlYkZJkD0eohIFL31/zeYBSXXZqVyaNHMFnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPp3CRA9TVsSAnZWagAAIRYP/1P0d8VuE2wiVj6wC+6f\nmpF/ILpQ54I2lKpEFkKGrNSI2EF2c4Qbr0k/8Sm2oEBE5CbPg8+elpu7Y/gF\nDlHejT1l029II0eWxSdztWEObyN2FxBapfBS6w/7ZINnIu6kPPHu4ZzDCoV5\nhzCHI0ecndXtat9NE/WUH9BucNaiGm4JIdp8tQUs5lRv3+Prpy93tkaOJ4k5\nml64HiPMQspQ9dsMKdDseKcu6k82MF4mBxf5Ofpwfoa+dfwj7Eqhgd7iafxO\nNMRBQoHwvmDa4c7J8ZrVW5EcM1QTIvK7i/Vr/ajJE+ammLENbZjW4qO0YFGp\n1bGrGURKtnOiNRV+twAGXd2vWe9/h/+bCtD23/oQAYmsBgO82F5a2kvt24Pp\nkAAXhIxfSdjX47WYHSnuwj5fKqMlGC5EWuAa6IGNioBp4+yYWypzjOqBFGJy\n3RN1UUNoZBoo4+f8z+wiPDmv4+1xUuKxx4wyzR4NRuLuRef+9pU6zaLy/wt1\nSZ2edawSSipLRM14EJavMu8cMBKZhQqd8+AbYEBJMkFMzkwvGh+CEguqGkf0\nO0CnB7pUWV0yu/0RmzBFz+YSPd2Ye1opDJzQfkAGXUcABxr4BVKdwWkK3oNe\nRB+ISyu+mAuBgzmegMVsxAQwLh3Tl0kCKRq8gK9wof/68rcNlWCMc4F49/Qv\nmlx3\r\n=PvGj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/touch-target":"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/segmented-button_11.0.0-canary.59010b6dc.0_1615395447331_0.6185312132189902","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/segmented-button","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d3307dd5052f3bd97384259facd89c5aa50aee0c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.9e52f5544.0.tgz","fileCount":55,"integrity":"sha512-jL3j27eruFfDcoXoxsZjj/26sIYrfJITbdt+ZQnZE9JIe5IR5hzTauxvJucrYIYQ/o2VoHxzN7wI/teGjNOu8Q==","signatures":[{"sig":"MEUCIHzzJ0YrniiO9okXYDpGhSrVi968l9od18Vitv0oUWSIAiEAklMJt3uiZ3tnxiFha2vHTQ/VW6fO0smPvyfPDTrdP0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVTCRA9TVsSAnZWagAAJFIP/3/WTdYSpe9VINaL+UXv\n8QZ8kFKQA1zbvwZ4EcToDumr7NtWOn05fkNinJ7xkr+2SbZ/w4RCJpx/06/a\nPTQZ16x/tYMhHgxmSNWoV59EPqrAclbzSc1+ViDk6Izo3BdpaLmGqGc1tcVz\nOyNHgYIizmbyEGVia5otmQsrwZ7lT4We1O0gMynAPCRqxGq41XB0Uuod3PxT\nVY5/6OcMd7rhiTVGv+qXVkjK0cfSEZrkn+XZNHunjyGpBOjZvkHnCY53jaP+\nxqmBq+RWEHvTkfwWHuoV4SX3CPVC/xnBRL+h+6os+s8LIxU0CgQCpW8/AdKS\nvwkMvimrzbfDjExGR4MY61jZFhbQErMIUVuCrYsKetq80++Ret/jYHJBlwK9\nhvpCFNxOa1KIBkSsSCYIdd6OPsm60/At5pxbQW+5Fg6vn4WVi/er00m7QWt1\nAhSCqHR6yKTSw3Xl3WLuv+IEKaGaDpkxHnyWpSrBI9LylQIr/jFqBp7kWgCj\nRbpT0wKHDiP5man61WRJdxk750IbS0ewMAVOQ2mvGik3NBP/az94qSNki8xF\nUd6XNtcYbyR14EldYUT7fWCHdppkU+GbnahXfqrQs5FMuPQMJuB+fi+pdGrE\nrifJBGsjbSoe2reD9bhzZfUJFQEDgpdYSioZLS4L3+H1WT5nLvI+GVL3EGJ7\nwFm4\r\n=WXkT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/touch-target":"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/segmented-button_11.0.0-canary.9e52f5544.0_1615418707356_0.372233198208477","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/segmented-button","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4555bee6b22f2a191f6c65516ba73f1023ce8115","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.a678806f5.0.tgz","fileCount":55,"integrity":"sha512-0IbM6QUl9Qmp0A+iufZms3de8lqfT2Vb/R/wpO9mMvGlclrVh+6jkYZ5sd2i/8yq9vQDZt58Qy0cPmQr/TXGPw==","signatures":[{"sig":"MEYCIQCCH5FkJG/4YhHnxvGnqrXHnXKsX0YN2t56qrXFThG/cQIhAJMh8mJs2JsIRGCPVgjVxYYiNO8P2OOCAg0HrPIzEshj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdOCRA9TVsSAnZWagAAs4sP/jrBmMZYyt/wvuKedI1e\n2487lA31tQJ7NItAIB43hgHU7+ITYm6iYauTBY8tvngvC4QIiZcpAvAILwEz\noTGkmLijaMuO4K2j4w0uJSIS4jVmCQL19INmclXo/hQwRd8cong9RDjOixIN\nSn+aihpAstAQwrI9NDJSuVk8URLQ9l5IcvdYlgaYgUvG4sy9INojLqzq90bQ\ndPTx/4lkp/meaAVHp+ucoFDVnQHSkXPudRyaajUQchh0UeN9H6WxVm9vVkL+\nMV+p08wsqw9fJXh01vn0/Kv1N9qk2FEMOJ/mbDWtYChQnbas77FKte/fEZje\n1HcPGlttppel/nc+ranmCWZW0mFnHpr9iQ59PJGDpKQraEc79gABVb/RH0Zs\nj2Vko7uzwr6jFE3M2SMPJxTLgGxv4VR99vdXeXPh06cINrAV6dkmh98RoI0x\ndVDBVwOmx2szu28VhtHVso1m0PhZl4RiSAkbMXhHeKzwt0MXz0udkssVAHeU\nftJSvqnbVkiw8EOlqcrB4bLIWVBW1URZqyjAqeYrWIJjmnzcenLVe/uPgOqo\nLnhyct/m+XJZl37+Z1zrwVL5V4wa9gec2eNThx2W9If1cWAUe4M02C8F3DIE\noZsVTzgtR10DXT4iJFV+7V0VZm0GzePSj44EOoQM/OmvpkP2xFlnedqTiS9V\nEBXZ\r\n=+1hU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/touch-target":"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/segmented-button_11.0.0-canary.a678806f5.0_1615427405545_0.7640649227637859","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"599b39fd3810f50a00cdb1aeea37bffabcf00cda","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.b2d22df5b.0.tgz","fileCount":55,"integrity":"sha512-X9svKEhwjICQg4O4qYMg11W2uyTzc/HUCk5AVWmxYvJTQhbTcA2mSkStpMnKP0SB/vvEoMtvlyuGrrkLhmhNzg==","signatures":[{"sig":"MEQCIHqlQL+bwVmr+9qiwJ4qAkR8Nc8rB94f6aW6wMTqkbgSAiAYysjHNE4VgUjhDyHWVhFbV0HPL/yoX8uz9rJxqUvlgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk1BCRA9TVsSAnZWagAAbPoP/3CtR/O1qaZxrnxpcZI3\nO+UoQPtR54beybbjOqXn1m80kGe1D5PakSlnZNYVeRrzSl8tzCPd4iYN6jaB\nzfHD3M0Kq8ko1KeJLjdblYbqPKKk0YrnwbWmFLxiw33N+3a5vd0I1WlyfCTV\nvQwEiCw1VxFoH5MaZns2TOsdFeqoWsHFTJGspc0kcMMqo9CL8edvIj49wLlK\nGfO+Zvy6OR5/9KNU0DieQj0RfHfVxmRNQwxXPEVgJ+gaKVGpOHnplqOZrZsA\n6zD9nrf0b/iAMe4rsGvZ+Bp8EXKy/gjjomcINHKG9CZ4Khg1QtEKEP1gB0G/\n6pqxoh607yMsji6LOaHp506lP/+OozEhHTXEbT/sx98oMap0zqPUefoWp7rW\n4A22Rk0JQhtkHouCzZ1cB7k40IU79XfzOc8r55/aRZRRduUtUlWnbykGnvIm\n63qy50f2lIJKH0uXtmfDlxo56PukETs74FsHVlpItDcFE64MswhxlwpJqd11\nW6SPIiqSL9FRYRJHz7ZdqLylBKWfaO7YXDMP4wRGzHJ4dqIQ8PPKIVn8Ix3a\n/HRqa8cnh+sUWVfjyJ0yHvTb+dQIAth1NT1lVQCUdy8mvQ6nRaDOEl7iZg+1\n3hXZdMkCI1sbLVAuF0jqzFQK+JjQH+zn06VmtOictGDpHSyjYZ2chkYnZc37\nxHGA\r\n=Ryfu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.b2d22df5b.0_1615482176646_0.9496192301123512","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/segmented-button","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da5e78c1cd67fa535d240536f828e10f1ad41b02","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.81911b707.0.tgz","fileCount":55,"integrity":"sha512-yImWu17nAUKJ7rXHtbkqpoO8PuYzeMc+ChZaBmJMXH2kwS+h5J2lhoPXijSqPw1Byz9NAe86t9n7tq9ryqrvxA==","signatures":[{"sig":"MEYCIQCur3wVneEHStpKo5hTZj3lEAQ0mxKkMFMBVOUQTc6XVQIhAPXIj+6edMjWfhjkxDvlU0dyF9OOCvxSYZ7Jr8SKuRWV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAgCRA9TVsSAnZWagAAcLsP/j40bQ6LS1KXYl11aIwG\n9sMUeW+0iNJHMG9ZtUmBnV/EPChge7kp/jighhHanpbjpW0Y4ixIyDam5Y2G\nThttOq2t/gcd9yy+1WUMuirdLXELfC8Ncgn836SqOd7fjRoG6/56RY7w8yp7\nsF7JH6BnbNsXytX2E97xE4hX1an3509MUX3tkQ3WV9EzdicvkcD/2RVlcre/\nyGJFy6B7Asxbg4fF9eZ7GeBx/FBfGPkt86tZGquLDjiBgxSVqji+qazuW2JD\nvGGepD30JroJnu7tkwD/9phssyXFRffjBwetBLjnuqkIcZNPxhpQTe5QqOgP\ny+CYMqcLxI0TI+cMR60vDIEWTXx8RMDRRkLAC/svESGYs7aMzSDsg6icYDAA\nK91oBmVBfDXwgRiO0F6LVTS/MnbKguOt0f6sTzCRFLU6WzvfFiad0v3iBiDv\nuFqQ1D+OHdMmen8dabpJ7+EmqlUmEjunFj+4IRNoZVZRDW+KKgcY/cM4OK46\nDnhAUxnDv8drx9uYxJ1VFln57LLa9j8k62TLFnNNeY89PmAum+Q+PTHFGLxv\nvnceu2cDNr/tDG8Ha1ir+z4xwj4vrvQ7mZKtOuPmaJYoCKLp8F/m6jCAfJVQ\npWepz4ri/Cm64jfeBlcymguUSfsXvdTbLAqbI9wJB/w+CMvTGeXpGkjPX19Z\nb/Fp\r\n=B4Fv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/touch-target":"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/segmented-button_11.0.0-canary.81911b707.0_1615487008425_0.7148135887226768","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/segmented-button","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"09aa8c903cb64c8304ec8f1216b453c2c691ccfe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.9eeb35c38.0.tgz","fileCount":55,"integrity":"sha512-VRkDksfFdivfolS25+AFjGsP6Q7X7F4WFZFJJmEGPivQSQYtn0W7S7edVG4ay5wFEZp0V2d4jgZS4C3K7wk3Fw==","signatures":[{"sig":"MEUCIQDiQhX6OA7VmDqysfZhyKQgxT6ZrHx//gVfp+7LSA4i1QIgDR3kfx4WCTf0T6DTSRfNHnXgVZh4ZHIlyhpSrwKdsBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFfCRA9TVsSAnZWagAAHZAP/1M23y00zXQLycCsyO87\nkHuAYHzcQmy6IDSwdTPNmhtawgI7ZkAkz+WnatSFIe1dATfhRfW8IKfsnYMQ\nD0MeKeJus1VQIWrS4bXNChZeZTCb+WVm/CD5ppmWNQ2q3GkvrN/wFFodvAug\n/eEoXurYgLddomu0aOsEvYB8NR0qsUPgYNMeanoBu3kI2jmb3uEhJ5gpnXM+\n/qYTrTxwo4rarsiDGO9ctBhFiamHvJMX4Rko9jk6tvGVhP26ptGEz8+4tk+l\nn41U3Y8XvETS9AKxJR07cS68qn+axv1RFR6S591H2LHcsnMlAnw6XI8vq+dd\nHpLxDtVH9FVGDwJ5CWgTDigtBQcNGRHYDxp1j2JJJX1/YfrCTkRTnY/OI47I\n8nkns1Ytsf6lYW6mzcUsHBWo/KGyd1MPQ8Yxca7hP457UtV59LokyBPh/Ypz\ntapdidZyi+A8w2tesYeBNyWR8FxOEa7ZusISPStxreE5v42tSKWHT/cB95WA\nBnPsetjujCxzpJ5HETAlKa7yr05N7Ua6qgVYoKbK4EdDtnTpi5wvGDg6nB2G\nk7shj3NGmdTGpiKmiIUIaO4ALKYjWeCfjBT8SHHQXmnJ7gGDeNjgH0IX4DSG\np22Ygyqq3Stu5ZsxdHf6lnBMzBUpaB3XlKT8NlOmqZkvM1eHCQ5+oXmunIde\n5Lak\r\n=0DJs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/touch-target":"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/segmented-button_11.0.0-canary.9eeb35c38.0_1615491423283_0.9094692751894735","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"abb05af5027a4c91d6edaa795e0b0e98cec6e5fa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.12be3e95a.0.tgz","fileCount":55,"integrity":"sha512-jDmyShr8rq20tnJLUJZMn8yHsv/ePBS9n7u0XOMrPlqcJYsXOipNFvFIkU9DX21eH/5bQyBiISKfb8POXOg/rA==","signatures":[{"sig":"MEUCIGDBl0w12nxfcHs6PKmQTKWcm1w9oMPu75B6C42i2Dc5AiEAy9btgNMTg0zNNqyKjaGlF9EvpH/hitj0V4B2fE0aADE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnchCRA9TVsSAnZWagAAxhIP/jr7o/Qsr08BS6evB/EW\n+Ez/CUhKSNU0y4IXLesbr6Z+f2bF2FACy9GMaKOhFC8/Zq9CBEJYYj+Lz3fT\nZjMF797HGVf59veM2LFoIkRY+hX7BJ4QP6fJ7KwD1FZk+dwKIabU2L5b2vAE\nXp8xnXO7t93Uu0YiA2tfIQa2G2T3u6i5SAMgNPnsSEwSvTFmCMchfjqqwf4d\ntkh9q7ls4l2stN417NjQmym6He9PZv0ViDPrcjhWMu3ptrVxUugURC9Ib0QL\nIEIbI5m3nq7tPp+uc7rxqkjRzqs0GmaDtr8ZGWjbapHr/l9RJQCn4eMsnCLl\nDWpqKTthVhFGwuWqH7m3lmc2rPLADgB8gs29lgdE5mzCyNYLva/cYrdStnv8\nuPwucB57XaZ09d1lFK69boYNOvkqOeVNFZVc9ptx+gp5tRkEzevRKfLXedv0\ngtcW3Tbm8KAEdB/IadHouc3BWGflyfTPozK17mYJFAEFEUHPpwMq22gf+yFC\ndZmAkooBJ5sxjFz6zSpmUeBrUuwrLkQ1/QKAzZDceB+UcccsGIzpSkpJUpZs\ni9VUB6TihpY3I0DaeGjj8mbAny+Vh4O4qKpUeqwr4odymF/OHHrS0hxJw8UZ\nsgppqKlMEvyMFzn2nOYXizO3h67xyUcY0KHXsALZ7vQ5+O1Kdu6KyZnMluc2\nIcVH\r\n=qW/z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.12be3e95a.0_1615492897034_0.6141411753420007","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bc8a23f245646cfae3d669d1b765504386ed80fb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.e683bdf4a.0.tgz","fileCount":55,"integrity":"sha512-py9EUt65OMDAc6VnmLCtdSU8rF5+w5wCzKhQCCDqiJEs1X42ay5qFSR46wkYZWAecTqhkSJJ9F4Lt8WOsmeN1w==","signatures":[{"sig":"MEUCIF9ghIiMsOZjdNzUiJ4ZVCCmumpZNr9fNjIEXIA5uetxAiEAwM5koE2WqfjRLF4XEF1spUNzsRPoqpVm0uAj6IyLHZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjXCRA9TVsSAnZWagAATZcP/002C5ZkR3IvYxROn/ZH\nH0CESHvxDypWErH4n8KeKavoAhh0lQ56FUnxhS8+QJevkEPoGIaYQzYs7rf9\nt3s2Ewo7BaXECYDrbThMNYEVXs8AEWv/7qsT1CQamg/olqRwmJWpZXS9Yowz\nrxf4HTY2chr2yBh04TAW2BTQ2d6FfaK6VR6YFYi6JJKWe7RVxwgBti2lbOPY\nUlmZmj/dfEsiI3I1GCWqYbjnyhWM8O6MgnewJ3K7sJxpfM0yCBs1J9OQ9Uwj\nvKmogssIFbjzBW7H9doWdvu63x4hgdkThKX3UmHd3kvbTmF3TUEcHxI23oNV\nLhHhzeKSnKxfzIfh2tVQO7I8wY2qOt7aUHo3CtPTNcA4XzwITPABifN3Sq3i\nc0PZplKb2diDb+QVG1w+HU8kLW2kNIKExLVt2cUdzP3sDr+i3jPK0GmmbsyP\nhIdkUGsnim0d2l/cGv8FCKRJaYBQGvOipcs0IRNxu57LJBM/oeg8j/oexv3V\nouUzB52yiiR6c3zmTRLwvhsvyOaLRChCjsof/mE7+ISrnsc+7QEPQBQHkUuV\n04dtDJEd9TZhyrxXMotaiu0S2Dyrt/fg60djsDV9K3LC9dGSWNhgiOrGsFoq\nbyKhenKGbJamsEiTMv4iRJ3xMaOHleV7dadcwaNpUdMwHaOGHz/lv3tvTn94\nRzvG\r\n=pXnw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.e683bdf4a.0_1615493335264_0.288187117535875","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/segmented-button","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0f45f2e16e72bb84ca5c878643663bbe7699ad17","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.a07b6d486.0.tgz","fileCount":55,"integrity":"sha512-vG+4pyTKUX3hGWeCDYl4rNgaqqs2aNKwOsAryDPjhGoxbuPcPutbIT8wfkHdj4c0IDlKfWW2DSprDxQpmtK+VQ==","signatures":[{"sig":"MEUCIQCcv/sUdpTsfrSdNHe+6COkcVh4sRbB1dl9GnuEbXB8pgIgRRQN/NPJiHHp0jOj3n4nKxvsE4pmbB9f4nXOHI5sdOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6QCRA9TVsSAnZWagAA2cYP/jS4iNT1glVHN4XQpJDK\n+tEf3OAnDYvIarqUiKKbB8yinTWppx8Pe8/ti+Z/R+/AGh8K9lZwGGjtstmA\nColceuEH9a4X8WiOfuYLeo3c+HwKQMGhk5C39I6AWh7HHvVWO1Po9IFaVYCv\nD5DiwTSLpIJul1FtDsuNR3SRuayHNxnrQ3tqOHGuokhtkCJZlG276TuxCEey\nmMHGYFcxdYViYrBZAvmFTTYyq4Tb8NwKyeHiRwJq2I/QoaWu5anA4arCOgKC\nm5jQG2cHvXz0KIPzdkDiL466pjkqoSyKgtO5wtE1Ukx2zzAbLGRTHYmTTVDV\nvavCKEBN88et2JaHmyf8ToXvpKlqUdYXRIFIs+eM1VDS6XvPWBZ4gms0L232\ni/sKEgtSS+61wrX1Hgu9bKTEVwGFnUCxWZCNyYUHv/E30LYmTOQ9X8OS9aFJ\ndX6rSkCQt8JiiZb6MgBGZG8+ErMoOajYTG6tg5WskuIb4Sn8KaVTfJjjEMv7\nOsSK/I6mtWe8gUxCzZV3ZwETpTeEZd6x3KKVKNNwa84lqzBwv18A0UONKC5X\njZ7+wLh2zCzVg1og/0b83UjL9eqctcAlXoC9cPi3d1kYxuIR9nF2IBJF1GFK\nfFtA0KFyKbxUbRr15fXU6py0GqGiTAhMwN37XT4jshMva1sgoZvVQup6BK95\nQoZ+\r\n=qyem\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/touch-target":"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/segmented-button_11.0.0-canary.a07b6d486.0_1615494799803_0.18245839582644652","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/segmented-button","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7bc5c7f9cb5be0fdd6ede5a04645b581b5160f34","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.1e0653477.0.tgz","fileCount":55,"integrity":"sha512-z2dvPxENZ59rSTfLomH/HdU3MOwQfO+Dox62wS+xzPvyqB9oZtTP713eTy3ch0DwoTM3nAQHYeB6aQJ01iYXEQ==","signatures":[{"sig":"MEUCIHNrdRF/2uTBdmKA/gyW4j/hTPcXYuvMQH4yKGFjC2TRAiEA+Tt1t9h4q+tr7+WUiphLKXkXUPII6CGZI4vV9ltHVC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBHCRA9TVsSAnZWagAAuAMP/0zzo/F8o5IfBwpwSGf6\n9MvsQJ6psqCZ1IeUL5eMoByhVt6/bgPLNQfXZGE6F41a0/DBV3E3NVDJ6QKh\nUi9vrrPFQHr1UJ8lBpr2MghxXFi3meX2g+w2hASCrt739h/mddgrp14pH/Xo\nO0fVgJP/DWA6X3ubafhZzUWT4FGvu1Fl7TOQwKjm4SqbOLM7sGFKVETJhW1K\nsHQbeglKa2U+B0dKdBg3z7KOEMBxTYNLVq6ZaMI4M0oRm/TM99L5F2lD0JWW\nAen3gDbh9NQExfxBQMdlrYpunhRMwwJRDw25Vq7d+VPN1INwmUF4l0so2rY4\nb2a8t517EcaLV4bzQ3GvssomZLcyR6tDLDE29Skp7Ij/3VGB+l4gqEN4ouy7\nI+9T4QUgjrgT9Fl1cD5QkskZi+wrPo0H3Hi4jP01b6GeZTrPDkEIwft2+kX7\n0FZo2hpQhK87Dnl1BRigDhCRtyYw/gJEJr7KhgfSqkJPPVsdJ6pklfKvogSr\nUPsf0H8nH3tRTfG9P/09nTaISoBF4h3EaoQW5M4kE68LmTlMFC2pW1xLfxN5\n19NqvZ8WtDFpz0LVocISCMwGVhpNMSIRk+Nq1l/jFSHw85dyxkUl2M9W/P8e\neKXCEt0q/uv2KVZanSNAKLuAl4J56IagK4LbOBnQpXcMKHhuZKMrQWtHSBpa\nXXEZ\r\n=KKdT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/touch-target":"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/segmented-button_11.0.0-canary.1e0653477.0_1615495239159_0.9120515862633247","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/segmented-button","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"21577da335b256c7c4c4d79802b031a306ce70cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.148e8cfcc.0.tgz","fileCount":55,"integrity":"sha512-2dtIETGf5c8iEh/haX4GFPNYYxW50bkUps3es6nsDiBwZB0gBh23ewb6OFF8C0v4cJ7l1jSttAakCv9DnBXVaA==","signatures":[{"sig":"MEYCIQCoBtjiseb+hQn8hYU08v5C3J4ok/Ie+B76CgEkY0T8PAIhAOdeX69jVN5kMzhCn2RwvOX+zG4AfmACqwbjT70jGAGO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1GCRA9TVsSAnZWagAAydYP/RhiAOc1IfJ3HsJX0ewP\nSgez94x1dY8syJJFGUwPOZGX84W22ySl7Eb42iIv4BYTxxOAyYfFeoVfOQ21\nEh+plV4u0EGfDIb6yuRbqRvrWiLm2jFm5vxVNNPm1+Uh9r3VC164mpjSaPSz\nHp/mBpH1MmXcdrvVAZairqdW1kSTMDZ+xm12V5aWsRV2nE9idjiDQwXDf0hr\nPdNSObtRrH4OeC0dvFhDH7VTI/0geoJero+ARToP5irc0DWM3XMzh3BBcsvV\nSMFTDCotfaPCaNLYWELVIfJIimrCBbvhOke/8xIRWd65+bughZ8v8p8JYCxj\nInM3U+oQtsnrCrU6L/2OdXjjfkl/DhhGW4XCDMSRd5vmHglt4Qogh/vrQbPl\nx6MS4sCL7YkkKBvhtDwUQIJek1MIaHrs7xLHkoT8TMrD0tKcBnxUXwyXvcgj\ncVnAf64rIOaUwjsgJqaKAGga8wx4V7epS8hz+J4jDarbv2rij++7rwPUpeLt\nUxORBiEuuP3gqK5ruVi/Vif6tDDpQBn0kWEaOKqrzf/gbU7nMtV520AKfpd1\n8oKEtluEbIfO2W+moI1u3oSwv+9NQpKksy3EonWmaM9FoEmySDd/hBZF2ulG\n+rmyidjLFHUnIBsrPTct9mGpEIb5NDg3GZl6/a4s9MJQ2tjVcTyKiK3wumQr\nugKh\r\n=tcVY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/touch-target":"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/segmented-button_11.0.0-canary.148e8cfcc.0_1615502662327_0.8484754479929639","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/segmented-button","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a94a3376e49ae8659c5541183256ec501eedbf83","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.73a227194.0.tgz","fileCount":55,"integrity":"sha512-/Y6VQGVPumjh31s0bAm9jfEUTGh5lYhSmx6oUeCUZkI3syAAg8iD/UClUHrZrdKIUbuwLMbqVrNORFWv4boIDQ==","signatures":[{"sig":"MEQCIDusdKDFLr3Jq3wtqAJj8uymHc42SYo5qS7KpsALygq4AiABg7Mxh6g0DKR8ocKnZdUIUFDSYYUSpy8gYK2P0/SjVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSqCRA9TVsSAnZWagAAu6MP/i8/WolSNaEe+ZTV5oud\nlKIi6Mz8kBOK9F4XCA+uHamD4RVCbrOSNyOSKY/ix8oDI+uScdaLvmkNlB9i\n3hCD0KEVXN3I8g0xZY/60TUF2oqDnl1tx0t3FgwzSComub2q7wGdzC4zyDOf\nNLtPDsp+GON50YnFs1hJTin7md+B7EnNeMpn++tSmyJCfW4TofTGOEaYmIiv\nV3I3JsWSi1BmP2k1lMdhGb6lwfE0dOggX5LgNSikdIF4C5zdMwh/96iSUH8e\nGtByjdsyPd56jCABnfx5zXJ9TYjKreaIHk5hJ4pLlqV9qBd77/9FR9LxuC/8\nCyRAebcQPBj/nyb2/biXHWjjvb4LRqnCNcsnDO2Lp+XjJjYkHTUrYRFkM1qL\nFkWkFAu7dDhH5JguQvfioh3QcY9GtePLIFMmZv+K4FXvI7pfOtXjomR5dCdG\n9trdbyQf9KhGyOxM8qylzAOivo/p2I3wRAz0t2CIDt5VjFMWS9y1KQG/XAbI\nW4PJXcr4riWg3cZzgvtWUPplYpW4zfmSHvtVSn5keEQG9MJqfoEzpevOWMz1\nz9IjIix6iwnqzDx+QIkWt4L1eBoq+6X5ZJMolvbZMjl/UvtT9RTzal9L5mrM\nJPOWx7GibAJWKQFoj6PllZgtUDzxImnDj/nPMGFo09PpaK/nqg1JxiOmA15k\nxFgi\r\n=2eLW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/touch-target":"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/segmented-button_11.0.0-canary.73a227194.0_1615508649859_0.4247600939756977","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"374cb7a1f910bea7678785ffe1424a9f5ce35bde","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f8579b7ea.0.tgz","fileCount":55,"integrity":"sha512-XJnw+VcyljeG7rihW8GLYNfmrZWUs+ETxKW5PmiX7s+PsoAtNDErPvKgdQ6JtwIr/2mR0V3B4PGGh0S/eQ7cwQ==","signatures":[{"sig":"MEUCIQChevMeyU4NBSz6f7sOZ7KJkEKemulvUPKXPgc6kMeMcQIgQFKYmkhHQFimPdN3dKFdVF8cAs1PFrPwQBlCHXeOtm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1hCRA9TVsSAnZWagAAYmYP/2WChG9JpEcedr9k8Ehr\nvWVDEfCUAGrjk2Wf9NBcGKnSiauawYJMOrx2A3GqfikFnFApZft9ktREd/gC\n8LzbOzLXdecoWP+URD8j5O/dRsBpEE0J/oQyoutApOcncthatkKG/mJ1PVrA\nMUepjtoXGkafPa1gUAvlRxUtRbKf7MbTtWu1EBBswFtdF2kRz1Z+/HRF4c4b\nIfxQKGl+rpgs4Xw3C/nEo3P0l8tRTga/NICiGrnuPQ3r+Xuoz/wWhMsJO/Ix\nVEvxE80Ef2jkYcYYT4C5MsTDjJRpKrwkKCwXRCiA51AS/kVgjD6AxHva1TPm\nuVqgbGTkbUvOwuWyNxvgo9AiJxLYae61If6PMIxzN45R+3sjT223Na5aeKCw\nr3/KbOZqjVbKQcwIAfief11eprReXWOzjlxKU6lSRVNlnaMf+A2HJxdPNmev\n2EqxZBhm7cmt88yE2uqGCGAefywUsVzfwzzy+IGnWCKynEh4Ht394YyYHnhs\nxqRMm8PH28KCcqqhrmk2pzvdrbrj/pkK0J6ANIJMx32npv1XmnwzPxafEv5B\n8zaF82fwh4ygK/es29NwIGfDwPzklmcihD5QA3GKrRI7/wbAsHFymCwF1XEn\niutX2BS6UhpkqoHSBiML+16wMnwXGYCEKKXR4Spg/2AZoeZFS0V/vgLvMzFM\nvMuR\r\n=YFh/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f8579b7ea.0_1615600993227_0.2976268610271078","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3ab2c67a458b0dca8e32151901d278484f036058","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d2a39d300.0.tgz","fileCount":55,"integrity":"sha512-7E/AzlNiIG+SZUmBac8zub7x7BSHwnlNd8Rx0Nofvu2a8anERZdntBviDU3NbDC3fGhW+SIvLWLNBq3F9znirg==","signatures":[{"sig":"MEQCIGNxYFzrUzdu7E3BX8bWqFtEMT/PqvXFhlC5S6BRjltGAiBboPkYTMQrogq4GoOQAzQDj5wp1i9Tk1tnHe6jgh3vkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1ACRA9TVsSAnZWagAAo/QP/0LsXrwANuByNs7Y7aDC\nE1IE4IeV0Sn87iekvyfQebvms7Q5Tl/oJ1uuq0YB2sqCwzJ89SJLuvpNgWT9\nV6LwG8FV5AZDVGDAW9ScGbQEmqosIHPcZ/q5VkivazvyscFE5m5VXVgJdFxS\nAEbI74OwiKzHZvTez2Lm5+OdGdsSCVWgsjw/9/z3N8BHrjYUAhj4S3R0ErE6\nkF/AxEiMQ+fRrd20qVdhRBEj5kjsSou4BjMv24lXkF3uc4C2BE3o/aQ/7ikN\ndnK36rthF/JXo/9kigXYP/qzA06Ac8T43N5smwj0viwLDO6Zb/QnAZKkmufY\nseD7c6dGD24JnKYarnWJgNwHuf9SmGn1WjXoPdrQVvXOtC5M9XFxODW8fz/M\nqC8goe7IK3y5ZG2E5ra8uoULrFITz8jBHpqEgEVzXeCm4ZSi3ODpXYLBp4GK\ninc4ZY700BqWRO5PE7rdEwhk5voDfhf32o/EIoXutkVkQYWjqWRis99WQewN\nzkhCJUgBmJRZULh8zy3UQiNWPiWN0YLk09jT1QFHtmz79rslS5pZJvcwH4C9\ncZR8md89aUDfAhgnXHvMQ0M2N9plSDqd4kNUBESuKxPG3APRUFtpR6ilq2DZ\n8hEH25/4omz68U/1zdfUG58+bomQrMxi7gg1UhTmLMLhup2P3jDL0gnUXosd\nwYSZ\r\n=mwq5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d2a39d300.0_1615854911710_0.9026442723991293","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9382f9c3ccf3e91014acfa91bef638b8f20e62ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.7cf67823e.0.tgz","fileCount":55,"integrity":"sha512-OMXTpGpXjMmTX4yT/U1fvn7XwzecgRwHZMeACLbFeaV8f4Gm8asPTAaINxo3CJxegrgEU6t0H4YBkveR/dpFIg==","signatures":[{"sig":"MEUCIHKP8/5F4wngBKGW4atOw6aa5KB3P/ocKtlCgfOAaPMiAiEAxqnJHncs7Fhm2jDPRLDRGTmfJhaaKNuDLIVnDAoWRr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbfCRA9TVsSAnZWagAAaBgP/1E6R18LisreQdCfRx0S\nfNpi+W/ak6y9/4iYQZxjWEp1poq0RSVItZmj9HTo9hF7NGJXsnMlH2LYSgVI\nZilm0nezTa0AiMyRcU9r8e3kjeYxZy2qX8/tLWddYialBJXD5CiZBu3BIPHO\nMEfbsVcf99S5J1WqFdohoGziBoH/ykUe/20v3YjNw4A2/U50cmVXpjcfFtq6\nOCciSEucYSVaBluM1c5Ca5gciSoBR/27/pz6nGD16Ku3X2fuo/qDe9r0SECS\nwMYTMZPao4VT2Fk9RHF8gJC30TiNkd26UTRGc2ZCzL+Jg8Q/KonlQAh5I37I\nOw2MfDMWErnU/pblQeHKRZtoVULCsJz+q6p95PXxmhIfWPVLpGyL83Zk+G3j\nhRTOdCRPK6L9idFxQLHnYM0ptasnGdySCJ+YFDrxLND/KTPkImvDZ0uvL+RT\neDlcnsoZeBRlwVm9ljn7xAg1CpoMbfNQpQTdLlway5vsNV0/ylDVqUKEJDmC\n5r3YjWbOlk6BMhR3KPqXAQFmvX5UpTEO3OmV3Wve8fJC/Rp48HIZmV6BrTSp\nTtBD8ltWcc+Dwwmyg3l+8fMMBZeKWi5yWQ05cd+acGYx0UYZCXwxLCzvWWZv\nq/51Ajhzqo7XZUi4awZjgvP0a71T18sr9P0JsIhr/ZUIqXwkZ4Ot6qcI39Zb\n4qU/\r\n=b5if\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.7cf67823e.0_1615918815177_0.27199378384429074","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/segmented-button","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2d6ad4137b66e58e67f5ec05aa12a1f0747a1ab3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.67d780c79.0.tgz","fileCount":55,"integrity":"sha512-WBUHI8HUQXpV9ZnXQDwtQ+WJMdKuGWu4Lgve9jhN5otTi3XxbcmeQDQfAoGWNmxsDZHqw/W4npO79WIP2/x0jg==","signatures":[{"sig":"MEQCIHT7BHMZrDzJrzbtXW7kzHUhIVCsF8CGfJn7lMJeyP1gAiByD3RMx0ovFOG7sRiYaF6bAZ5OwBVH4At7eb6lFA5t7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtrCRA9TVsSAnZWagAAJ78P/ikSsuO8Grlppv9XCe2k\nX2244j4UGBKCWHuWO8rDRSK8VpYjwA9baCuF3Z1DNWDCjaLzssuQAYVsG1wk\naXJeVFFsFcHuH/zup4T+Pwv0iEm2WHVf7CoYKpToobsXKPeFb4sAfK8Nv7lg\nHihzkL+ONBZzsHpYwRYmQvoxJjPbIB4s/dYoiKE0oT6oZk/bmBR1Bs0YksZr\nkY6d6jVc51JSG+BoeNHDDT62T+dHo8zDq1CRp/tf/2HvmKs2kdA4cKOBHjte\ns6KXwR4P2mBSiX5SLkhVW/hWhNtV7DfmMKC9enKuXpXun7fyJVuhEQQyYb0W\nsA/vw8vnVvgced6j0mog9gCbPwIuvEEyRuFZbS5lMPSAy8us4gsJHvGNUq5/\ncmWffwAnm22I3HIX/JohBYMOKmCmp5u6k0sG0GMGUzhyjEZas+c8l+D164R1\nmvdE4x1Pgy4LsSsjH2ZDryFRhjQpvnUf3tSyfSO2kcsIVDObSOo0QduVbejC\nM8+aVUyt5xUGC7Kfa5KoDk1ssYfqZfDiJE0Qy+ZibzkyQxSqK2whjI4isW8O\nMydzZziXHTwKoSifMnJ8mZLyOJORbLRc+mb3tJ+0OiN/JGhj0aG9MyKWFYNY\nZXp4y3FaBJV57xnf1gRvqgCFbATcrBKhAejnMPMcS1DOCnSsGuzlLDYJgsnA\nHxXT\r\n=cdsr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/touch-target":"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/segmented-button_11.0.0-canary.67d780c79.0_1615924074869_0.7015756333838299","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"353c75bca38a7c0cc539301368271f26b1be26a2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0f358ddae.0.tgz","fileCount":55,"integrity":"sha512-5YnN5vchfbgJnI4/et1Y2vbYXnMR8H5Rbm6lRqgO54ighvFVNqTODaDyRJzJ3RAelIgvCPRXN/LOsypTxFTQPg==","signatures":[{"sig":"MEYCIQCb74lCfX5MkQKj6hFnYLXt4UmfqqoUAcZvbe3PBYDvVQIhAJ+pea3vjP3uLs8J2QbnrL2vfDSAGD/l3B0WSDGSrhtP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1LCRA9TVsSAnZWagAArXoP/ArbT1ncTHF/DfR41y98\n8bhlZk646jrwKBgLUahlkHo5oTgxRj7DQfKDRT0Rpf0HoIN4zdzvHisMwwCl\nAaxDZdYLwsSpCY6vtWSN5e1VJbn+lfowdZ4Am5ffnoW6IYECQvPpzAjmCPyV\n6uz1F9lm7RbN1sbVg5OuXOuP4MjKNrLvIMTSZlFDUm8GrNA704GFG2sFbkFO\nunK17W13ZnlpQrlowJUv3GSSOvu3GYvw5khVyCknbR74P2iAg7cX4vfMSZye\napRaTuKI/XbO2bhf3Z7uHEje8u9GcctYCFaD9kFgneuz/+0whv4DMomv7LL9\n0SHB1ja7VZaowIbuHuzU0ESjpMxYKcnOv3aJ8W1FKhYe83/6BW5MbWLc07RS\n9rJRl81kG/xeHIZcSKt4NiNfGzY2mTbxQSm5X8c7SNBaob6NPHpY9SBfGXfx\nEe+lJBJQfSEdXF9qLhAAdJHyeJLGw1r2kBxDqSx8b0hXOn/suJQaVVjEq2Zf\nrVsH2D1BNDfnkXsLeaTQGxrfqOhL+xKHJ3nHdW0a5yl6iuM/TBP9U/QcR6/y\nNpjD9kSTBzDeFk9uGMVXVKDCYCDoojFWdbwGQwRlf0XfXM8e0bBPe90kw+s6\nvHzEMPcXwzfz4PWL6NbQHNJFiLw1zpuosADqsIkEMZiGyMlrlEZVnXJlC8XI\nYWuS\r\n=JvUz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0f358ddae.0_1615932747268_0.8962533371251242","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/segmented-button","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0f19b5306e001d846d6783e3c490e94866d43990","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.67eb0df80.0.tgz","fileCount":55,"integrity":"sha512-AsfoqGRmgHcgE16qipvS4v0T2ICBJIBuL5BzUp8YPQTDZ22939os7K0Op7qKOTXxnf0sM4Mzpmu6gsmhJhiRmA==","signatures":[{"sig":"MEUCIB97o/TcTYQN1MqlRy/YPKalGUiXRMCYK2QCNCwl1D7yAiEA0zEDeLHqoTIOz9Tp7mrAm9R7lq4c+1pmxtEe2uw46/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOrCRA9TVsSAnZWagAARtMP/3rkiuU7KW5x9u826U8r\ndtSMAiHhhE14bd9ptmoQzhD27bfHkwMecrvne5L+uhqt24Ygyq1gvYyGK0Ob\nfMZOgTyeY2LLZq5TdNiQbfbQdbfFGVP6slogGr+Ua5smmu8HJeU6xakOfDxI\n+K67jVBd2tH0t0LFfudMiZ9GWVaCgNekpF4ajBEeX73CmDt8BeajMjcQ+5ZY\n/QgvVRM8f4NwEm/Yb7gqqeaiX833wKmZxWUIBVINwx7DwXSnzCIyjMx+qoj3\nN4gnLbIXIJMXPx2T1jXy5ojfS/rNqVcoqmcaw0eaeTKlv4KYPa+YM6UPQBg8\ncsmaFNoySggn/M1b+arLqpGsbTE+h57q7RhwRedNppmj7jirKNZdvpTOfPrB\nUxfzxX/gCQDFAN/BUJPBOyrmbzg3yzbpGl1NgHt6raqSy1cbHZHnDDH+Fq+k\nziCF8RDSz24OfhRLYBNmUM4ZFoNrMX6Ugt3b1/Blsoc7JNRg4g2Ple0+0Nmt\nox3Dk+iuUJ1Jsf/NGv1kxWtXDf1/Rx3FLHoTD9OZcmRZLQ3NhDKI4vWsjMMD\n8/YW1cafvH7Aamz3UzPxgKMggSnIYXWoPgGvGfXmjOsENhUXgiG7HG2c9bpb\nmnHVcqLCWxFDKNsPA/UHhQotY+0VkIGA/oY3mm33bIMpGBoK3Ls5wwffxYUf\nd31+\r\n=wtEd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/touch-target":"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/segmented-button_11.0.0-canary.67eb0df80.0_1615934379113_0.8168625411240984","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"374ba92695ac71f786f4086cd8a410ef6d26e57b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.941ca3b3c.0.tgz","fileCount":55,"integrity":"sha512-b/wfNBeMOVYlTNep9zxRJEyn7IQ8TPiDaY1q1WR2Y14Ofvgx8gHBBrJBlu0DhszXRmaqjLoE0m9njjA+5co6/Q==","signatures":[{"sig":"MEUCIQCBZq14+Dk+jPQ4ky4Xj+B0H9iungg8UQfuqGE4MYhEnwIgEarnJpC8/e7YHE3i19f5VylKpii/Z03OhVrEML6VOaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQYCRA9TVsSAnZWagAAG/AP/RfYfDr+RDxLaLkZbfCB\nsoYL/b4315+Tg6jmZj8svsletMzZowWFWEwYysK6nqhl2h1FcZJiw8AS8MYd\nFC3Lxi8n1nehdIVRgt6lrmsZz1byQioY8OJJy1oRd3OqXgwvz+g+Gs/FeElF\nxSO4VLQC2633yx6II4VF3gCGG+RrDMFjVq0UdPsX4slSXeQU32twHAqTC8vn\nB6kGZIzQR+6Vg5YfFbmm2h4UJ6gMFtW0iANQqqT9R5M3YQ7MBMkchT1Gwy1N\nHNN847vXQ4+5eya+E3xiFNKUtDeX4gSCvoNaA/OvnKQC6UtsRyestIx2xeUy\nqLJUkdoexiwwLaYheggkUlzRPED/mzoEbo8EsS6gOFSd5Mww3I7ZfwHMJOoC\nDIWKJxn8cJ/czJOg3+PAE+Ws02v8zggeLj3oHOlNIIDdCdlzEwklpF9wXgA0\nPoxay718OU5chMmWaJin5wrNGf/CgRQQ4B7ZO+ztUwJ9h4rVyf3BBHsHWXkI\nqAsCvu7zv7kuPHPbOb0tfKdF5l38g4BPDvss1KH8gcxBkt0fTPeBjhOEKyaV\n9ukDn/6La5i75hLNYHHjhgWRcnaoYtdr9bU66XgZte7fYLFd5jnf5yDH17b2\nDmhbpPlT8AKtaBu1Ntt5nszPoW4ikuWo0/lCondjTGEhY6M0Y7WGzgEK9QnJ\nMPgz\r\n=E8ab\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.941ca3b3c.0_1615934488110_0.49892885324472624","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/segmented-button","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5b18b3b1911e7e3a8f9b0d2908f30b4bd32588c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.3344d12ad.0.tgz","fileCount":55,"integrity":"sha512-zYmVBptN7nAUrxBI4SG0bG/ewcrA1+Owbvdm6Y0mWc+EJ2tSxhynJsyhaiByjhJU72G/54YsqdHpqNNebHtFNg==","signatures":[{"sig":"MEYCIQCy5FXvWMnX19MgkKpolzpbukExBMMpk2iroQBi1PKCkgIhAP13kfjJPn9jSEhkYYV4yk+CC4Y6MAjmkGd7En4FiMmU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOQCRA9TVsSAnZWagAAZTgP/Raa4YJRKMXL+f+GJV3X\nB1dmu5dDrzmcJs1lKj5km4VgnF9toGAeFKhdJKC12Rin8jbl2xBR/0K+hxAl\nBT1mR4OFnn5O9FANcJPFGem2/zPJ0uFRq58OqqXj3rc4aB1mWD11w199NhMI\ngAWqHas13yFd9AhoCMpkbI/u10VSgk198IcMnM8TciydgBNs5z0GyLWYxGfK\nJoqxy4lsiT7HN7hS4aMWaiwT4csc9owEfocy17kBh+bluqCQ5BmBnQhxra8f\n/0lY3kN+DMtEbX8dsyvTWhT/veiN+FZG2APUAsRNkRPlkW35WTrbp0ch23gg\nbb2BF5GrTzIOaxF3TV2JN3X3GMe2PIH2q3tSkgaIwWtrZjjGF4pI0KIeJqZ6\n9EpqQHOAAaWtuS5U4wtpQhnMcvFLhApBJbm+tIN8I1jVfREmXkApJG0/3zag\nbwnIu8YGt5BIebPl6gNbAFBH0uBXX5xMdn0JQmtsy70UgvTjjED+InX2mAzj\nRbZkENby+ODUcWxAUNhgUPCrWHaXHQoVCJJwDmWbwkdYX4+wFfBo7MmhNBMb\n0fdh2TKH2BJ/cb8nS6luN6mLNDSuzNpjKqfIimu7gsONIqitW8cP1WPfGrYV\n8F/v6XJiFFWNPXksVffzlgX2ZWzdHmWWbLbIzdznPW5EP4mHx+A+hDrKqEG8\nzDWd\r\n=QgeC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/touch-target":"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/segmented-button_11.0.0-canary.3344d12ad.0_1615975312012_0.9125270720716545","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/segmented-button","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4adef5b885de3dca246534fc4baba4938301a13d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.6072ed604.0.tgz","fileCount":55,"integrity":"sha512-KqBtozBbVsAIwWyEqj9Ybu3NB2ITTd0vCEZLkGFXwxzTXk1e3u3ES8sySjL24ZtvDm7QdOozxNrSSrIhrdYh/A==","signatures":[{"sig":"MEQCIA2Znu4UVcj8SjACl/dUbS0HYyEvuNFVtUNG/oY33nNqAiBe0udbVPnPRvgfFZNWUbxxQuGd5ziVTTMNij4FiFMvGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonXCRA9TVsSAnZWagAAFKMP/iw5ozIjB3B5pGNmiUtZ\n1FSgo8xxwKeG/zZTWf31a/CzH/MFke29JZpwU8Df26pWqrRqgEPWk8mW1LGl\nqC13tgxCM7Gm4gp6soefB+wz/uCT7hXphM0c6jauvRgDJCwkpkzLSs9ghXAs\nlZRTYYWyK2SSYrnF56cb1kwNPymT+vvDee74nFWzgqUGzgVs+vscWyCG8ppu\njNLIF5En0ti1PO7ol6QhgwwFUzZ6j+Jp6RhTAwaRZPqvhOS1tWzPB2sQ9Amk\ncSJvI6rjW2SxuE5et+0toQxc2YsY6+K3iMEI+oR3MKuc0QgqfsskFDk2lWYd\nfzpOx6+zcEumstkm1z9etxQ5ErjeWX6+wHKMrDRe1BRu2EjoWTiil4dD40ix\nh34vmDjulsBEeHFRdjXTAhLOZYO+U/F7rp3eOPIhc9Tk4GTBs2GB1BTxfNxb\ndpmoHg7nEZVjKjnoykOqz5eJRBDqfvn/OiNTB2c77PhmmG4PZ/GOZpVrJSjQ\nx8lkgcoht6KjSzliS/TyBr1zRcsvGElrZqF4aGns0SOWFtKXqa1rd4byb5qu\n2luM10nxXFWkQKxDFnyNXdycAPDq7oZWRgU6jikv8Dvi/Rwp9J9PcNYloVO2\nm5D52Tjn8acpkxb2OaHUN+yUrv4UntrpQKQyD/PzwLrqOV41Es4TGx9m9iHo\nZgOZ\r\n=Qja7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/touch-target":"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/segmented-button_11.0.0-canary.6072ed604.0_1616021975449_0.23651947686929087","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3ee0399ef6f2bd5471ce7c1a03fe5039755e9d5f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d3a6862af.0.tgz","fileCount":55,"integrity":"sha512-jGyZG6bjFdcQ+F3qiFZsLoAiVrBL0zzSnfdNeoYbXA3K3N33vmf7VkeMxw5LXtEF9lsBzodGARb0Wjy6sTOOtQ==","signatures":[{"sig":"MEUCICJm7gih/RKui5fJihTdLbe5sVKVBPNqS5KPIFFkRGYLAiEAovIA+1IvnxjHamU4XjyVmSugfbYxtKWPWe9tEV3sE20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU323CRA9TVsSAnZWagAAZwUQAIQp5yPBDPt3jxjpe/u3\njOnLKTZAH6/eIQSMNw9gETgtxhzgHqu6i+3j/BxsgEVouOZ86ktwVSq6z7ZK\n+k9wcgy69Ytg4szQSHmzPaO5hJaPiTrTsBIafHxM4PVRam/8qCyGyNVNEZUt\nFBrqvJwzLCSLjlMmYtEuovXHOo/nmIYkZL2nRwJrCiZfnQ+MjMsAa8Jo6NdR\nYIZtlFi9zh/EcsCz+H4Xy3iqiu0TSL6v25SrihLw1RLgE2QkTlsFtv2YyfF+\naSz8Upd9/1ZV2OZ+5H+evJBVwo+Ir9uZFikbIuxYucYD++cAY7o1Vy+qkufB\nPmTwa+IxKi/gCAPJcCtiMtXlGarAI9XfRVHKonzOlfbN8dCijgIRCvfjdwKb\naWYMk46ywRq3TSPqiPFp0+toVYhSk7TFM4elbG5ALvusfhYVlrIAXIVi3oAp\nM4KQCz8q5seUccKdbbYxw0/3J+P0nlo9CGw+b9bXdcSNNnLLYID7VqmUDz/3\nbo1rPS/0PtGsJwgt0/HjNsBRAUSLP91T35H9IoSDn9t38DR+Vgoszd2QFmlw\nOP59pRbZ0TZpcxKu4eeWOUVS9tLNVHU87CU51YaQDq73PKLRv8AlrsVdEEQm\nwRpBy6xqixaKrPiDRAwKDQN0uU7ngRtP7YVMxJ0HTE3fpRjL8VhXpM3UriIt\nMXv6\r\n=JbYZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d3a6862af.0_1616084406967_0.3514580711309008","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/segmented-button","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cbd172bfec00ebe793341c4c8f94f1c5b06aeb2a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.40dd242d5.0.tgz","fileCount":55,"integrity":"sha512-tr47r8FK/VB/cAimFfWHYv27mx4nn3vG5gBjzgHHR3THs1eymTP/zGEh0pF7V/8ulExps+gM19YXkQ37BJpVZg==","signatures":[{"sig":"MEUCIC6On+wPsz/2bGUERIZptcNXbjo7ZRPfPm0TGIXX4UDDAiEAkpyIRW3QkWq2bIYcuVacgv02dmEiImnyZM2aHF12WUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NjCRA9TVsSAnZWagAAIq4P/jz2e1d3dpPCUtOlvE1R\nxX4+dVy+OmB0cYj+RBW34diYnCVMj35GeFhetVHzhfkcIz48OvDeeRA4IcKG\nP2tzKV81pkxKFLxY68kiB7sFqaBUde9psrLqVaVX1nZS8nvrd6o73DjMYgvi\nta9rm4y5GjFFESkG6v3ZhmmBUNMaBgVn5w6ecOh2xS40ZsHjECluLr707CbV\n/fVJDxVLCYv6BbFVHfska2y6vdqrZhbMBveBUoC3tpE3ZXnuU8wkrYRa69PV\nzOmTApVrXQSKmgzQQJupX83e52vE8E6S2xcRzaJ5DH/WeUcRofUc2jZC38QH\nAL/qGMLeWha1V4izLbpREext6tn44USmeO5BDY8meSK7vOSaBbsJD8cvPdaV\npcpgrewXyWAqxRScJsFrUEsIwbg0Dihkl9kLJ2QhTocIKvPeoZzjpDnJBQ85\nqPEmDrszdo7XNQS2+BYkEmsGJEDQFBJXaB5btAO6tbFYqkyhFVBRS9ICTUEX\ng7XAQWSVJOnNORFIHz75GCGJOKzDsgqKHz9biaFsSJ/2S7rh6vV0ixwwVrpU\nkwsT3b6BasphBjksC8tovjpA3NhY0rDfbYdOuN3p7nF9p89y7JnvLQup/yk2\nFw+STzKIN4g87t1qorccUQuGql8h8iJ9Hz+BxKhSUOFXcRjJjPjhvr4MRU/H\nireI\r\n=fXuk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/touch-target":"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/segmented-button_11.0.0-canary.40dd242d5.0_1616102242576_0.7715280327923415","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/segmented-button","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9e72424d3baa9c33fe137c0465fda2c4544de2ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.ec8f8465f.0.tgz","fileCount":55,"integrity":"sha512-0ii4QxlmUuT7agbFGkPiy+Rxla1yMUOQqlmMFyPD/SqK2J0PtHIcSfHKOzTgvHGMuRVuh5zQ/iJM5IGwvdG4ag==","signatures":[{"sig":"MEQCIFSwRwr+DKBDMyTyMq18lMMCgewT/19Oj4+/NO8rNrtCAiAT49thVCYmcgSExmmU4kaZEk5j82fhV5enjXRI0xEG3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8myCRA9TVsSAnZWagAA03gP/0VatI5P3B6cqmgg5RNd\n+8XTmXP7agvWTdF7Adn2rYeY6A7ipwW4VNTYIbJvM5XVHQWs8GuoeaOrCm47\nGKyFiHO0vAEjHMII8WMOLQKviDEQ/60Wx0sRIP5c+bV/jcdHBv9O+Pt3sjID\n1MnOfw5YHPjhR7+KMKZ1rH3a8END1/G3YNPlfNZOrSbtI271XqfYhO8qlBMM\nARw/4qE3DXmQdgn14X/v+RuzKHzSbtJKe8GYs8/oC/yAGqOAVT23IfMR7uES\n7bcP6Lnc+m76a5n4U9lsiE3hNbOg7ULiVkJrBkFykyP3cxWxhEuUt/fXTSuq\ndnweqkCeXgKmUCfdqNaaIv2Uom3HSH4PX0E9+d5FwC3F9yXEruz67M+bV5I6\no+GwTC7GkY7Sj34yI8tiGP1mTlnnlzgdy195DcQCGleG68hW4k5BgcjPsIu9\npmeDQr+0v0QjSq2i/V2qOyY+E0gQ9BR9y+afYXxeZTFnuKbwzqcyqKYElkcN\nBeIU1LX7R/sIF+3EB8pEMeCTUy3DIwjhIYYgDoMVPULy5XZNBJrG+WmC8bW7\nCLuA66zuGhBDEvEOFLTL1llBvHZ7uyAoHvpSbvlMzDcEPF+pN5j3InVsHLbf\n038/uom+UEKmoVWovlfA2OMA/VHJtL+ejw1tFofHTNBxi46QSSwOMC0dVVbk\nSenp\r\n=rqQz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/touch-target":"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/segmented-button_11.0.0-canary.ec8f8465f.0_1616103858451_0.401867103100396","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/segmented-button","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9c1a472374bbedeb95c0c3de02a1798e99f73703","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.da38969ec.0.tgz","fileCount":55,"integrity":"sha512-Ed1knhBV1wfQ2HoPmQ42uOtDd7lSaEV8yx5fuEAj31iQ5Rx8+DcFl4IpCTsdqEo681LZR02+Emp4eSwSYwTzAA==","signatures":[{"sig":"MEUCIGKEKq4rh651bSFOk9WMitypgAJ94oIWq72qR7DwUSyzAiEA9Fa8EX9UjDi1yhR9mOqDT6ueCsREMqAy3CFamDogfhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GUCRA9TVsSAnZWagAAg84P/jGR/dA5ksB8U7iR1KDe\nCe1D99yvU6oFoi7hSu9w4j/Rpkcoj9lsXHMJMGuFWvKXCN8wQVi6ug1wMoAs\n3rY0xfjdyELfdn2ra0pa2vGVb12+eDtTGnkOFcXJVXnF2siO2XCpD7ijHMII\noB7pdakKJPEbQzhQcK0cvZXqxVs8R+Ezzh5IKLmRgPc17kLrqHnMWJ48lLsK\nPF1npXy6hGnIi/swxq28XgJiywIoRhe/ublyFPQWDS19vFSBoJQBE+G+ZG9C\nhNHIHr6YiIKIRyq7hE4NU8/a4BFfF1IEvEZYWdJ9vLCMyBlHRhx3z5rU6qxn\nsHwr3pT5ep+mMceSKky493Cr/zDSgYhUv5CNeSS33U8FHZLrPx8WepweHj+R\njSeu/QFM/YhS6EteWQJGk96TJCFbW/VgkEuaiowmktJEt754k4Fu504TYKus\n1CFgfb7etKWqNphvjOmU9ygwPFpg6BtH8rH757YbHZJKe28t208xXeaMHSN9\nRmJg1o0msWnm+XP/jr8vdn+YPudI5iDo9BbpA2YQv9jECM1I7/RA7ePIg9x8\nO356jdsHA4zut6bWoNyHDySqMH2vcVodPonGzhJXetXiXuIFOBQldjVUCRrb\n7uJx/5aK74CVh86ZZe5BEFgVm89v+0+JVFyDPbkgLKkvZ7Rexc+w0V42ve9w\ny1vt\r\n=bxu7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/touch-target":"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/segmented-button_11.0.0-canary.da38969ec.0_1616105876012_0.8076200955916222","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"85c391cfcf137fb17383cce19e6a08f415d73295","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f5246264d.0.tgz","fileCount":55,"integrity":"sha512-llxqEqFL/284/Sx41pCCW2KQ95tGLxYC29YB1kmY2Ap7EEfYxK13oTaS9mhDlg8i0YdYRORs8R5ULymqhgpH2w==","signatures":[{"sig":"MEUCIQCt3i7johOEvknM1UeB+aLrIQJbREflH7FXY8mo2jqDxAIgMRRyMkoSj/BYbudCnpfXn0MMlyQqNgrM2Zn2bMJYhXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JwCRA9TVsSAnZWagAAhMYP/0oSdsf6jDPNNTgyAy9y\nsBFIgeKlKMJTNhkQ073C3kaWSLeTw8ZmR7A4XlAO9svaEPZGGqZvIX8qjDzC\nFCCfqbhSok2oWf8GwmF07muwHKYhjLzbpRfeSDx4+hVI18Xv+pil5dHMYBYt\n1diH5XrayflxRu2Zbgon1OFiwg2YPHUcd9bewrprj3qe0n7FiZe6dWVt2ypZ\nPfA7+lAqBs30PGY2eyPMrntv2aoUrzLhGjlrZ9tYzXz3pRmhWQbia8iy2ofp\nJQpDubaE3d7Ca9RmB7OmcrS917Iv+rqIX93QHAOyEvK1hsQ1ceSeHqOOZi5q\nBwPL1CER7zLvUF6+0lZwE0T5tTA/NILtl65g+MQzUgTUnQMNaIeGPhmzBiUW\n/WtZR4fBzO358473cxCorodMnmqmtVWF7WrhN7WUVXz4H2DOSj/okX3+4pmq\nnvzRI7Jv7REhriJAvEYU/wjOPrexkKQ4kqtiGyjG9FnS606pFBiAcewRYKgZ\nnz9hGJBsyl2GPq1P4Pl6luruMDMJR62N0kAcftLauNh+TUVcUKB1GGKpSOzY\n1e0HtKScMqH589MxBHgRBsFPiFQvXesbwmq8wJN9Qfph5eioq5NGX2KOHw+f\n36bD7MlqBU8Ks9qhZfcRsTt2J4HA0Eq2XyoVUyT6QoEx99fQYF96vk6RqCgG\nGJas\r\n=mtnH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f5246264d.0_1616114287662_0.8461021297720568","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/segmented-button","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f79729de791e4c14f4197d90de5ef8b218e1bd8b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.03d34bbad.0.tgz","fileCount":55,"integrity":"sha512-/rSHmSQiM+w2k0M06ORBpb589WLWd83PTrt+uuEimU5mxV7FjjPuZz+7Bq8y8A7xemy7naQtSKKaaIsiddwymg==","signatures":[{"sig":"MEUCIBNh+RM9QuioS/qsEGL06kDMjk1bhmvXtlxSYgjw+wUAAiEAsKuv4NUdiRrb9xoVwYjrf6dvU8mh+Qj5BWXykSL5wMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WJCRA9TVsSAnZWagAAF1wQAJPtBZ8sxcbrxN7gOnYC\n3Zi8I9UwzWo3WveTr4YpaCtvSjBOg7Cx+aYPcLUlw6D07TvFhmr/ChOCPyrn\nVCKzyOaMuf9TyTzoFCUDc+VBXbo6H+Eq6Nt6cdpvfCFrwPn7C1BNDxxk3uFm\nkiRvfwanLFxtVDSKzm1kt61SFSLrxlGBljx33sffdXKexNNPrd8NMup5rXlW\nI2aikiancibpTF/ZTCOiAKrDFSAV5KhvEagbdbvoQrtoPyZXz4jWbJWehDCK\n1KxQ4wkR1cFkso0wErBf9H3o0IbkJv2Og2DpArpdWATIhuSFhQHPxAMqo12n\nKk7dBVL3LkKIEIWa17zeirphzfXST3atdZrI9jq7dwUWMfzJfzVHQ4GCubu7\nfjiUU4qRAxxnVwn2nquxQOy9Va7SGwNCTjkPATKdWYbRWB+0kqTbClx1u8RF\nOcC5siqckq2WiK8WCgbGZFaLNbujpXO5KF8qzErf86VN2JIHdu7BFdG7/lZS\nP0xX0H+pDsVHXRYE/sv0GShUqUOmVI63xOeRLMi25gxusy4RMoorQDZTPoVo\nBGRkp9t0opnQEUUBqSNH+SUNRV/NnumVJa+WAG+ZS9v8GlSgF5YIHm7wWR7a\nCQWLeQPbexaGaPjCFerPI2CvBFGvfgS6JVM5WlOwxuuwZIs9hayXjUaKpFTs\nGobh\r\n=PS1/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/touch-target":"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/segmented-button_11.0.0-canary.03d34bbad.0_1616115081154_0.3903921491174627","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/segmented-button","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2c35c865c7747dcc21e3ab37a4f06d0c9a317164","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.cbc57c600.0.tgz","fileCount":55,"integrity":"sha512-4JqC12O1Ejpj484g+fWrW0MMtaNplewg6e+KBarg26p/Prd2z6s6+ShBzxO6snJnPc0uiwcJu9c5wzNKYG3SYw==","signatures":[{"sig":"MEUCIQDWwJS69/ERYHSkQENRz0thYHCYDYH5pe+PaGGmMqo/kAIgar+zWxHOgrLx3c0OnJ1D2KkZlcZ6Y3am7R6sEMwI8ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/eECRA9TVsSAnZWagAAifYP/1RAAGbzenhz+3vDCJKu\nspGdTF9aCxZh1l5c4aSlHUP0QnjOX0IF49UxF+4uOlu2NCxuimaDJDI0ZXlg\nTr9NlrcuCSxT+uqb/2LFANtR9o9ShDoBfCiu01cCE8P5UqdoRc+qW7UnweNZ\nxFsJ4lp9Ku44uN7WEr5pPYqMn5UPNW3effm8FD1mEAEaFaxZSiKaQkMn34eY\nfYJ9PMf/3mcznO6c1RaLrrMZ3pCjTyh+m8GaTf7Vummh3E9KOAvl1kJEwn+C\nzRFP4dn9mGuogYp43TbbWSffuGEc/0IxluTAOPSNFtFRlvaK9k8aRo9Lk/fR\nPgt8poXsXwpssr6jQzONX+FNYOkbk0LJF/r0h8IA3dX/pwPgvRn84TdPTmGi\nguijn/NvWFPabVlk6nVJNKbtvRJtV4x0AwUrheH6msXaGwMSnHg9it7/xH4N\nUmQJ+QtiHhTtSL+qLouMpRP5VuZi0ZfqRkFXo2f8WbLlhQB74lkAaLMcO2Pk\nuB/suE0oSD+snceC9A9cTsQ3CeN0km7Y+Vww2nnHO0NWUYO0StyieqqX2Njt\nKKi/l+cCMX+8ra3e3wR9b6Tu2m4VsN3DOoVHN4yDVk+pQrTecGNFojMSEg8q\nYpIZAI6Vo4dc4Ui789zwvC6tno+fhJEajvvOMaR5KgycYI8ruJ23DsiYCaT4\ndVmq\r\n=5rgE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/touch-target":"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/segmented-button_11.0.0-canary.cbc57c600.0_1616115588030_0.6593672923129028","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/segmented-button","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3236b15a380a2566cc5e5da081b42f379f2fb126","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":55,"integrity":"sha512-zUCo2PxLM/ZryT5+4yVNRECMZNhHwFjKk/0S+zOCd15acOhShgxoV5b6g4eMzdF2aoVKbrIxC/xBR3u1S6SnBw==","signatures":[{"sig":"MEYCIQDVoUdkbIo1RHy/Ae/eQPiYIsWT4zupXvRi46mh/tYy0AIhAJ2FaaVj12pPxstIh1is0c0ODKLobZuF+dB5o5mPHqjB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/p7CRA9TVsSAnZWagAA3n8P/AzXWmWyEPSXs+4n5J5U\nVWGP5U6HOxcdwNfLUzwHsDLc/8EDlWGsFtV0lwW33jsh88qZZInRKLpzYbjB\nAVyfht94GAK7rZjIS6t4sUUTljdWX3n5YdAVl7kuWLsJqW0UqIsvPTSuYR8M\nXzTAEoNvQZc3JYMpRiY/pqfXwwy6yJ0M8P7F4OGXBR/HQdj4Zh150WmsiM6R\nQgXn/HKS3lbZeZap/5RzCOwun4xx4nn2bT+amJmQM+dspmZcwouCEBF6hKiU\n4k+R2hvAcxcunq+aLAJwZBVSZu8feTwHOGw81rZBDQI8JJwxKg1iu9K51vvp\nSR0qBVwBzLr5KTC5uipyAK3ME7Wyt+FgyMMRnZtXuiQl5IO2We+2CtFiToh8\nfg/9Wr7YrelhaDLXNsC3YOrQkSpXIYAzJHGgdIHbsFQocaj1wJScSgD8GkJE\nOUbvP1xOYeg7PpuDl/VKZ6RLJ5P86DshXWvDSnYQqQo853YtRTMs8kP6/44w\nXQNjtq5LENdFaiSYz6Tz7QNJpIYCpCR+J8oMBKko6uUnSAjgSEuMSJx5x8uJ\nMWqN7dXTzaovDW6zh25DbH63vV3QXme5g+JBFAb/iCEVW8Pu5BVi8rf0K9eM\nhKKldU3qA5vDafHZQ5ua0F+XyUaxnZGCaEbDAE6G1SV07UgIU4iANA4a/Bda\nixJl\r\n=DB7G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/touch-target":"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/segmented-button_11.0.0-canary.d6c5bcf37.0_1616116346855_0.8152513441707872","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/segmented-button","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1755a46d67c30bd0f6250359f9950562c188abad","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.fefc668d7.0.tgz","fileCount":55,"integrity":"sha512-dwqeez8weeRD8SW6Wlpu6KLWwYa/yXaTAg6o2hz3k04cVm+qxEYkKVH4Ev28hkSTra1ECfQucRt4po1IDmDVQw==","signatures":[{"sig":"MEYCIQD5SlyDqXwkwsnxs77AdOSHw1JB4sMq7QJE99JpTxrm7QIhAPBzcOwJiNv5S1l8Lg3ajqnXdq5OMcF0R3DjrR5S1DLG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/+ACRA9TVsSAnZWagAAMloP/jCbBrHoMUTmwsws+1xy\noOtrOyGDEPcOSFix7Wd2R3IJm08EpNfZ94WddGviR3FC/3ccQBqxUhpBxD6y\nvhsFiZqGjJqjSntNBaYPA7tzng97FIQxjivVskaQkjgwoyadXyQAFWWWme8I\nVOc8m74UF9lx/E3HWbZPgL8FVENHFzNx70yWEgZGNSVhmuIEJ2AUYfo0ZXgB\nSd6rZoOmFvOLKl5Cejau4kgLVkuOT5jTDbwvw/0MmTgrafTGe0Su8nOasVbX\nj4/eKSGb95j5s81maa4/5mRbd8f4rXx2e95WMYS1MRYTEpV/EpmCsNJhwxcn\nRvoefbut7/9/zLuhQ3jVJdKN4yov/+CoD1y0AKMgVteWrwU36htxc7MedfMW\ndbRzOhGZMuJIi5/Srb1FlbNmjXgTeK/ogkFtvNkZsVr42pfxnovPIJHqUmuT\nOec20gdu4aDY/P4wCmWr0LcfNQyGvjN5SLSFHxtEek0wtB157SOydpsXfwaa\nufJDTvVzEmhPmPdZZgLdoIYztw4ulpRvBg0XzdpQncAmaSt3WQmH4YSX3uR+\norLFm5JIxEVAJhfOqR+AU82/lWqeP+CbmBBwCGUokrOrKjPH8264xAFay4tw\nRRg1chGSmQgSWVwj1pVvgtUh5zGjaRypXVNjfH6DtgyqQwXFgs7ugurPtMIo\nCW97\r\n=1tot\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/touch-target":"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/segmented-button_11.0.0-canary.fefc668d7.0_1616117631941_0.6159908756678176","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/segmented-button","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ae2f35bd21f30876cd78394962ea9927c2e81e41","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.faa7d3226.0.tgz","fileCount":55,"integrity":"sha512-/pITG01jeFe+6ZY+2kRW+q713xjKywat25J4/69C9A+F1Owgk5cLvAMZUCZhR8yg1UcYjmoCedhj8Xi1+6lUXw==","signatures":[{"sig":"MEQCIA+Vl3vv+P2gGGCUq9+HmI4hlC1eKF0L6UsmicFx6diwAiADm/4AZLqHgHvdqnJnxFVq5pszxGE17h7PG6ADLUs4Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLqCRA9TVsSAnZWagAAvAMP/2jpWQKvdshSawNOpva0\n42oW68LWLWD+7IITFsF/FCWYZY3gRmngtWo3OYjm+4czxxezxDEqkMhwfiHg\nqbNV1+8b3fV2KfeNozINv2Sgq6jZjh3k77wB1hAPG1XsblfDFP/qDp438mg9\nuBvPrINspGg1EiaTpeKIcQRp1M1qmPlE5W85ZQFxni7fWGf93DhPQRhq7RGe\nD4Vz4Pnfi2+uqNgHjWQ3uIADQeyn+DI5ZUyAtCPwk6R6i0buE6dq1y4rx4/h\n0nAYKEHnZbQ0sShRjMYEuRoWUN5/1X3K6dPa/jQ0sxuyZJxq1lD06riefTRd\nLJNt0WxzwqzboG+msw0KTA2vT+5jYpQSAHn89FHwu0PF95kTkkCVvliwmOd0\nEtfxRtFNhhFmCxFk/p0DQzL7+xzAbHRtc7g/QKLSF63up2PlpwIG0FNMDwAC\nwiD4RvHhUdOsf8GHUYjcL9dxu26QUZPEqOmgCCn07++8k/IzpH5pqX3Yvxie\nlWK+B7C/Q16J/aFzQ43fHCGP0P+xustgO1rgVzhU5T9WUVmwuFJLobGmeV9f\nv6zbLzyWza8iWuom+x/TgaqkXBLttL3y6fQ7gsxMZkyVRajNoE9VpKBZAvH7\nmv6gCa9g1A6Yz7DGmkuZhIGEPMFs8MNHqiUoZlifimDDGo8bi8qBFcajzasU\n5Pym\r\n=8b6z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/touch-target":"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/segmented-button_11.0.0-canary.faa7d3226.0_1616175849990_0.3162615803736837","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/segmented-button","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5f674bf38440fcafc181616a661a4a2ebaa4cff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.c60449bc8.0.tgz","fileCount":55,"integrity":"sha512-02XKxHtgljjYzk7klN3VdA1/1JXeLTTohfEE6qA3KKgPqsPsIoljzqGEaycDDIVbFqODgLyCJ19nwEAKwadGgg==","signatures":[{"sig":"MEQCIDB4avzP3NnULLjnNvi5PpIwIHi3wZKiGiVUehyH6/G6AiARASxJAFbznoz7BgqTuyk8Zz86GvaaW7gtxEXyxs3ajA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfYCRA9TVsSAnZWagAAgfAP/AtfWf0inwX/OG0NqUqw\n8Haih5LIekZuIt8tksOC4JiMlmP2V4l+kp9YBtnXECfU4JFkOdLmrIrAeXIn\n0Io85khKJXRuoXa/tcKd3gutV5xtVs1FxciqNDGPl6pMSCmUVlY4GV51VAUw\ngAGrg1KPQgPP16Vml/zgFUxwXibzZkvEKGgpBen8/UrvwQnigJZZnBdgJx2q\nvvewEduuCqsKBroZbwutXsAJUnisAUBw0tPxWLMrWiMiSaS1KtIm03dtVeLO\nDScQHTI1wUVO0k06CgFzX9CRW45SbpRR5c/MOUNieKCOeJKc8NJ2nBR8n2G5\nhx/D8eDgaWVx18R48eU+nmkZpSD8Urq178McrG9fRGOPiIw+GAPKYjJsJL/8\nhC+WTSj0rJn6Q4TMAtdinfG25+5K+6eZQKS3lV9fLiXQkJ1Q6FzLnz1UB8UC\ntvIp0Jc/Y1ZxlSjZcCIcYbqhj5D6FoGDwEWrcttzWmPKJZV14RNtADQ+Rsuv\njqMCqJRpsEZAWNggd1djyuQ881D/lmfEMlGKPGRbNSj/bTMUyiDsbFIuqBPP\nvb2Swg+HP3bAdAMCBnLSXyhjGA28JxE8FnTXvRjvOB6qfA504Q+pQ3YNX2SB\nm5o5N3wG4MZKyFnMHqT4OkR1+idOqJ6nc+ZXu6Wh/yqjQUwictC3ZHU7WIXT\nPEGf\r\n=STct\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/touch-target":"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/segmented-button_11.0.0-canary.c60449bc8.0_1616177111964_0.9617982945124575","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"38d16ccb87b1184b8aba8c2601778f8d7756ccb1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.5f0fc444a.0.tgz","fileCount":55,"integrity":"sha512-XczXIsB6X/rNaVcDJmUZQnWvwclzlFrJ06Sa4TBra9dW+wmTEO6mv8U/90DCTC2PQhVc+hQmUUToYqjZsaoTpw==","signatures":[{"sig":"MEUCIQDgFisn3UgO+a+9NDPnBzybd20GrVmQzgQP2K95lU7MKwIge740sIjUqjQm9u4nNmQYfhDThfJIcBwnlPuu0W7kBnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO97CRA9TVsSAnZWagAABUkQAJioVBEWnOkcveM6PiQW\nLi7A4u+RdGc5C7HgN4nWxh+/OgiRCWofQgwfqQGcD8RDFmyh9Csdc5/02+y7\nvn3drraBdzsjTvMki81+YfSxFXzqri2Vdk02r6YMh6iE8JbmI34CUjjacmCL\nZC5Zycr+fvbcbZpdC81LKJxbPLrYLmDj6d6Xyaewc2X01djazKa8V0gikvrB\nE7TG24rVlNdZAqAi++C9JP+sJuzOV+pCdWZsycHtkq5hfbqlPBoppGccijrz\n48ltijlPZ8VhZoUNO2ivzgbyLZJWhqkbwUQku4W0i0Mq1L04G6EjbRLip+iy\n2PXypjZeNLFsw9bpL65TNG3vSj4PZZKLclVYBFD+BVQiPTmrzm4ur1jLqb1y\naLOozmt3x0xD94J/TMiD5d6FZjN2PgHkXsEPxNwJBj+TtMu51Zx9qKBic1wJ\n8WSsthko2t7Xm5zcbhcwfSIH8tGZlB5GXxjxfnzfxPAHbTNTB8ia1ULG2Mns\niIC4hagIj7vgufF4waIUJEUWKElj+jFusVfbHURQLWWxbZe/sn3L7jqzQ3P6\nNLy9/moXC2UxNaAldHN1erz8vUWx4DzWQIKA49Jvoii0oGDB6twCcIvhtXvM\nqNOXPj9jVVIyyLds7oW07hxyVqeCqutluhb3/qKMid0deTy2Egivyacwz1Lg\nxxwr\r\n=E/8d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.5f0fc444a.0_1616179066877_0.7091116709190393","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3daee16c6600836950081a86e2e21109e088137f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.4567a750d.0.tgz","fileCount":55,"integrity":"sha512-+YkXEN+p1BFVZHVupeFUq24+81jyBLrQYOOjuBAKnjPYpTbQdAhFWZEFr7rQzKFFoXbigS4lBsAB8WMYzlD86A==","signatures":[{"sig":"MEYCIQCqLRXROYmWCKIBr2b8uGZD0g4przYuisXMUxFpvKY2XgIhAMGkgEXL1/WkZt8JZWte3q7acDwYYisDufmBWJhPeJ7O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVj7CRA9TVsSAnZWagAA1zcQAIjgO09B/+xIKnPm+Ojk\ndHnu4kyR7ORz8/iVX+2v14wcJRoqarPynqxUrPcM5NsMVVqZ1qb9XSwCFltS\nPGIeJPhqLM3RAFfulvQCTVOV+ddmDmAsc8roKPcTAsaWQXuVe5pR7b2d8OVE\nSQLI6S5CHRnvfUMj4nrvoyJw3Bhj0a8qm9rPnPUE6fMm+0bcOJl4QHHNzt+m\nt36be3oPL0VOTUijim8lc8mT4kUfyn3Fxxd88//69UrnNd864JP13af0e1pU\n0JHFyvbOPhDGApPaGckHT+BUP7mCJaeJ7Eg5ZrYNwsmlbt8z6z1jawoMYxZB\nWL6ZuBwT9D7j7ZUC3VJvBOb/v6dGEp8tj5VBLSBIBYPYiqJpvVYWY9CyHjoV\nm0rWp0D46GeyfxktFIgM5AnD5f+FptIo+qKd99aXAs0Ueizx2tJypPy1w5mj\nen1Ex/+TLr0R9jaeQn9dFclZiAXVcx6y1PhSO96epp9CaTxZDbbjMGmpb0md\nc0iv3IwJlYoDZ/Ey1kMVhIksV7wj1JSFlzR5j6TBDjIh/qk0xU0Xt7Jczbye\nTNzDWmPs/tK+mY+wYQh/luHP9xHvSUDF3YOo4rNuluTie8nC2cBDg/+2nfIJ\nRui6gYcRw6JISC9DcvsiGw6KuUSDkdQW3PTQdwHe9NTfapEeJFC5Dy6/o6Yq\nVx+P\r\n=7hnj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.4567a750d.0_1616206074659_0.7970897351369184","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fb69d1cfdf1a981e18c28f8b782d0aaee7dc88ce","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0cde52f5a.0.tgz","fileCount":55,"integrity":"sha512-nFCU2U3NuUO5IrJi1Z8GHu8azHdtyv3E1662TIikGLxVPrWRF+2P3N7bwar519ch+4rWDSMi1pCBx5ZZJra0Tw==","signatures":[{"sig":"MEYCIQDCSK87/X2G7rGTgUeiPR7NXM5ZErPTg/tyTm1YQyh17wIhAKBpKk7XnkHEz8l2B3M/JPWuS9DoiyKh6LOWzOOqeDb6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAyCRA9TVsSAnZWagAAWE0P/ArkLwQMVyVKZrOnBLAV\nQmXmtvWlSZluIuCleF62UWYJ309H369VecfXT4nnIZwvj7t+aNnK4ceGuQae\nzT6yTEdJxDQ9+d70bmw20z+/Cd/lUyafHgPsRQ/g9w12RuZagYPIkDu8SyWl\nG+sUnSQ9hxdDF50GdXE8Q1UI9CWeeHT22wx3FRCk4Zgle/UmgOZvwOu9J/7X\nSTxx4TW6caB+EkbAwSKDJ65+Tga5LNd29XnJy+7QGIrTMZ7PAQZ0X8FFVoww\npkaGk6+MFIbI0uko6DWF9EfITIb4jloJHkBoaNACvOaIs6ujiRt6rA2ocQso\nNSwP0/1BgjT8dA5Ohxh7NuLr0TM/3muv7tYNNT4T7RZYIPtdn7KCXYljj7+9\nJBL8dZir5XLdZGJIB4Nyvx35YY33i0Gg1XXEqnVpcRZEgaEeR+GMJDHmqvhR\ngjNLk+R5Rb0/V3Gm1/zUqYqmqYR+9/e7eQ39UMTiHcIptTtYVZAjuSr9limx\nXZUMjaT4Qb40ZAvI8fCNELNOYfRxghaFjpjTiHLXIYmglaGNvw/dn1IgG9Hk\nEc4eJHoAiSpyiaz4gr7CReqC0xhkwVek/QL4JdjIqKTUrgIW+d8NpItww1fO\nma4huKUCfI+xCtU+eLWJvoOfpwipVEKskVvZEckxBkwuEZLmIh2SqPl0c+ZQ\nGyQq\r\n=Yx/m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0cde52f5a.0_1616457777893_0.5682287974262548","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/segmented-button","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ef087854e73c3eea4cc9ce40a27d47258997eff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.48f4b67fb.0.tgz","fileCount":55,"integrity":"sha512-9DUSEBVRQJsSCxxO8YiIjdB2PDgwi4moR3RMeHXV8Z9/+/UJ5nbOIU0i3HuiZti3WRF5d26JnyDFNQwGaibnTA==","signatures":[{"sig":"MEQCIGWdXkQLwkUI0ScFhxjTg+sfb0kRvvYRDsEwTkV9KwYiAiBNqS7QuctRn5dD0KJXZfB0uGp0mlEjyAGqBUcvOQXLNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdhCRA9TVsSAnZWagAAvB8P/29Wp2HUQDhBukoc8l7H\nW6o3HP6KG73wnKD8uB7yzXCIbmqVhR4N1NJX18WR2wGEruAsR0pAsgP8YN7P\nyYqaZSSdG0CQvfrpHDOeTLeHJvFRKw2TqMNssXXunVzzZ+iwOsWFX7LD+Kzs\nwYrtHTeTEkaiuvVvA8OPYlV7DqzX29FIwTXt92eQKBElGaYcicVCRR7e0DMq\nQVKWE1mHM6G7jDpTfBn3cjxwZXFwN/150NUennI6922A4OKG01sB3wgeQ2WP\nsp2V1D7H9mSfRCxbnrdsZwI2aLupWNMXj+QPDozSLNsbqZqjY1BmeQpZ1wPO\ntWx4Ck15n96+UnN/NQwbVX0lUrJ6BzdatSW73Z73htq5Ir960a3e4hEAhq0Q\nWi8o/DcRHXgCIv/PwVj3ajL+sD2IDN2oeIi5q+cZs9LBIcVG2vfh3OLBxVsc\nalzI+im2hMOICQNkZ9MWRcenZzjeqVlBFoUsL0L9GEYyQboQXhZge6TiPOEn\npJifArz1Agd8dQTRhKQlo3tw5t5RYlmFt2aJVW0IBKAHwlGVXC2GJuONqGmB\nbFoE5RHhCU5zhEtAspYKKIZtzc5nXCvEnSIeSere71DpiVpzakvpAsWZrFBS\neKgpORlYZ+bPo9v200j8lQ7LmYlPBIUYLD65lHP6B6W7ZcIxV8cWpdluxyTR\nGb1D\r\n=I4GY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/touch-target":"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/segmented-button_11.0.0-canary.48f4b67fb.0_1616529248727_0.18711331335276227","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f0fc4638eae6b9be22bff0c8c78fe0627d7f0387","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0b8cff734.0.tgz","fileCount":55,"integrity":"sha512-gyKGfXVN0oWvb+jwi4rSEGQkYAWFqNYEK+maTutlrLGnNfCp8BGR0oLVmml89eFJKU4z3phVVdlqdXfA0YndNw==","signatures":[{"sig":"MEUCIGDlRnTOuitKSuOtUot+/yJL5ApADwrC/DBiroBGmstcAiEA+vCuEIwqyK5weNPRV2DT0g4skrxFoMQ2wEdlhZ3pWK0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknaCRA9TVsSAnZWagAAPTAP/1WuTAVnF3y4DB9To7rI\nrsZQocco91cp5CeB1Y/S2mT2TLhFyYzuAYqGfZi3HV4B490kxwbF5n4hgv9e\n72RPga7Ktb89ZNYdrxlqK6Ohid0wNxMne+nwoBTCxDHbtnpazm5n87zFik/Z\nRgM6LEwaWaG7u37NXWWLvyQ1rPner1Hu0PUJ5wJsdFpjKoxuUGguxwVdizaD\n/KUCJNVBXTey9F8BbhwnZfBhhSFDsVSV/rDS8sgFk9bseThTN9rbG168w/0E\nKTt4zfU+g7OqpmIFNwEtPaDp5N23wA1VQWGg7/EwwFHOtmTKamWGiC9ybxU8\ncLlZsTn7+ZUPOfXlYc35qZmIiaRgYOOQhQQMELx0nHx9jGebERI5BhTVfRdp\noFtsKbq8kg0406+Z+RSdiAOB/6X8pFRLybsgCSq1xAt+qPb+sXbYCHIxSw83\nPsNLMUDkPqI4tETeMAYjpkCIpUUbPhq+8dGevWmC7IbCetoxdbJOWNtaTzMZ\nTs7w7RnpXuHvcy4f/yxC5lrm1shc889h3FlrC8F+b0SX/XJx+p513OBrmQIs\nsAtstFDrIgQnUt8w9WjHFmCo1T2QnEkluNwHwKgpioqGsK9v2xvDuv3Oigxn\nHFvF054VR8mWYeriZjGOiEtkwKTrxS1HMQk6zsn0zk0BcPPhqI8AXhAMH1YK\njllX\r\n=GGSP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0b8cff734.0_1616529882270_0.31514956123784543","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/segmented-button","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0b402653bfe9aa33c202e3874a7bb90dcbff4f0f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.8943b991f.0.tgz","fileCount":55,"integrity":"sha512-5B3R1glF8lF9LpmaZ2I/KGWB42jFq83MFYcGZkG01OCImBf7IDGd309v4/RkVvh/t8KFd1E9728e9t1BIAFGeA==","signatures":[{"sig":"MEQCIBK0nzcy3iaxL1S6TjeDlDvDR2FQ23wLh8Cpctbv1fG0AiB5rriGg8pud1M/QzULpmP7BxixaULApN1IEa7E/4ndzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+3CRA9TVsSAnZWagAA6roP/A+KvjbKG3W2Db3QS1tS\n6JHgzrBEdQgLSOW2I3u8AE/LoseSuaLhBTY3Z0R4dQEpt1zfgm6rKDP8e9mR\n5zLy02MCagdST4E5PErh13NXCinQnGFBg6XKouKL6stv0r/8WogRyAxiW11k\ndDEvnoeyDkNOE9ubB/hyZFSxj1Bx79+qOaIwPx4b5xBZnQDMVsj69rNp94O1\nZPQEfApukC941zUSPDBU0v4nGWcm7VsqxBNJZVQUBuzow0XocZF2Ct8w6xcR\ni42uGKFWw3b71kdZbh04X7RrDPRJtcX3dhugneAgcfHzH/7Pja+Es1I+poZc\nFlaiaxxZuu3ia5sWzVD9gfwPm3ifIBgwz+T4hw1UD8PDlMJz0ToJBxFZBN/Q\nsMzz41TyvJ1M8962r5e4OpjboIAto1b67ixZnbZtwngKZfmPP8vZorSBKbLa\nt1Mzye3inf+UqC1ezO6LH7f1dwtb5mH9uj/CFLBreCJ8MjLB7fTN55wQmfnP\nsXT+j42Z/rrgzGvNIoJ11DjZo37IR1pHYQESMl9zsr6J/nxJyTLK55NxnQxB\n3RblOCkl5kE16pJefk1Jrx2NkumWNzXYYJYb2ogIRjjOl2zXDC3urmb8rkro\nWFUoikSFDfmaI80eeXgrdadoawaQv0d2sEgPFg2ZPxBC1y30p8c4FhYoWT0/\nz6FD\r\n=DKpn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/touch-target":"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/segmented-button_11.0.0-canary.8943b991f.0_1616531383397_0.41534147749347095","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2ea3f97ca31bbed6a211ff84dda57bdc85dbc706","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.3955d8d3d.0.tgz","fileCount":55,"integrity":"sha512-wYM/3fFsa2K0XBVStgsG1jl4y+cdndp2WDenQXi2oFsrhEsWX58lmlqrl2OwrbfTlFax+F8+3+htUItAyglgJQ==","signatures":[{"sig":"MEUCIQC0bLSq5+yUXm5R57GoZcmrU1JbdGViISIXhXRANfsAKQIgZHp1cziRGRHA11TZUk827aGcyfSslIddk8rQzrIGjPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AJCRA9TVsSAnZWagAAWcUP/1LAyYFgg4LYM8LRVLBs\nNJYQs9e4pyKnO3pDdmHv/uVfoy+OEN+OXanGumXRWPeJ32XQgzxjRT7ttmDi\n2AH+CEv1oYr+waFcwNIT6JdHSkddGw9fvZID8mOn5q9LoSlPaSnHAwvbU8Uc\nvsXC4CYEC3EAG5wwxRETCNPUnYd++hQRK7by6xITDfKLENNO7Y0KGyymv/+t\nQC5fm88b3Duy1RJgCz2KLU3qPDXgxhGM+Crs6b1AOd8unJfCbP5GFxd6Nku3\n8hMCcZClx3NkNh/DsZrvtrn5DIszYKBGjDv+ltNcW4tUZrzrQ1786rTZ6d/k\n6o61k3BR1d1EhbjKzBoo5mWFpft411viEBfvMxs7xz68KxBCOj5coO/uf207\n6T4FZEgLzzxVdqJlDGFifa+QhZey4PGvzYp+DXSJCcNyJ/xvtqo1ZhQhqkJX\nlnaTox+h6EPoZh48QWrEVI/HMl5zJwPo4vpQPoB+VknGT5DHS331jMnIqnAa\n8NDGKArFsngXdYm0uMyrQ3XhziTnIRSkvTgfRdIhoVrUn/YxSnBEx4yI7m/q\n7qWtmSbB9Zh3iWpnaFhfcjXQkF89xhhHmQ7t/Y6xv8BOvFODSDEZas3reYgi\n2b7lGVc5aH8q3TByZ3lAJbsXBLuh58/7ta+ths/rjHv5dvOInIq+dDGdN3HS\nOWQs\r\n=DKvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.3955d8d3d.0_1616613384862_0.8114289178370706","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7daeac08773fbbe592bdedf68539031f628f4ff6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.23ea2d85e.0.tgz","fileCount":55,"integrity":"sha512-BcDz9KtVcn/FOBeDtfEHHXND6HB710jfLSbzGdpblGvgwbFnJbxvXi8V9w/vs2eqtdZ3rT+zPFW7JpoIobrJdA==","signatures":[{"sig":"MEQCIDTnsonfqMRTzVaR+joLAQevMH52bXcoknVmaz8lbFKMAiAx/yK4JqI11GxOildqrTFG9RrVqFwOtZcl3YtzrjK5xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMk/CRA9TVsSAnZWagAAkV4P/1QMI8mOFgP5sw1Jf750\n/ptxcRG0wf/fpRmG6JN4wVHqiL6HlxhXQrhilxJdOhUZ90d8PWbTGSSqm0tS\n/2A0GO2f/9jBnW8i9Dvo7kmUgpiGwUYq2VcM+kzbW8CrGInC32x7uqlyvSap\nj/1Pa42G7FHVtz3It+ZCIFPo9vD7leNhXq68KHnUIn8zBuBdhmUqxz2VSvxL\nXtu+99skxkLw5be9dja0G4d1JC4rRK/UJayyoW/5kuFuOHtPuB6tMTxINp+F\nnNIoJmy9ShrJDsnH2WFA13bFwwoBkCm1ia2Xuh57Gmpot+CMoNkcHK+LsrrR\ne/+3yHoVPCOkIkza6v3xLqcOey0m+4KbrI4YNuwk5OIK26FSyACN8xF+D5Un\n7noleZGc5IMCmvPGCj6raUmTmOM4N2NF0pdYvewqglEGuSPgjdkapRxIkf0B\nrm4+tXLKSfN2t0v3+SkxZzEw/OiTFmpDEQzVOpLgAfcVKbaDjcv8x4KpQXaV\nMpxnM/K44Z/qYzRjnqm732usFCAqkzQtZ5io5uDLdfN8vdZPY4+2ZpDac00L\n31XgNgt1khdnorF3VrpPgbQ95FmJKj6rQsr0QsOYs+xyo2DkEtEW+vgAyVgP\nfXfSc6j55HtZSyMq9qvBgN3V2+0iWEwII9GpkonraMHFEvmwN5/QiKi+TfGk\n8dOd\r\n=YdIE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.23ea2d85e.0_1616693567430_0.5568816115057709","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/segmented-button","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"235a7f2485f31dea2d545d4141c5faf00c546dbd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.e3ec22f45.0.tgz","fileCount":55,"integrity":"sha512-+c0mboEelZT6J4KSPN8BJ2K5m5tiu2n8hecvZM13X53/62O9GE8XpqGjyLHZteqfthiLHVSgGpsBts0O5JSU+A==","signatures":[{"sig":"MEYCIQDC3MfVm7wkVOg4amTotT7WVHfPhkweow37SO9i9Lib8AIhAOslHDM1GW/6dNSAK/3+jKFHb0JNzM6TEIQp0AImhacV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM7mCRA9TVsSAnZWagAAMj8P/2c+YgIabnc0VdcTsZMM\n++JnpFvrv2LCY/49ZGLQfPAiyAAk8cC1iLIYGtRiv24YRIfP8qh0fl7N0FYH\nSu5l7JTytsJTLgPGXzUOEEG352+dhZ1fxa5H2xy62TQVmWC8hdryqGsHYxUv\n0vFrSmU2y/opLBe0W58RN47PhsGU/QR6+m8nCm7V07xpi/KH76JpCv+l8DSi\nDVSHGMCzUPIiNHIVjUfJxe9xfde6xz6EiLs7k/9YvepaJw+eG4/XdxOMOHbD\nRvAB3R5NZJDfaNY73jne71A4umTQlqobVmr2oSr9ZoEuaD43cjEZ1cwr0Rm0\nExqPfkIcvJYKkhwflR2RdwSGngdEauwi+hPBjJtvJECesnvVEMYJb0IoIQ2n\ngPmjPRoFvW25JMb/NtCHV5e42aEnTuI2eqThdl/B0+cX2XU5X+ofk/3yhZ0P\nwhN9/WAVAmBvPmOl8wkmBOUJy+wlemtZPzr+20x/bY7xhPnWPNOdWdSecGr3\nBn7CCW0AkWnUV8AL1WdlRq046/v1KJdBorLo4ucr+Z2qji+s+9hcoFbkFLN8\n69ziIsh9xw/6O+KjJT8GX6kWpHT/nxaNH4eCXL7PKj7O64Yyh8b1FD0DsQfD\nUIialK+og50i+HUi32ZTOHsYFOZwOjrruxGoYj6Jbp5TFRVtA9uhkSRJDOOa\nVcDf\r\n=yGkx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.e3ec22f45.0","@material/elevation":"11.0.0-canary.e3ec22f45.0","@material/typography":"11.0.0-canary.e3ec22f45.0","@material/touch-target":"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/segmented-button_11.0.0-canary.e3ec22f45.0_1616695014276_0.5187479756518394","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/segmented-button","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"73b9fcc9d4b44aeec6493a2d109ba94e75b8a3e1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.4ceb42220.0.tgz","fileCount":55,"integrity":"sha512-Cq3FUlmITVdGo0Jjl4G87HF0hm9T9rOojpqe4gYegjlWuy87Irj3tNw0I2ZqQc+6ixNc7Yk15qTeBJUJrbgK3w==","signatures":[{"sig":"MEUCIQCstv2xl++0vvDre6p1jmZIvwmF0hen1qOFldoz3ykDAQIgDElxEfDLWcB6O0IjEWlfevbgoNz86EBNFju3yTDvDbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPsCRA9TVsSAnZWagAAhukP/0rjUW2dqxcRnwU8jMVl\nswRIWEmAnRTokrspVX/g7+lgTTDI/wMYZD6Nd8sinXQaUOzUUL5ges+KCBPm\nAx55BlpkVfT7H6OOSXha5MomeiyOzgkvuFW5I22x0LHp9MiRLywn+fFh1qCv\niDbtB4o8cbg9o+Q7I5hdcRCgaxXc2+13OC5aexcHOm8janUdvkJw9donRpwU\n/QQ2RFeiRi8dDOoPIH28eXf3phkCc/enYjSZx0dLYm5ImRRg1QhRFbwlZD9b\n7uS11YlEkMpii2GOILJEcov9uzn8qRLYFFfKWqGWPtKAq+ReMxLwf9ofDXke\nGfM3uO44EySxxZxttcO2Io7cwmdhoHuT9PEvzZiKw11c4Nl7LF8rgao+qxRh\n0T7ETSOqZ2Js65T2Jp1xbQpqrzdk73R391w4Krb0QxA3wkVUO0b9zE5yWPSO\npWHYyOMI7qSKISAE3/vwYsRE5BNiMRs9kebwe6qUBT/S1iT4fQn3lZU5POBy\nuGd1AoK4rbqIEbQBJgQRyCfMMa9aaWwBJnJvvasNjFxgkAn4rbvl+EiiPuIQ\nMWN0zxssO+06J7MjLYiw1R0tffMdK53cOzUCcXAFud9ayiE4mVM6+u2vT0nY\nC/lfzOpTR//Rstaoxs9d+uIlK7nxwDpA+f5+IhZQrWqRZYADznZ3sujoUcIi\nWUMn\r\n=T5x/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/touch-target":"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/segmented-button_11.0.0-canary.4ceb42220.0_1616745452527_0.9266535751385483","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/segmented-button","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"144d039d26506ab7c7b601783fa13be53d657fec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.dc9c84023.0.tgz","fileCount":55,"integrity":"sha512-JKk9HPMPEQHhxDjK6GxWEBq51okc0ozRyn0WYeQu37GZnLAHrZSQDWfIVRFcSimTxiIl6KPJhYuOCrFfV2PPzg==","signatures":[{"sig":"MEUCIQDDJC19wGI9u7XVevQ36Zu1kfbhj1+CLqTu0wbPvGOmTAIgfwSdMRGl5icN1oGRcY3iE3QdcOTGaanVuBhvlO1FoVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2R9CRA9TVsSAnZWagAAGz8P/2mM6wGxTibpiVJIEh5t\nmwzr4TFFz5GD0AWqy/b/Pri1sWzJiVawP6uyvEXmQkrelrNKQZAJxfMwy1lb\njqJOg+i1MqvoaQTZebS4ST0sUQUv4zVfU8dbNxRvviZwv8qeBEG+mzpZA/Lq\nYVrfBfouCtalblI7tEgQezVto+IH/jvzlGw/JJLcMFYgQW538qP3+UgNkyrY\n+1xn8Vpe2HpQYpq7uAOwtlzKV1MEHEKHI73BmgW2AzdYE5658EyWKQE2kypU\n2JJz6hYMmK6HvwHhZBSK5NgzilFjBvlMV+eqaiPNm39y8pWPmvWSaEjig2Vr\nEQm3zE53SzIlU58/I1GXbKU8wACyTb8TSOEDQStkM27xpBxoIQWM7auIkFIV\njj1hLI+dvSFkqJr+2N9CyphSAV3pfwLQqJTBdexYOTGyG4Q5/TNPcDR7inLV\nYYd71bkHhb7qqw08uxoWEyJXcGtL3uwIYObPL6KOnWqXf2zlxSZ+YtGUjo6Z\n1LpNhIs/u+cNCPZJVPUjEwD7lsy6UsQIZ7yXAVIPtZQ/kgfdYkxRlE5f+7rn\nvrTILgy6+kEwbjA4xpkg5J875N6r9LPFsI6PUZxKOWM3sto7tW9Erx1QRskU\n55w70emFL6NPIJy+om+VZYni3m5kXhNfhTpq825qusSLqtKGEwh9DVDOGr6Y\nwBUi\r\n=ye1f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/touch-target":"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/segmented-button_11.0.0-canary.dc9c84023.0_1617126524991_0.5840541314787124","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/segmented-button","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"482c8d28a234beb6b46dcc721059bbc137d429e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.56fc26962.0.tgz","fileCount":55,"integrity":"sha512-EJjF0us89R8GKVVMymlc05fOM1wwZEUXUYzhb0t8d/owQKAd9wgxnKDTAoD+2zyJonbDO4m+2KTTRwbSM8DHlw==","signatures":[{"sig":"MEYCIQCeT6oLhTPGL5kPk4D49d6xzcmWaDVy8o6YLRyBeuJsEQIhAMY7zj7Xemit2WBxWmx1HXddjkjp3Z/cGAqgdiB2jGgG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BqCRA9TVsSAnZWagAAfCIQAJ6dodcp/x8bBzdUjK/9\nPpCsxry1US4oIfWLGvwvdRa7F3RTTehWU6eUysHdmej6LgIHAFWFILv0SBFs\nM5fNffbsttRpQ0U6M+FwLcp7SuK1OoCG5V+TUGK4cx6qJ1oqO4KpdoE5cdmL\nvs5mjZy2xuq9rIf6z7ay/jACw4fV8EPCvzdMgt3vjU90XNVucN9p/V0yeDp9\nXCLsDKlGyqi1ywn4dQ3Pcn+O4vGcv8Cj5AY0yFeTkcqUc0QDUkdybPGK126Q\narKgreDnZSiF417BtNsg4rJBR7uOv0zLcdwm3KiH9eIfu5g1udbAGPwOP+A3\nZgxnN5s97jKvhUKhTpLwkNwyDZWpeL7BJtA3r/79UGFvkQewN2UB426Qo2iu\nF7AfQ53NSuk8WG6SsoskcR31yhtAKij3dZxCwMRNF0ZcPVNs6dX+UgTPHGSb\n86RjR/41X2RDWqmtbtspBRfBh0tCD6tKnEfL65Ccjd1F9YtUFEyW13/dHnhr\nW/fauWRIMBD+A7uQVWIft9eejB7pKT/zsgtQcCxvK351PNQkILCJX1xhMjV9\n3tAbB9YZHt278h0loTB/ms5AiDUvxoOWo+9bf1iQq07SzzL740V1jRE0/AlC\n6CPYu7a4KV8PVXB8XmyszI5YaXyBz7ozVK3jd/+Aw4i5hXoNirGMmltAEXVZ\njqo4\r\n=VDhQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/touch-target":"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/segmented-button_11.0.0-canary.56fc26962.0_1617150057226_0.5571062564412472","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/segmented-button","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2145f61e7b529b69136457ca45c69fd9bd92d28","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.bc318250e.0.tgz","fileCount":55,"integrity":"sha512-qasXO6yieaXof8Pi5Gyn56yYjbUWAJIMgKLYK/odoym1ACoERZdWMa1WzDsS2kVrzWPL9/BM2CvQwx02esh4oA==","signatures":[{"sig":"MEUCIQCWctOxYDSs73Nbei8SfReDKg384Sjhpqp2zFBzTXsiGwIgBbIGJfpmWmVsXC1ixHqcj+J9evGzVmtRdiBh0HOoR5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9F8CRA9TVsSAnZWagAAaykQAIBqUpQwxxXoQI7fHzxm\n/XTk+dpNHkdlAIcO1WixS1TYs2ggSO52Flux4IhrEvT43fVT5PwMZnREmtRp\n+t8N9JEPFMDCfXIey5xid2sVk+uSKupWVnTYjjmcgXdLaw/8IO5ciSj7CqWK\nt4XH5s57JMSGUqd/ky4jJK3Togt/pdarFKBTdWJCK9jRo8Xot1uQW56RcapS\nswVEvew60gqn7Vp4D5mHIVUzU9GhAEsZhxXN9WI2GhqBI/mPXmXdmJ8faHkq\n2IWE0nQaC3MwHQ3ecq4lAzloLnjl2XbJj1Dtzwo4TVRuTkGjdEsUjk+N3UlM\nidyxKmJr2Aw6Ew7601/ADBEc3nQoK22yv8b8FonzpEyAJuPcXUxhAZ5Y11vK\nA4J+XcH0Nt8N4u026jEGINC68N9YfajcnLLLSlLNMOoNz/GLjrAYI9Uo1BSw\nPEzeQ61KqSkQhFKeuKBMa5zJuv/uNR/2CtRCfohzeXBae1BOjJm//h8FyclL\n9cL4xRptPqZ2N6G0SNG/NJi35SSMd9VbsPYoh3SnmTTW4v58adA4f407PSut\nseesgk1MXKH8JbEM8ZXhavKf/6F0je2UVaBh+NxWM8XXX7dtJMOibaDeGC2z\nIBpUCIhbEtVcaH/Owoetf6wbeICBZk46Y82qBBbhGfUiVhv3n1CZ7lR86ArR\nRjUO\r\n=r8k+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/touch-target":"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/segmented-button_11.0.0-canary.bc318250e.0_1617154428424_0.9993736823334467","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/segmented-button","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1898cf500daf3d35d50bb5a305a0346436fc80bb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.edaee19aa.0.tgz","fileCount":55,"integrity":"sha512-qGsAMGUWdIRkwt5taVh/jXPd9MildhAIcNrs6KNDOwMWm1jXdECGuSlxNCS5fhJWniYymHzJw1CMWajD3lmVgA==","signatures":[{"sig":"MEYCIQDTF3R1pPais4hUOoXwZgJuY6jR54Zs9BYqAD6lnvB9PgIhAPbXjSpzbxh/mYHBMNnvriiqiqCyKc23WQAhGYjHlzsQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pgCRA9TVsSAnZWagAAlGAP/1xtfh0v5oH30W0Zlfqz\ni09k47JTzxoQryQoWVn2C/43lR00En2YkqOD3eHbI8bAhTs1lX/1toToY2R7\n0TwL4rmXOx3SbtRvwm7QBtrDCq3xNpWvWI5etEDYCOZWVanup9xuHmcn4m6y\nl7ZUA3yXYpADjV4KMp9NP8cm5VvYG+vykmuV2onN/09N2EH0TRswATIbnFjS\n9gqE2088djyioyfzOTr0yGH3YqtLhttD1YjFfzQNGAYXqLnGDM1W45DHUs8p\ncdZDe52+AO7etuOQsdOUTO5HFjKVNNNHD6emgn1MS8T9XgKx6XWrW4i7FWed\nUHuU/A/zGCif4AFhJaGNMmaqXsKhNBitXqv3ymw4MthcsoY+WGkFuVlxe/PA\nP5xsGQDoGY7qYlKKewj8SJYruA3lKeTidGEEMYetRKoLcj6sGXrnaK8arKRb\nSzWdR2XlQgP8wShxkUcgB6YDEt+kD+DDvKLGItjVjzJK4Ml3cO5cLDyRRHny\nJstIbOyCzULpe1xz3E6MNNYqo/BVztWMK2Lb5pBQBPkV9Aqxlbbu+utWKj9Q\n1VzZotcHLkbLoSz5a3r0/CeDwGsV4AlaOlko8NGCMsIS+tFNTPpHlB3y0eoD\nH5CuOl+XeJ2LEJTO2VPYBR0Ue6YXOkyrLHfam+/E46k6ZxIpok3WfyUumECj\nsEef\r\n=wwVv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/touch-target":"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/segmented-button_11.0.0-canary.edaee19aa.0_1617156703879_0.22661055229357685","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/segmented-button","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c08d86c514945ab8edd2f3e92ce70a23b7e3fa7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.24609b822.0.tgz","fileCount":55,"integrity":"sha512-SS123KAYPOZmiuI7whnAmpbZFxiYVkpfSLo5RraM8ZIwhVEgk7QQ4aTNGDcrTm793AcH0/tc+1ScQKXBiukg9g==","signatures":[{"sig":"MEQCIDC/79MA0VNVFldbodOwDPTie2Jy8x6Es6mQdVI19YRqAiB39UsRhtrH+JT/L+2nF1tjZ1GeuapFD1kbkKcYB7HXYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIqCRA9TVsSAnZWagAAmSkP/0xqYGz52sLeQs2tza49\nLN7AvoU/641n1xzVJidoPKktVNrSKHO3EF+HkG+QfEx6nRWGePEEVk/xfdqj\ndDjIG5N6AjgxTxH/4KH2Cb07WAypL5tyVmAj0tQDHCNJ5gD7aojNoAHetBpW\nweGFVMvkRr2+o14wtxdFFku9AATIFhIzM1co2XmViq7OaaHbQQfvUEtdfe6I\nKzlNSLqcLjAG/plHwJ3c07uUuIdZ+/jpIA5609DQBAVAJKX6rAsPBxIRdZ+v\nN5S8WJgp6IKsQzb6kLGsxYKT1Yy53s7KWERCUZJPvbQBwC4wxPDDyUSLrm/E\nsfhH/mr32iXWge65900DZoItB7n9JgEKEjUh2LVS2F/wUtQTVNicbyMb6m9v\n9fUB+XQrmkZ8OvbHrHxOY4MRoxFDWK4twNCsIvEJpVqn0nJ1QIJVFQ+R8LtM\ngj/B1KvNfbjIt4A1NathhIRu2i0p+6V6KJqrnk2CSXUJd87KU1/QaDmydjrC\nje194T9GoyW+SNJ1kdLCuNPfBIIzqZjhLSrsr6paMaZq9uozUrfaZHr8o3GR\nDBM6Nz+Py62wNBKg3xrXUz8mNskFaACO0kPtU1KoXY//q410WUJ1uUl8WFVS\nlr1jVmUQqF918fVI7tKdmj39Lo/ezihyK0cd6K7RSKaQrHIAA2Y4g0MgXQkE\n9y6c\r\n=Eb6I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/touch-target":"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/segmented-button_11.0.0-canary.24609b822.0_1617224234522_0.13490811105352418","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/segmented-button","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"68751e76e93240873556b015eae9a2a51f07f28c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":55,"integrity":"sha512-ZVCDDYCCnjqzk6IDnZyajYgbONQixbA5lw8ea+Zznn2jJo95G2qy0aYvIQ8I+S5ode9JkNEENUYm1K6ae0d9ew==","signatures":[{"sig":"MEYCIQCBzpY3e4LSWpWJHwbRAQtELz/+Z7H24cNasHHysEfHMAIhAK5aqN8Xmxz9UrkwxY60xECKSgeoLq238T3lpVq7mFNo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeE2CRA9TVsSAnZWagAACoIQAI+gmifRYwR317z4atPt\nGmXanhq1yED1/J3C6VlM7lC7c7GI7CjBYd+TudkOZ/fUcomUSXXUnAQFUNkF\nEATlB3Fnr0nvv0PWPy/FU05ulKISm+L2llfP5DxmQLCMWyN2kKDwFi2n2NHO\neeBbXZGdyEGVc4E29X9rmlXBG5CH8RJMrEC0w6xNW0ueNQtudnCKopSuYfp+\nGTJ8iaaa5xaJl54ClwSZOekfurUbzH2/YL8/E0XgXBqoBAnzok+cixOe7O5k\nUtY92klNq+iIgN4Dt8wqafSPL2RlyJfmeGnmWQgcEQg8t2hd8KfViYfJD9V8\nx82QiKRe0j7f6vryQwgbsiG/Dq0F7cJsDccBrgqizXzRS44lp2tM7uBTN3rL\nPpp1Co/z+rc3ohefMzhbkDrDwjHsuT1NKEQfoBjQf0JYmrkXfWhQyDObB/c7\nYOQvhNRJGLF3HM9zRcpxyYxDPaucTT176FzSiGYtwaZDD1Q/jdfqR+Zk9OXp\nAyCsis61cfy4sUQjC2xwFZtx/ZQ88vlKQ92atpU27dqZy+lt2KVYIf7iY0m9\ntiG642MS0XLHcrZHBWuFcW2JCmk0jpPb8hbC2Q6Vt7cuQ99aI94Esgq27BvG\nQ5DJVT9+snh8V79sO+UYf56qVt0SubU72wPpMsTrZMKEgP9sLx+GGGCzuDOL\nl0/Y\r\n=+k0F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/touch-target":"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/segmented-button_11.0.0-canary.b6cddc2b7.0_1617289525193_0.15710344490199457","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8e9a9e45d529b335aba91e9007aff3363c593f71","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.94937c78c.0.tgz","fileCount":55,"integrity":"sha512-RoaQTq6WjkxbSGRPYBIY+bS33sQlMEwVhhD+rs2SY1S63Kktgd56HI2qSz2+sAK6gxWjcje9mp2PzfBJOnI+FQ==","signatures":[{"sig":"MEYCIQD/60TC6DJJObnloCTaHun7d9yECzD2UiYLRHpKksDAzwIhAIbC3iTw+3k5RrsvpIoSG0bPu4IpH445TUj2RYQlMrJG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSKCRA9TVsSAnZWagAAH58P/jZO3rRKjWyw5Bb7PTCH\nrfQ7XJFZMmLhPLOGgRZnaeVfc6d2Vt3eZmLoptt5ddquv+dtx/KQkKxLVje4\nTVmOX4TX4ONuqBLZozwafoEk1sDx0Ul3JmCI0cC3FetsRoOPNMlRVQY3brMS\nRqCKysofHAcJF+iLSOOTlOmrx8BliASKZJ4J4EwZSec1FYAKQUzBvFto1U9F\nE8+RN0FmzjqXXANap575TAzsXuo5Gbi4I0jJQXNt7VYZ/HRirADJFO6qw/Tz\nKmlxC9v6dORReQ3+GEWXuXGIDfc8xfnLPqjz75ZO/xiOzMoXDc6BEGeFCnJe\nYqhCqDUTvOzdV5DLC9lFtbYDq91NGoNi2Gn0Bx/uK4hChUNrC/HlNs6raL8C\n87vQ1wQVzMA2aPkvPb/kkqPQ4K08ogphE+52yP5249T5WKAW8OzqWc6q0gkH\nAt+5VzDCJlyoNzkBNcuO0pJ/rhYHYbj1nnKqLUBNkihid+is5/gHA+VD/DEn\nNwVIRGpIQ9/HCLce8lRMYlh4VZ197c/icC6gMnE6+kjBtcz7GrpPCQ5VgrWr\nmM7C720T4ZIVRgSa8p/PhsaYNSBTPiasmmzQqxjRiB6GM7WNavuiC0xVX6Zf\nP4GLTiJd5QmNqxl/cZ3zCgDUJbGu9Nb1Wwo1jDEmaJXZFVQMmGNsK3QYG0gC\naLDk\r\n=lXCH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.94937c78c.0_1617310858328_0.08880696368276686","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/segmented-button","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"33acf9cc4d685e68ef9fe90d3ef7c128b5514f5e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.e7202cb57.0.tgz","fileCount":55,"integrity":"sha512-s5C+aV2gibYf8lVdku6g5C/g2IHp5Y1t+roo1w0P/JeSQKJvfkfNh/BHEwhBqVVKCoScCSMVDk1k+UUPAPptOw==","signatures":[{"sig":"MEQCIDi2dMfNsTBpC09X4C3VTVBaUtg2+DJrvNbu5eu5T2eVAiB3IWwNOC4/GVQEO25xavt5jacM2DseMNwY53VYK665Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1/CRA9TVsSAnZWagAAxj8P+QA2oLsiyYKZ7ASwXRK9\nxIA3YO85iNM7AVAtEPnvJ6ZJxaXkWF3i+pWWF52EHOUd/81mh4C2dKi5II1L\nNn+4aY62QvXDACMhsj/IdSVh/bup4d5ydaZr5vznXDrj2RIKoXLRvuJKnKY9\nUqBlm2QaqPQ+R6QTIYAH18jg0BZZeU2lv/3dC1pfIid1onkJT5iLHlanPR1O\ndTVhFTsUELDoL8Qm2BnR6RJo0n7zL1mVYRRnjvHZAEExYxEZtonsByHkv2Tb\nv1h2+DkvSMS455CzAM9PrxqZc3PchtYp6/83q+QSCMs2Vy2eMx9Gy+dopF79\nRCwkCGmUtM5zhgJ0iVdYUYX+LrGFXHoEAzUwKJVZSHGPs+Qt+2FEQ4skTgeZ\nR6tfyX8z5WNls6dvcDOxYosfwl8zGavZPabX8Kk0z8d4OUEgc65y0iB+hnk4\nPlnDB5mDfAtcrmgVepzN1ooPzWP/zgsT5G/JwMZzvoc72NxPe38+LcAz37eR\nvN1TEJI8ggxs7fcJxv4saxMJDcNB0AU4CElHwLUTRzDZwgIGWEBFtiwdD3rl\nqcmnjDITgdK40F8TwnadU1ZJ3A+H/+QlaFwKgNCAQS90cxCG0nEXvHm8L8ro\ni+3sisB+DC992qA/0I83Y3PIoeN7rLu/WmkiL+lnvsxDwZ1LLHtze5P3FvOo\nN2OB\r\n=ZuJz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/touch-target":"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/segmented-button_11.0.0-canary.e7202cb57.0_1617317246747_0.742493361429382","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/segmented-button","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad378ed7e83a9868f944bea68c5ae5792eaa9890","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.1f636b205.0.tgz","fileCount":55,"integrity":"sha512-Wc8D7N2zjv5H9ke/zw9hAgFlCXj09wKWRwOxMQg22b65tB3A+PsIqY0dAbDl2ipZCp09V/0blc3wfc/m13mIkg==","signatures":[{"sig":"MEYCIQDdphepoG6/Ii2ARWDZIjnzoA+37AhkKKIVKAKIrfaVwwIhAKRlqUjjjhtCRH23nDx88DL0chbZqrf0EqBf1WvG2r2s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mKCRA9TVsSAnZWagAAArIP/j/tMOk032k0YHa/bP+0\ngHyEbaLzvT3ureW6Wza+Edmu47QulR8au42kR5RwSxSmT5BS64smBBScI1sd\nsczMsoJ9J1Dj+OFeeH6xUyqPUVgWC/uxM/uSgcZPXWdT7RZreU9GvA+Rs/69\nO7/UDFEJnpucE51Qu+kJMAiZ+p3RVMz3d/ErviqwP7Uuj+RyIxjGinR2lVsw\npsNEr3GuUTDrbDCZrl2PkKyuYDh/VNVgkz4GJAVocz3IH8zbRARYr/b0ZZlL\nzX/qI+oWogxTYAU4/HYQ4b4tOSVWY22YMXd4fzwoxLDCG9H3XstPB4S64k0K\nDHAA3H/idv8opYrWfkd62tTA+sRJDb1ZbS1SU9XQTsZ6hyf+blDlP2CxjGaP\nGVkdgTaztRwrexaN/gyO7AvrmJra1KXprnUbD6NcwfUMmQ/9Rq0BChLZZ3UD\nreoruCEDnz/DsakiIHHg0VVJEr9iPFTJxaY+mZ5ys83KVWqpXaOVJCP4/Se3\nTOtaUd3aCz3zjjtcAlMXSCfxTzU+dGQjEA2BOy0Usn4tVDsHdRc9yfmTzHmF\nqHsYEE5QlU2nQfxLgxzwwSseAuwDhG20t0Lt2M6TEEZ1khZmbe7iMPpZIkA+\nw7y6WCUS8Nl4qnScWprkwoMgYbdM+K+sXab5up65QSTAU4r9+u7OlDJT7vFJ\nKwHW\r\n=eih2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/touch-target":"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/segmented-button_11.0.0-canary.1f636b205.0_1617402249738_0.07571962494028317","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/segmented-button","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad4e0f5deee2da089c4b79e4e11debaf81724eb3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.94f50b260.0.tgz","fileCount":55,"integrity":"sha512-0pfFfdepwRdee6Y5JUgMrMd0FZCM1uv9jH2mvWgOqTW9xVZ8pKJRbvDu6AUyyxLJU/Z1/sGxo0CiNyP+iBFmYA==","signatures":[{"sig":"MEQCIBIQ0gIJbgPkOWTJLF6f1g7nmM3N0XNyEJyM6qVzA/FpAiAsmaGMWDW1Cvway2tboJZAkprpmDlTfGoUYJLJwXShtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycvCRA9TVsSAnZWagAAK7kP/2g8647oEjqIjc+g4bVv\ndDYShPfkDAYROdiZpaOyfxJsSkAsoFQBAB4qZdf/KnrJtHYy5kyEyNtLwHlO\n8RcT27oYlvN+VoLkb4HY4aC9/gze7KwiI1RXR8CFCHfBNjpksxxIzPl4YZTM\ng693t5xyaR7Oqcb72O5XJB1QGvnrOkD0kYZToJPiVQ/ZSOUeBv3A7CHPQ7sK\nPmIBZoGpR6yDirBuTQ+7by/gVt1+2jYlctXEz0bXM4PsnvGDuVc/86SDsbKy\nxqIRJBQSR7UWdDharaLxwmKLMdGEgbaNdMY1MeY41bi1TeTyKBjkbemr+N4e\noE5uDn10QL8hrBwj7ellvf3ARZ9RFNWqnSzhrPrUu2ICFUykhSqE9ot26RZp\njjl/T3I/glJIxLPwDpN5oOwf7WBs0r6lGNtDbsdAmXIXA6JssrwDfXmcv0ty\n+xkzQt8Grrk5vBVWLseK0FttOZy78+P4HlOufyCVOZ26O5705vwRrEXQ8D++\n4J3b1MWSpJPjofl5fhrACuOkafq6AcQ44+4wgcTkf7iNVWqnH5c+ak2dg9N1\nBV2+y3XS1jXJVUPWrJtcBQvxTdx3KBsj+gBfpfddTr+Xv1ozhp5eyCXxqSkK\nO3Z8WbQiFROFGf/H3eXSGxtR0+FBSYxw+rn7nb890tJ6B1EoBCRNpq4TbECq\n1uFV\r\n=0K8m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/touch-target":"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/segmented-button_11.0.0-canary.94f50b260.0_1617635119132_0.1303606481495294","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/segmented-button","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3c5f27a73b33cbe7337763cfc050d53c46cad9f5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.a4009b80a.0.tgz","fileCount":55,"integrity":"sha512-qxAk6SSisFMxNaPsir9E7GzgcJSTiGabYCXaAcAFkvYyNg5cZz2RtBtg/8zVeAhjQHH5oh885zjTKaYlJDfZOQ==","signatures":[{"sig":"MEUCIBGpVmOPpgovbqGAPgLo3MEVJGb2tQe9u/U9XYaNiEeJAiEAr6RRCMG+Gcqq6PHcHYTNkc1CrhsjfH0p1rgQdomwrKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4iKCRA9TVsSAnZWagAAxE4P/jQWbX/BC/6jp0QDllDY\nRvFKMFWmMzoYQ5d2BjE0S121dyYMYtuEoceFrIO8/e24XWV/ezLRzGAcpaBh\nKaf8dCzyqgG4zRsyR7EndyWfXWweCoLAjJnrqkxPb67LMFMaYhMDNI0v4dcX\nxVUCYYtuYiliO2T0pw7tUfVcNzhabR8dHn+uLQ17OiNM12MLgtCbEHFIP+jS\nchPOTmVY6D5C2GkqcZSGTOQkQRzhenmsDgRxRoj1/v+nLtM8MXBYhJUKR8nD\nkJ728Wvp+v5v9FoqjbGpYFWjNh4NDtU/qx7TVQI/13iGoy2ijX7ZhdfGL3eF\np5gKip19CZPTpm/zGE7+RIij2iJb9HU/+wcezUDlN38nUv4mS6L4Uk7Xb657\nT9sRXTyfs6ENYtiEImZgEetsByxrCU5RVnR+bFd7WYyiL6Vmkox6nd6O/Okt\n5/uDZS3mpj6jKQu117ZiWr+IQdYzS1zzt+vaYAHlvcJPxMQK/VWlXp1CQSeZ\nX3778HKbPNljMJ7Hzm72eoTW4PC6suIgj4OOczfEu5MnltVWBoCTJsj0h/Ex\nBchdNC+fu58wsaBA+y+K2nzQXxTKstPlrBQLelEXfOdWC1uo8k/7tB1J28o7\n05yq5S6+Dc5HfNqL3ETdaGHs68sOza/79bX9nnCR5LdvzAFO9w+yhgEXDLmt\nhVYP\r\n=OvuK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/touch-target":"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/segmented-button_11.0.0-canary.a4009b80a.0_1617660042143_0.31535571422482556","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/segmented-button","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"95db016943158985c27b8b72d768d5967ece05e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.15604bd0d.0.tgz","fileCount":55,"integrity":"sha512-mPH6QLUE4/G557GPWqK0MgBPFGLJuTX6ZzkLKjlf96Y397hf1OxZKOfhOFeRdJij+RbXdJUzXsPpRiv/YulQIA==","signatures":[{"sig":"MEYCIQCDxJ9alzbz3cD/EJ/QqsOgHSJZABznPhOulnvzS+j5lwIhAP0ltnbs/DLsOQGtuihtvRODaeKUZLTTHk/H1W5koa/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JSCRA9TVsSAnZWagAAdU8P/3VfYgU+GfgqdSMwon//\nofZStX/TSXpHRGxjTSpRmOYnE87wo3IZI0p0b3pD023IaSduacgy3SwMDtcO\nt8HnGzL4prL7IQspMq3YsaXQv1LTW3qy3rr6/0ypbOG7iFuiEjIabiNQlKeS\nyCjFXSusaWfOi8WOMdQY1Lo7I2cE2p++Lxj5ixl36ZPSm80m6XBI8Bc8BNZT\nPZL6yHPWf+RwhMiYH2vxfs6vs1drsis1gGwrohBN+g1lX985hLoJVlyYAXUF\n/vhALM0K5yVUP4nvcQ5HnRjHHFCeMBbt8kNSxGA5N+2noxOpHiOFCVr4JgtJ\n+nhOVshz0EMs1HzRHdehFTHCTmmkicNQSZe+fGP7+I42EmNP5TbUO9DF07Ns\nNxnVEbTGotHo3NDJ4T+HZ0NoItOTNAqfqgb/AhbsVD/Pv6/YhwpiK0lxY3n2\nV84zqOslvt5XfpfGyO+9FEjF4cunxFfG0K1lzpe5latgI3cy++bhglYz0qIn\nvGI2Bm8rGz5H5Iz3a44zQPTKloQ5e3TwEIcjSAmazriHgKZg82H4Lh5XlTIt\nNuFe5dDH0vqFZX5tuJ0LruflZ1Q9KwIEzsvGKok35lsqlqB8v2Dn5epCHga2\nLteEfePoSZN0kCPXH/PDVpPhDd7OK9W+1ciRNosnOiKPGvZrzzO+ILl69TPv\nzm5w\r\n=VK6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/touch-target":"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/segmented-button_11.0.0-canary.15604bd0d.0_1617662545658_0.6957578333493433","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/segmented-button","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"92fb8c3ee7ce19da0c069983c42d2fa75b70ac63","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.76da7876c.0.tgz","fileCount":55,"integrity":"sha512-CSUUCFI7MXc+QspvAtR3OKJlQ6NGMjPXDLI0RsBZi64LovaRB5HX2DGRpSJc/Tspq4cusciHHSj78/kNn2r3Rw==","signatures":[{"sig":"MEUCIQC3+ifDz8VNve8lLDgJ0dwqu1avkqjLzA8sYxQCWWnOWQIgTrEdYGRy2gK6cQZuXq3/eAzjhSZR1ZaAy+SwguKjuaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6UCRA9TVsSAnZWagAAUzEQAJ33tUdOD88U5kSVOc1g\nbB/u3yE7te4mGv51Blvv7Xlta60XJIpG7gLtvziUG5/L3fex5tp8NCE6q56p\nxHLTbb+5HMQFgJJFCsqSD54QzMGN7iY9h6fV7k2br0HX/OpD5QIKg5Z2z5Qw\n0Q07wns5htN0XAmzOdJHU4aAwGF6lWKaDC9z3WjJm4btZ0d5z2rjtLqH2xh7\nfEufL0DvGqJQcFAO8pzWUt42MTd6YO93dxeKT80wTQaUxm7+8hO2QDLgO3cn\nhqtY+00w8ob3s5tg+V49Z64m4OaPTAFM11HIOStnP6sD3UmLlPE9Jh7wmXFp\ndPcjp5517uigkGiYV1zAjgOG4i5gEnk4qpnEwLVznG5zOZbd63MTNEoqRWUm\n8oTSgbb2e+7bqFqC5IYdV4aZlkQw8duvqvl1S5knnjHsAo9zraUJs1lJIxFQ\naacDK8k98OctlqBjiPfhJ7r9Y2tlF8MuoUjfXhSdoUVpOSq4jMJCsp3blAq7\nUNBTnLkfZtvqRUgD7kttgriv28AxH6i21Ni4j7KphjQkDUNWPR6NIqTIOaok\nOLReZ4N8YUn5w7d4fNjqJyjiwA3OKy6f8ws/RUodzAA2RpMU0Ueh7ME115MW\nfei6xH+/kZ5975BVbwTBZA1CJ6KDbQ7HH1iVAwrQnkkNLbCYQdgF1ek8KiwY\noOO5\r\n=WYz6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/touch-target":"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/segmented-button_11.0.0-canary.76da7876c.0_1617759892249_0.49155898281037214","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/segmented-button","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"24ae048d59d1a97ced49bfe858e43eab59181312","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":55,"integrity":"sha512-LWV/TNWkosV/1ja8MKVA5h1Jf+jEhXFj9JfPEB+80k7/XffmWT04Zx4E8Vn8dBblKCtmB6diNRFJN3+SJW0Xjw==","signatures":[{"sig":"MEUCIFt3DOj2yj3r71wRO5pSteMBnaVwBDzrcRstWRTHg+kxAiEAqR/CF20tLPK87w/3wRe7doxyN6zmUJ5OR4Te+Ug4Ppg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/ICRA9TVsSAnZWagAACysP/RnWMQnqx7A393EYzYrf\nAzPrM/W3H/SCTPeTyK9TcMkM+uF5o2fI9GM/90Je1AWRDxKcd/l72hCJOr5Q\njpc5Sgdl4Ae5Zzv8Mvvg7R2GijYVbfEibW5tfphW0n57HjUYcku1yIO0ee/h\n4hvBAENIFVV5bdgKpm0e5N5KNjS+epHRsUEyLdA2XWKPAP1DXxW/wn5U6sun\nRzskxFIuyCgvVSJzwJSfaRhu+8usPs28JcGUFqzOtnSxiwkptZXFk2UZdvy9\npVov+TBmGGTAVPSihP3dDaDU9z9T/WcYsgFKr3KT8ObTsqfSNu0iJ2Nu39jU\n1onH+oikxwS3Wa8hr+95sVXZF7Cb6/jHJAba8swpTzz3kXZnZ0fTKvyjmqlt\nr4SAA3VxYXo2cspza61rRxS3s7FCBHA30NgebOZ3KmHojE45im+wHcTUcP6l\nq9uWhrauk0KAzlJ/NCzqBJpQNIneezA0ktCldYGLI6hRaIzl2Kz6rW38TuDY\nERboC79DEM0m4PWrMRzQGPiPgD/JTsX8F2OAI2w7HbkkKSfv9fuvPPE5MgR0\nsByMxgKI/W4VmkktSnumIjqCwDHnkqh31+FR8sL6QFlyEzkNH0F7iwjQ/Vo9\nbYxj1pFws6Xn6qcJrWnKEEjKefFGMLAlW/fAqjYgUkAqXVLcCbNQiCwT8w9W\nTirI\r\n=dW7z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/touch-target":"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/segmented-button_11.0.0-canary.6bcb6cbd2.0_1617821639898_0.9747970722045947","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/segmented-button","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ecde607b2d8aebb33eda2233a89a81c46b7b3514","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.c91e8d141.0.tgz","fileCount":55,"integrity":"sha512-ILwCqnluism8VeBAX/qoEseBKYfAQ1pQt33L78D++I2PcyGOLDfSJEnW1gEjLUSVk4hLnSzvs7pqgatNuz9fWA==","signatures":[{"sig":"MEUCIQCzXd3moH8mBOdDBCksx9FLNPj70MRBZFtSBHLLuwAMhgIgf0tfd357UH5nCK7PHLVqS7c9liJbCkVGgVuRvR1XyAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCzCRA9TVsSAnZWagAA93cP/0hqp6oTEiXrgeF/8ol3\nd9LBs+Ozyp/w76vVnlaMkENQ/lS2y19xWzwXPaIlA+GwqRBXrl3EnFyFcJ48\nAa9UwULE3dPlEzSs/L7O3Xt/OWu7awQ9otjdj6Dq5Au244Xa28Aar5BdDJlR\nMKiDA4pbfIbCd8TeFvBE+Ah9wkOp+T3bclmukJFiIzj53IgMN77uWlcLME1R\nWU5Q6FqRfGtjp2zKRSnQ4FF3dcbQv7Rro/B/uBH9aOFbbp1heiitc0DXd8xf\n31NOpboOAgiLdb+QX4pEOCtdYDHGQcsLgje0TCB2/ksgqV53MJGef/2NaZx9\n4L+9QwK6YNTcU8S1/zCDn4IaIOikujBQGDvACSOKRFE32Ry3dF19mdXvC8WL\nftCMu8Xb4PB5bDte2UZ0kEuSOWZrppojSmZRgeTqb6hralxSOPOWYF8Spkgu\nsDXNv4xo87KETyuL7gpQVOYPmoloSVaBJ3uxrLi3H90W0h4FuMB+aPwYamnI\nf1f7mV1QECZiy6TiOOArnA+hMRsdmgHKv/2b2cGxF17f/E7ftSQNFrqhb5OY\ndDJI3djfT0obLl/eBapG/w0PNJt3bXn9FLNiD7+bOAVn3aqgi6NG3G8pcC4s\n8GKi/pc8PUU8CeJ/mUV2ZJEJfvLXJgryAHoj56TN6s9Me2k6RL1QKZBEYobT\nO5SA\r\n=/s/Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/touch-target":"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/segmented-button_11.0.0-canary.c91e8d141.0_1617821875018_0.6956266845591932","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"92674e8df81e5e3fd5b2f4d03939ac2120cb17ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f77c50860.0.tgz","fileCount":55,"integrity":"sha512-OKKBowvDeuB7MJF7rbanRLWoURnMF+fkeyyu314h+pDhIk3h6jv3GygDGROlTQfQ+HhBD9LqGLXlBa0KWmWxbg==","signatures":[{"sig":"MEUCIQDMecKb6AZCtnNEUsYFhEmgtIeVTJ1BzJBt40/RyOaDQQIgRFLQIy7aLPB/ILZ1Ag0toO4hYfLyfOu+ojSEYH7R0zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLgCRA9TVsSAnZWagAA4Y4P/3jPtyM7ZWaOvP3OD5O8\n/JJ5bl4j34C5n6wcH3i60AHgZusItyho0qJCVww+/zIxubgRSA/K6uSERbtO\nkE2tvppw1wESjiW8lBzpD6q3JPXLgg8gHT4VIqOegY82CtbeBbpUua8exEQL\nqWxV8TdzA/G16dUqnZdf3+J5Hu7vcZdnc4eSMz2Xm/whYbKWG+abihrmXbHC\n8l5PV1CpRpIH5hjgZEubQqH0TVNL9p7TadtkJkI970f99+NtTgCYAGpSetWi\nZkWFU2ATSSX/NOIQBPXro6CIEjMevtbOxO1qLIW7fEBO/RlwuuV16aDz1Xc7\nEFFhYWfivt0YeIy38PBXsch6pfG7sO9hNkDz12KE2c0Z1anq43umxExw8JrB\nlfHn+M9jQk4V5h4ICPb8mTVkOTau3IF42uzgCN2btN7xVleLOjQC+YxXfcBz\nMO00aLhMxPRho2Hi59da7OQjt+GkMFXEu1tnV9WIi7jpyKZaqs2nLvb3Lkgk\nfBZOfb5SYo7ysIzIntn9Id3QbKAbnfB1SqUkGxi8Sr0CIc7vM7zDzOQXy5CO\nC6OtBF/DeYaI8lQnXNwFLRdb3/MdYBrW456lj1esqFCefXGxh/9oveYn0UIC\nJOVlfA43cbbezaeHWbDzYbOsYeVjDTghcgvPoYgnZRN8W+PAGkUYRnBueRLk\nR6iP\r\n=FoYl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f77c50860.0_1617896159728_0.25568618557056055","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/segmented-button","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9b34e099a82ba8eea58aa19f258b59ddc5bc338f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.367d88bdb.0.tgz","fileCount":55,"integrity":"sha512-tV/kfZjaLnumBBtGzACpTG1fFC2c2cA2hdZv/nJdJbrqLi3kKSb2d1ps8hbwouXfBfVCC1zlTrK4ZQNJ4Cn57w==","signatures":[{"sig":"MEQCIBpQXizSxh72BDAAF5j4PrT24feUI+86hFTO8y/hfHD5AiB4zEMqs4DCIkTkH9uN8UP1UedTsI4iCoGuzRd+ot1klA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGbCRA9TVsSAnZWagAAKDwP/288U2bP4FX/31QamUpw\nQLNtyGE5iieJQDxM+ne0vX6bR28P+ul+HZArHWD2h3q1kbWXSnJ5y7nViR0z\npGuMuChHVyc5trXvse3OZmhOP21EeT+/eYhhMHjg7/ytai+ca0O0HMpnJtrX\nCfEQGhmJsdMiyZ6mgqokQsyiLWrRUjGvYed4Jj1/HxdsnOd+v9bhNVZEq4aB\naZig4jiGZxRBShSJodfrmxq2umUEzFrwlsXuA8WnWQ2Sr1M/hh82S3NcWR2X\nl8wMSZwhTxvk7GakUuonspJCLdpaZ7fVuPH5c+tyaGZ7GDZVevnBWs256Lin\nOdlGea07nsG43rvMzHnA1NRXoUCqTryYD2aWB+X6aFOgNuSPDYmAU2qHKVGG\nmvNvHnfOtoveICgxc/5793AeQOnBAh1niw7syWeNBIXGb4P5QIBxQ6EHd9rC\ncKmNxhQYebN7fFA7hYBXsk1n289DnrI8CCHzbDVxjl7J30MAVgzBkUfRruxo\n/xEJf+6vnbRtz4WNe5/P00xM+zPnLQlJazcLIuQdEkTg6ObRU+u4f3Qrm0ur\nPfjD4cxbf8i2PisiqQveFrjeQi+JuUWqIYViQc2J4+YFLKEp2CLxJzI2yVYW\neBebOWA8YAumDrhAPTv/GVAJkb/SqsHbnXcZcPKjtaaZzZnpUoXMbSizCcn6\nvdUn\r\n=iZGK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/touch-target":"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/segmented-button_11.0.0-canary.367d88bdb.0_1617899931043_0.13665749411517947","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/segmented-button","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2eef6ca6a8793f8f06bc7f1fbb97d13e19c1f7b8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.0ec437d3b.0.tgz","fileCount":55,"integrity":"sha512-/3IjaF1By3wtJpkEL3XW8XA5zcb1Js4tb4P3YRbHYefJ5E7i1qJK7rp99ctnaJx8qoJMLMkWVIz+iWGijbROGg==","signatures":[{"sig":"MEUCIApa6PBJ8a5iMhVvEOuCLr/aMPzrpIIVo/oOC7oBhR6/AiEAum3aKCM1xFTN4Ua2qcdeqN4tr9bLaqExm3Dp7zVFfMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sCCRA9TVsSAnZWagAAdjQP/AzZNVWgwUh2a4Lg2UNW\noiPsH4bS7IBBpLX2LykVozjUWVFlt8AHw8AXI5vFa8HzKnXmOG33ae43Lx2u\nhLEhhTEvLvUhbwh8x3DBqzQ24N0o0rROCh8l9YAHSBGyirtMVczB3/ldPTtj\nszJWYSu+r+DkRNqX3cIFGvVOMHzO3Mi6vDc3LLTHOQhNFXaSCjR98lNxSXw2\nKdCFMzSiCoUzSZAnNyrBCNJUS8gZUjxpB/6h5Q1NC4/PfOHfTMXIP19wgwdQ\n3QxPJsI0jka2nlUlzYK5B9SL0P9wpHuYa3T5lM5tqz5kJa97ztM+a4OwW2ps\nRWAsIjn/RGdVakervl1b0POYDfNXg0jaEPDJPl1RlCY1NuOR+eQlE7wV4rij\nlC6TTbpbRL7eKXMDyclut81tgq26vZoqb4d1eQQXcBEGKGlo6J7feiG3/8l0\njA1ZOMqikLtb5ozDzZCfgYcJc5leE0WDnlsJ91o4q2J2cE8K2awRuYpKzZJQ\npRdwguz93kdSEyzTXryWFFRn+YnMHyXS1ZxH2jfpv3Nm7KwC2tmLjPkai/32\nWp1ZKf0VugqzWSixvqgjIljPmKFfrKXp04rg1P6hFh9jrELV0PhREw6M6kMR\naDenE+xfZhHi7DmrFUTaHZjKBAjpXxcHzeHyr+/zkge0//J2MuYO5nnZWFNj\n3hRJ\r\n=AE0R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/touch-target":"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/segmented-button_11.0.0-canary.0ec437d3b.0_1617910530275_0.5069032190299478","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/segmented-button","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b4b49361d597597d92d3735e60229b60c4ecc025","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.b2fa996a1.0.tgz","fileCount":55,"integrity":"sha512-S+QrplaazJ+mGMJrTg09HRIjZJLP/rnOeomE8+SokYwdncgn4acPQGnkkdlykt3GX6OVvGlCVWcYq9Rwn6lmVg==","signatures":[{"sig":"MEQCIB1rdgZ+mipHeZorsl/JbptE1uCBZB12zUbYBgjwB8yfAiBFszPKMb7anlw2r5v4wYll3Rb6LTha/a929YtUmetAaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6SCRA9TVsSAnZWagAAlkwP/iy5eURUOYyHC0oqhItQ\nPnRU82tbHnm1qY00AJcsSQq7XKwbrHfpScRGWfzh0VbqzO3gIte0CKyEygQe\nWSAdKwRhXGWHAKjh56vHx5jrKQyeih6ebHgzVJa1ZNX5x3Su5xaemzbLp3i2\nXCHx7JAwoQ/kMB+8hxW041pR02eH2DVdPtf78QnXoWPW1eODS01xukRJiolO\n0dWr7fzjcb6AHnA12ccatUYt8WIGNU5E0mqfz0KXi4aMXhNs/JgrhTq0r+FX\npFJhjQsJWqGstX1stPyBsI5r9eyo7zaD/JZWSNYMXnWWUW7p2VpSr64exti8\nZ5HBZ5RYrb82naq94jaNFKuF5b99a1K+gxC+8Stz4WOurGwXOufOdkoF76z6\n9dl88kxOf4aRE0pRLewMMmmNF/tcICM73eu1GCLbLo8iKFrRQspH79HIqplP\nP/M+GWrX2+7ztF4tw6GQKp+TlMLqdZSK9nNzdLr3jTbWomqzyorN/Q4JYyMx\n95142ibdpcBFe/iioFg294S3QC+l5oY3S7aLmtsJm8yDSBU4iE2eWji0uA6c\n/+9uH3n6PfE4zW3ClwJdfebt9tb7AatVFcffegBK9LTyFqNZsOIFWogdLMyq\nzY2V1wUzhaChQfNr7zjvy6knWsG+ALNiVr0pwSD4V9xoxkudF/Ft/3dKHXip\nR85j\r\n=9wtd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/touch-target":"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/segmented-button_11.0.0-canary.b2fa996a1.0_1617981074337_0.43461788246659316","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/segmented-button","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4f0ea6f0e07508d073b1f6acc54ac6f2bdf14b7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.24255c408.0.tgz","fileCount":55,"integrity":"sha512-1iM3HNzTZXX9DumE93oBJUmqBBMWImoWKsgMy7XP5UUb2K7+E1GPCYKQl9WLJltmcx8P91BdtEETGDxCIBa2Yw==","signatures":[{"sig":"MEUCIQCOodb8GXv13KAXZbAw9G97oJCnyGcxQo9LvrCCZsijNwIgDLAR2H9j4MEBjh7uim+RRZ21osIXciCdM8/VmX9CMCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLU0CRA9TVsSAnZWagAAFQQP/2IjLH9ojTZFRoV7WPwZ\nEpy3FAnLifsCeeLDktq/OY6LizKP0YMHV0Qm80RBGLZV7rriFmDGF3ZPG8ly\nqE3kx7eJ70EN832c1NzwypFjH5jbTqfKBf1G5wC+kYLDjdMXd6X/dLMQCR2y\nnVO/7XeX/YS0IBsZ93c4Lme6J57hveSM1SamgnPE1u7OcKd2wStU6cSUqMU9\nI3EE5HYybsVq6b24seRvbXQdourY6U1FI3sa2omYiuKN3anjtSzai2SAwpAS\nXkaDq70Iytg78RhJajSjyxSWFEllTk6DgmnkS/fHts+djwB2icxgmenhrQJc\njPdzfjwAYMyZBur83oz7HVTw32JopUbuF5iNMX/e2NsOjVJ7vY5qJvIQeoXL\n+KH5e39D6xDQkE+jSa9ZQhhG2MR9LZyZVoT58qXMJQOqukr6oqzpUvJJAJeA\n7jXKwW9rTeyHyjjOtiDu5ZI8p7d7fr4y4I8clkoevfx8hzGdiBV34qM9XDVu\n3OizS6mnLTS0fl2ldqha6d7QVck4Rzxu1L1Ilkk4C078Yf9vBc2vb4CIIBwH\nZbwKEhDAA+6A+pt67+mDGYF91Y+hEGpCR4l3oW3vgHwbE82VqXf1vcpC8fjq\nodmjzeQyHlr1aa0WjTRWBB9tF3KtwmgdmElmOZhZYoMJkYQoH+9pWDKBgrez\nqyC6\r\n=80vr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/touch-target":"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/segmented-button_11.0.0-canary.24255c408.0_1617999156164_0.32606539635634824","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/segmented-button","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"15285d7446c4bc3f13218c5142ee1a7b69aa824c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":55,"integrity":"sha512-Jc/s8i8uGd2GF4ZkOhuNLQRN4utL7CefMh4vu9z4NcECOAoIJq2IsFFAKo5qyzezf2nKAcGvXlTIPC7dZKLT3Q==","signatures":[{"sig":"MEQCIG5ADoI1Qz6POpOKo7SKgE8B09LBwUJS/Xb3uMNwp8zDAiAxBm4KcirpnXSYw4PxFAh6oOy1k+ZzhoFxrxiyMKzk3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNr5CRA9TVsSAnZWagAAkrcP/1GM7tV7QKaFeF/75GUg\nED2+OmwTAu+ihsbTbBnCwCCHE5+I2pYV2jPBXzdNN7rxmtV991bCbtNqGfHZ\n76QD4W7SOvgPRAZyY5PvLlOo18krTJ4SM4e+icxuoaVIlS6MFLfozdb3Ci18\nZUcu7DByTl+BhylptKpz0DNsFbI2Gza7/mqJjYDHahE7rg6tiB7S4937nrYG\ndSiHveZbut4zo/w3/qJoV9SB+KgCPLmeZBO8UEbP8KUGPge8LvVRW2xe9A8k\nqTEyBuHKL8rsakwILyAy71fqCw+2fstUiy4K3z7Rlx0ROuwGfMQmy6fnXcmN\ncoOb64cnQA0PWiMhdBLtJCofrd6RpSOiTfRRKSjCV6LW5V6T8SLTtd65yZyP\nsgAyunDC/r6HdHRn7z+4mK0RQ1FkVXt0/HzDsoY32lZW2+02KPojXU7B5OSj\n78C8FkxtrCWTUEzvEHHj20pH5f1BAUU/SmAoeYJYGIZe1CjHLvg3oZaeddkI\nWgnPQm0eTvlLMvitbjePqJw1GL/AYi03Rqo+gmOJNTl7sMH5nP8wWzVxweo2\nKvpXyv0XmE+sWC21RYZhKrfq08eI5JtBL1ZR44Yotig0YDk47Xr5McqjdQGS\nFntsoQs6Q/4Xb6zwcdAxbJm8CTeaxcMrXRL0PTtL1tYLE41U8ZCQiTjRyUrz\nR/Ia\r\n=gdqf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/touch-target":"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/segmented-button_11.0.0-canary.7d6a4bb72.0_1618008825385_0.5958279709987329","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/segmented-button","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d08da69715036a940d3e24f2f613d77bc665a94f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.352b295c1.0.tgz","fileCount":55,"integrity":"sha512-LOcN+dD94zHD4nbjZcVTkmVjjNRsgmG1uE5ptY+IWtfWnxBzmoiUIZ8TS2+5e8Rz/n0jFiaWChUDujEj+BqlUA==","signatures":[{"sig":"MEQCICYgPyZZYQh5Hn8UdiYrHQGNnXlCXlajKJlNLo+rdcSiAiB5I4rBKO4XzfL4gVVk/ZCaJ4WV0vWjREXgBtBTBcDayA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5QCRA9TVsSAnZWagAAaQMP/3d8BqfWVRq5BAYLeEWp\n53IecvMnLVioC/CuUCJYpI12yjlC44Vyvj1Eo6nOVpObZlrBRuy2tP3IPX3K\nQ7l18m1MlctmROs7eWFzZ5og2mwJeuU+AoNCWXbQ8uLCewOKuXUUxzhc0Kkh\nejsuHi+zGBby/woqSl1GjViUOwvlBCcgAX9K3jMasEzrPPGQZ0RwP0Lxutel\nEi0U+Go0O6uMH40BcKkrnlbQ8E97JeIR5qPGEWipmux+VyaTgHnfZ7pk8BTU\na+hU77OCDvkRIRDY9+0Klya0EiqIdGWWnsbbHGaLUspjz26dCl9WYp/k5sGC\nwLIavQ8EXAnR7sArNNJwnxDYUbrlzICqoBTiYx7I4noM52K8+YlIn9b9E9Cc\n4keG6k+sJN1dQK4MZQ5gMLsDPOPkGHLk/5yLR2iBZ4VCOlMIheTrPj0RNBbA\nIrxEsK3yUBJ/3QAHqPWLoGQtkMuX/WuyfgSA3y5WLemp76aq4gVofLiOYuq3\nkFlrLfD98w9UNsZSKQTofZ5k5D4iJyWQKsq1qV65P0se/Fr4zzS3pvL1ug/0\n1bZSqtItjAiRBUggJArdwfrx84yQAsdJ/MXkbfOYhjlHOKXXTN+ue+n1LI0S\nI43S3cYsd4rMUq4NDroeS3lpofHAjRwdRP8SOmi4VqFnW/Jem22KQUXOxvdr\nxTKI\r\n=JgCx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/touch-target":"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/segmented-button_11.0.0-canary.352b295c1.0_1618251343624_0.8616848117874591","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/segmented-button","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fc8d1ebd413f74577c2acd419bf0e4d41d1594ac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.ab99b8064.0.tgz","fileCount":55,"integrity":"sha512-bM/rME1bXIycgeQcpn7y8AflSrL4R7oooeKRcyL8wfx9TTAiL3wlXhlGOCw8hnyvV11x9y/b4awe1KXjKBjJNw==","signatures":[{"sig":"MEYCIQCcIGYkQWBkReeDdHnsy0sj5lHroLoMDXk6ND4cdxmWigIhALvgDMYe76OgJP6qgJ2cN5iN9twshEvWw9J4No5hYb+v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4aCRA9TVsSAnZWagAAlJwP/RB+WLNYF7fDdZSu6LGQ\nUPCqHDStIZVQZ5pB2Kr8L2ouVcXy4lt+squqWiOqhPoXmSe4AI1AEb/2iIeX\nRo8VH9pqSUc1RmWiVJJpwfXeGnhip4plNGiQ1fxntJdp8reg/Et3cfXXjFfO\nWtQpFjWOvBd+I9K5xcqmgKha9Qtg4gFwXFdpE4qCRt6SMbcaFiZnmqwo1V4i\ncXRuKus1NtsdD3Vl0vcGW2c3NDMk8T7YUHw/7pE9ciFMSF9DbdoZ8Y7Oz1OG\nVFKMIT+qXSPvgFcdrk7hgP3pTMbYyl3EUOUeHUqZsui+5ladbIXna7tIlNtH\nPx7t/GMgy+764/ni2T8AwnCXCWR81Krc47WLl7wGaE6KPR2YFi6zKhpL/4tn\n0iHPle2DjVXGw2xIHL6tOpRAGbMZYNAxohSAxPUIOZYGs/JMA3Lm0CNTfo4k\nrjPk76nwcI9zEDOd6s08+l+m5zmnZP6f/nujswrbBxAJKdemFLjcYNiOnBz1\nkLKaUZNIV3IGz1lcG8t55Ur7oFCorIyiUwyMjY26HjvKj32BkVHRq2bQ5EoM\nXmQDrDZ6b93iGGplH2bBX5Qrc+PyAcKFpszhSiPib1xqoaiw69xzV6LGLArm\nhUjDzVZ4bvCANxKuu6Bj5Ml+O7YuXpZTxsveWoZHAggJHHDA6MnMbfRN6yQY\ntcdb\r\n=4mbF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/touch-target":"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/segmented-button_11.0.0-canary.ab99b8064.0_1618325017492_0.0839286530398764","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/segmented-button","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b302e9cb146a128926fa0670ab44b06476d5e782","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.8f0a11e32.0.tgz","fileCount":55,"integrity":"sha512-0kG9qy7tgmSLqjAhrvz7Y3r801TZgM+aslP0BbI/MgHEbpOuctW4ccyXzLqz2Qy2dwtrJfHa/NPuBFOs4Q1liw==","signatures":[{"sig":"MEQCID/wRMhB6QZqQg6cyk9dk/j8y/VWy8zEM/Ml9iBZRqr3AiB+wogRJuSnitNNPH6MdOWebasb01VtfTuosclQjh24XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0p9CRA9TVsSAnZWagAA3zIQAJJteAdE9CXPQBQDH22g\nGDpwmF5F0v9yYb+smkXRT9RFFh1l3voDYmZrQ38zkBpxGKRC4uvuByvB/Q3I\nzEh4OvN/Xkm67T0GZ7i84gpNYYq5ZW2R45MgfYl022cOaGE7wT/5TpEsNg58\nLvw6V60PbV3zC8Tu8FYbAm4VTTxdkjJYY/h7VVBPvpKUZ7dCPh0FjeNRS/eR\n9R+W/NNl0adADsvFHryxfkRDXxM9SRWjCiBUGezsxAiftjibU2MWkD7yPdWE\nfHHQ3XrsIh1gUqaBZz128XFjhA132Og243pslkBrp6/NPX1Vea1QtdRN5Cqi\noeaclIMPjLZC+dJ6nEzumSaJQOYmp4azL6Qntm2LJPPPn77fvHHVgp4DTnGN\nVoIvENsICLpQrha0n9GjG2ZHyrq881Lm9MhbnNwyvlYN4nd9VZCSpWlBnTDO\nDjlfxrqc1WLrHgPyLJ8MvHo5SzRuWDGJFTzxyxx//6RpTZ3PGhV6MExEGswR\nyPCjvWrQZOwJJvIxV6WWvXsU+5F6pmFs3VWJuZZkEtLd6F/4Yc348wUb1AeE\ntvn7zpKy+mEdyrGq81T8oQ//Y1XW84cCMEPqfEduBhFu2UVPhyZAjatfLCEi\neiSUAP6K4wF/yR7euLybUXlaaIyJT9KuWa2ph/ED9UHQVQtX4rJvWWA6A76r\nkiQ7\r\n=wQa4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/touch-target":"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/segmented-button_11.0.0-canary.8f0a11e32.0_1618430588847_0.8563185248147489","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/segmented-button","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c9285d95c63b8c4942443c486a4ac131c1c50566","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":55,"integrity":"sha512-zyucdMxAviQiczR3aLHlBAHNh9YnqLZJ6DO924LJpIpPj1mdCC0muptW+JGXAKoByKV0yqxU/7dP5esUccj4Qw==","signatures":[{"sig":"MEQCID2r/6vylM4CJoAJQeMWnnZD7tLFgBPuEyPQJyIRAvBEAiBAah4UGxQp5DTSPSXEzMbS/ctYBIvpaBdNJfdIfqBC2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAiCRA9TVsSAnZWagAApv4P/1Q+v0z8CsMKksVmuIFU\nuQd0k/PmwGCBg/Hqwbm05EA6iIfm0BuCQQ3/ol3PsCGYmIJgKgxXpfsJTtgY\nGI5kIcsNZELjAYj+NHB0dPD3MxdBtvrrTCss5V4fHJhPnKBJkoKuTQW6lrhF\nGy5cArif2RycDe8+w/cZ0tzNhWooa/jdYmYbAuOVvfg1rrmmXYsKwfzojOrz\ntpi3/kmvYvPH3IXrGwqIIuQVA9sSBBswSuSdSuVw30OwIgln/U7wvD0wCBnP\nlQx23yZ0oyIiUsiuVpu0Gv4eWHe1yWOF87RDvp6te1RPvrn5kXPiKrWGxiVK\n9388syxej4GEEr/CK4rOO0J5qb71mSXjyKJ9gKKfX0z2bucCKhfh2AP/DXpA\nflC5WZr1sj5yNMmxKRsbCRFSdbLq+h+OUKEZ/rsmKpe9O6Vpl3qGklf8BLJ1\nuyX7mCAthvHZzBvbOP0IjPSYpiKA/exHEhgJLzSeHodD/6EV4DO2QbCCwJsE\n8LbAI/KvKx+5SZFRVDMms9aGRTWJxnELqMqccMfTNm21+lpihiTMrQIbjySi\ncbmBfKZjobdCcMiM0K9iuRN48pcYli/YhmKhJ76jB5fYUvGzBW2B0Z8t8PIh\nRbqlHLRMgufQOBt33p3YSLmwod+XvLcoptFD/T7z2Q6UfxuRO7DJ5kly6Zw3\nE0C1\r\n=9JF7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/touch-target":"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/segmented-button_11.0.0-canary.f5c6db8fc.0_1618509858189_0.9489693193350719","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/segmented-button","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"68c55b6fa0b538b5ddf6ea9683f52f6901386f9f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.3793a3143.0.tgz","fileCount":55,"integrity":"sha512-oJrVaUoq2t5pg4kqphUdH5WZDKmbwVsBzp6SjKdORjo6zWdBn4GcXbyXUYJ95I3IsvS5D+kzWJ8IBDrLph3+Ig==","signatures":[{"sig":"MEQCIFHlBh0cpkDnuRJLnqCCNFnv8AT8r1lfrJYBh470SVLrAiAR9b/LkZWlDAnY8iCOqbrO7xbT4Hz3l+5CXyUphIRifQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIaBCRA9TVsSAnZWagAA1BQP/2K6Ode3SRfQ9gKWcKE7\nQF41s5id1is+9bksMLHuV0paWJyoXjh/XbeyPRZb8mrgO+CNG5HrdG01XNFH\nEW61dm0h/rn0XagVGXvH1YV390+tuhyHBntIfGRowV86/6WHJ097c7FeLdGB\nrkmMk9YOGEkIZM5BFnGB02WvmrxWXIuyGAci+A+LqrRCFXh+PLGFdjF/WaXa\nd9KO9C6seR+fV0H4riiPuRVuXWdUHSS5hoppwkgGe6Z3beCU/FNWMyGaKVm0\nk2QPq71FUbGlzm0dCG0PCZR1h+2Arx1P0rnBaoVL0ic7FzOy2OIsAsXF4Iui\naSLen1EOSb6uRuOUEM7W3bUUcWm7F0pZouslc2CyPtjX71II6snC+5ozT+7J\ndf8+QuQnpSzTrPtomjAHwsNdiKcbHztNhcZZZjl4B2ZfE4WBX2+QuS7dEwzq\nH5llH9fR7VUQwJPIkVFC5pd8ciaL6nsgGkixcRIXTQ2kca3vCHFJYYsTI/dB\n/Iz414K0XC1dzsTyKsIhJN6S1qbUfc6k5s5lQmmiwqHfbDmdlh9Bj+6Du2RU\nU6v0ublIhNVfMGzrv+i/pt/o9IMkP0+G57p7yf7sGkgRLtxq+z7sQo+UEGah\ntRlzne4DAoDbUBf6tjCuVdPA1+67E7+myHnSFLPzlQ+o96vZDC/XVTqJzAfd\ns/Vi\r\n=38US\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/touch-target":"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/segmented-button_11.0.0-canary.3793a3143.0_1618511489369_0.5222399296776046","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/segmented-button","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"58da39dcd79734b4b6524d71f77cd083693cf374","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0-canary.bc104bae7.0.tgz","fileCount":55,"integrity":"sha512-EzT91w7rEPFg93iapxNo+o8vU0S4g6uoPLWXfXTcB0/BMfYkrEDUXawvfHMHPVu3V/bS4UyAy8cI7+NwGRUWBw==","signatures":[{"sig":"MEYCIQDld8PUz3b0N1Zl6sQxBLs1edNkVU26AFn5ctxsYWct4gIhAO3Q/wmzd7Aavsyds3Keku+wgEQujbMn+5RevsnSRg7x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgKCRA9TVsSAnZWagAA5KIP+gIQ2HHWZPgsbeciU555\n6xlanlp5/i0WK94tz7Nn3fj7BblsXb7MHzeOSgBhTA+V8AJXwkxYzLxk23Jn\n7tN9PZ0Jfak1dNOhBBWA8uNZ0mvrd5DI2dBbvuxG2bB9vyUws8VMRct+YLc0\nxNVypro7gQ/nfuxK+pdJmQRXAyUTQp5DNiLzZN+aeq1ooOicsehRClLyVxQr\nuiAX66eZEvNDrVdikdTOZ4Fy7KnpGtSF/CAoPhl94DcDCQTAO3xDDg5WwEo/\nqH16Yz5dS3TIeZ4OgwUTg/wN+hena2mVgyfI8EHRxffI2Wu1Hla6Ju4BPthU\nJXUmJbPo3EY3v/h+K2FlBa/YQ/ZPvsCkdO5pujimuv5x0L/5pbkxQ2hMqE5n\nnNJbL391vNh6zSjKkIxKlu25hCXTyddUoT+PTlrM3sJ9urpYVr6diJXhkoaC\n/E37q+baP4QzOLfA+LrOTxxblAgOWLYxxalLFEGRSzQP7L0UhPFAbchPyS6h\n+Fwc0jgjWetZnud2391PqqoAs/vy1iMHrekTu1Vokx65aPZOHckw1bP1sk1s\n8XNZYGP0Z5fHEkmlFLsj7/hYlsOQnV9wB9XRriIhI0HzXBKoWHvwT/bBKHSy\nfuUKr52SYS4DYylI8XywOi4j1t37HZdxBGYJ4rwJ+jufhpkLpwnzFdT+A7fh\nV+RU\r\n=ipqE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/touch-target":"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/segmented-button_11.0.0-canary.bc104bae7.0_1618515977636_0.2411744313822235","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/segmented-button","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b79bf600611c771a41e9490c1ad01ee6c5052308","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.3f342c3f4.0.tgz","fileCount":55,"integrity":"sha512-4xoWEH4wiWceJKXf92U0S7SMpm4fvI+Ohx/PhPxRXmOnrSvZqZUhYex5nKk5+eYRHAyHo14cXxtIcyWR63JNeg==","signatures":[{"sig":"MEUCIFt+4yHTTJacbwOE8uPh+62SyYMH4AB/8/QvzP1ngmMtAiEA2CGBgAqa/CDjcVPbroqwIFKbdR3F6xky07ntehQ5Gi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQiCRA9TVsSAnZWagAAVPkP/3NdPs5MtT54gyFIVXrB\nQ+d2HTtgNF87F5yVqbrSCnGXR24l9aKuBnOBeeZT87H1eIWzkKFx/4B3KRyh\nOg7XG25qnWEBxohNtnFppUcnObE64+QCco/TxIAZM8PXDXvBEwDp8f5UIBWT\nMQrDVc3sXOCq66J3a4XclPC++IamBijldD6Li7jGMe3pSD3vRYxzvnxtmq+2\nuWpwHrqSJvmhxL5CQw7v+Bn8UFW3ekiB05Jjor9i5lMf2JLR/EqdmlEAtMPs\nIh/rIHhzig3JOm25XFSQjB9vCoUCKNWcG5CLH26ZZ2IzjMEAnLzciTFDENbX\nx7PiTKmqVZUukhLn+9Jpoj3EoXOEhs50Z8a5V7YfAe+lfGe+A02HfEnrXGoW\nejvMFpzQ1Qn3c3dXdB867sON5Ui4LBHt9Ws7aNdHybwsdjsAa7CGftNsD5bb\nYhvsdmSRuTM7vR6YfDUSLbu/B51c/5tb17WytD5m21In/o1wTClXIX5qWUnn\nsogNOS2pkYY15LHvq3ZehRSK1z3T/rGJzj7r0PouqWsZJncOvOOVEWdFncQ1\nf80qIDeLVonp0Ucgh38UmNFQMD2mLd3H4ME75jgld3o3PHEtSP47h8rKRebO\nuRIZ+uO9nui5K6zzScmR0k9KVt8IWWsaHfizKUYREML2iF64xq7nVTyfZqh2\nN/Br\r\n=MBsj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/touch-target":"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/segmented-button_12.0.0-canary.3f342c3f4.0_1618527266165_0.0380421640182762","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/segmented-button","version":"11.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"828529b06fd0c1b5a442ff6ee4aba1e1005b823b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0.tgz","fileCount":54,"integrity":"sha512-JUQQLEg8wujbl3vZ4rezPVdgmGKDy+pYHpL/hti2rw3SyGG9RzliZKh9vHGVWrQISObiSphoURSutGU+6HG/jA==","signatures":[{"sig":"MEUCIEyQcIIgnPHUzksMGi/ANYv0Cp7T83i0Nvmyljv9RbXLAiEApYj6IKNUNffNUJdc5xqUuHEuY4u+gfCwFcXJS8VZcz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUWCRA9TVsSAnZWagAAX9QP/Ao9QYL6YASCdl3Dsvah\nreL1QuIhB2XYRTGD6U4GGEfUvrRhLagmxuX9oE/4bJVEqd3uoYNPnITBPtHl\n8CgkLmo/i+Sb032RvbL4bDmaZK9iORURtl6+VbcL0AkFe5fIXLZVRm2sCLpu\nl43zfOfrx1APUAyPInkkPBlMIWoPvPZ6YyAZDEHRRiqZQu3VtmNLRjZJHmlq\nyJ2TfPZ+DQRng/YLUeg+yLC5Sy8JsJ8tY/K7v2vkf814z05NGjxROlT96Pj8\n2PjoUmYkedv1iRG4nns8iz9ug/TtbDHn2vkDpmfnjUymu4nkIgxtpAZSKiQ8\nl0U3kuKQcAhHxsoeT382AqzqSjnxBtFtoDv3t/4zUhbjOuRqf0jEomhoFXgl\nP437LiO4Dx8ZRxj7+Bh9clwxn7filV9CtMV06lML7Lb6MqRBNNGEygHzr8bp\nCYDVGZ7I7JT8DKmJH0AhnkRTRA4hgYsP7KQ8VYRwcbp/OwsaZ0Lspfc8VPZY\n2AZPZXsIrqx1JMdAsmwoWE4W0OBsnzLndoGMndxYkAmvjYvL1+bM2nER4r23\nGZNW9ardN4bTX9AczucgjxqeZuCN9hu3hDQQLsAfkjHJQr/YIJNDCh2ZeKk0\nRjHS3HpmrcL2nbWQ+uYfOqZP/dyjaMo7WCqNAGRKNeBVeRXQ+IJfsyZQX7H2\n5D/q\r\n=jb23\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/elevation":"^11.0.0","@material/typography":"^11.0.0","@material/touch-target":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_11.0.0_1618527510133_0.6419350938345589","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/segmented-button","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"923baca52ee117b15308ac387d03aeaa044f16bc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.2ebfc5374.0.tgz","fileCount":55,"integrity":"sha512-E354CZ1mJr8/WsjI/xv9S7pnKFqxzDJVKauFu9b+ksrGso1kdQC29pH4fTG6d/uTxDWnQ5fAw2H0nrEX4ZE7uA==","signatures":[{"sig":"MEYCIQDV01WFgJflyZP5msAE2Cca4WvEVKCR/V1BGblIuVij8gIhAPR2DDL/zBV18dw3WMq6dFSWZCfiDsED+nm6w1rrMjrb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdaCRA9TVsSAnZWagAAPUIQAI7G7uLQtyBR+i7dKwcC\n3ooG1Y9uWGNKefwWEqvIxD5+KXzrtOh7gCmk6TNTKIiFSSXPsCV7t0lcAlqe\nEGW5w/qJIa6dFpUyx68jGYK4E7n+azFt2a02w56ReGL9YMNGFN6HHvqqzPwj\naN+1STpMwkqGTGcLvIobB9rWOTO/7ECMcpIFgodAEVYD+b1UcPQfvBzG4ZhW\nhekwqwS+eDti088wIEhIQk8hDTCPBO/rGpTWeqxh7For3oRYTP+ZTC4MBdz2\n3QD1Et90EqKvOOb6bDWiFPcx63sLvcClsqyJuEj9ROV5zoekCoiuHgl63SNn\nzJ74UBscVooNAbymo/58765cf9v4fRqm5pLnHm3QXRQ8G2xCH6q1kFN9eJk3\n8swlaB0EGpX7pcOSTfeqTsqimJjsUFNDCcUrg3FNoL7T17yqbRfbtzUmr1E+\nJjr+Vg3Lc5IRpKOm/ggSTY1tbUpgzxe7QdqFp2hEmuNF0Cv44qvGxvXoWaZg\nmYX6D2ubzcNqvDO010gnHcwNrerIF1dJTguwhUdmE/HsjWDwezfXxpui5Vrp\njKJwogb0ViLqgTyZMWEph89EiTQvzunw8KUOFXODr5zDkIdNuR4qS6DdYDW5\np8Wfe4Zoz28YX1kPVQT5O3gNO/30nLSJb131rBChTXwQSY3YMGjdPALns0Yi\nZXXW\r\n=qsyc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/touch-target":"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/segmented-button_12.0.0-canary.2ebfc5374.0_1618605913620_0.8681497882907896","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5293965d1319c3a1334d8d04e4743f8185a9b9ea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5631828e1.0.tgz","fileCount":55,"integrity":"sha512-VDY6q+Vbao7mm+haZ306vsAx86dKmilwvJ/cshOtB/MyZHGecFFFOmpXihyXuVjwYMkO4J0s8zDN8nM1t1Kuag==","signatures":[{"sig":"MEQCICboW2kIatArC4Lp71pwJSXNnyjomqhQFipz1cOfs8oPAiAsGapH4ZPh7ivM8iqQJejkZxHBZcfJXKwtlcgvPuacVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJ0CRA9TVsSAnZWagAAF2UP/Rd+BQWHadMC0vBTaH3F\nfJtP5RczGaO/PrKGReyuw4JL+9ghZpqHWzLKAa5u4k2XrT81RmoBbU9xwKyt\n1dxd4ShcO084YUH/+8vF1gLzkUVMAX/s1eZEkCUXYUUmxQO6gPe1Fr7rIDyJ\nsY5ZoRAKHOQs1DdgV/FubRqDZvbngENjiUUlR2oEdOwRDRo8DaJo8lqdI5kc\nazRNqwcATDsprOwGPN6Z5lgVkS8qlys7tEdJivHsL/SZj24BVpaGy0Ogp6R9\nCKCaF8mFSKN+KBKcHCwKiOIsLUsFvULCZzut84Pqhw8yYizpx4cO0WoqRr6a\n5odBpMdhPOP0xmVbi2kk1R0jrNaV4/rIORmYMvdRGZCq2f6TeXAv1mjd8gxn\nRIANL/a6IY4xGNPESuyYswuWCE0BAmxP22qKlmkpvMhXOtI9i1bXRDrBZm0K\n1IWQMKtgLqn526qhfbEjcre65PmWH/gCpY+q5cXeF2BihHXN/zMAWfriE5ug\n969SjJhCv5BLIalU15C1AAhwnfdM2ant4xQnctOaHaWPaxYC3DlkR+Ye8VOw\ndVgf+NqXY3R1mL7mi0Xb8Fna5Jyn5+tzlpQV74LcAjlGeKg6WGErmlDRbYpC\ntQkh8R4OYJQLche4lc4K7xOWyN/80hgMI04pjWUWusRI7Lu1U04PG2PUv2Cl\nUzgk\r\n=MO+k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5631828e1.0_1618645620084_0.5341941444314307","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ebac920cf3216b87933af1c51e351f577a554b96","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.bd685395b.0.tgz","fileCount":55,"integrity":"sha512-9zjguQ7mNcMsgUYR0b70GF+G9VBCQyDaE1axCo9YJzWK4yMN+uWiE/nYz4RvQC2yPPT+B4qMcRllQkJ2rg27XA==","signatures":[{"sig":"MEYCIQD0TdGbl0MeszjrxwmEtE0dt7XZLlaTTW8wyCpfTfaSnQIhAMz7hbBBRygvsYaTTKJoOGnQFluFQwrNjlDe0Z+00qZk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7ZCRA9TVsSAnZWagAAJhUP/3C+vOgfu96uRC01WnF5\ntm1/X7eZ4m5Ct8Vv5rLWQOGoEBkWKN1S/1ZYZQ1e2X9SZIb8NFMO0n2PdG9d\ndbg9ED2PQPgOb7MV9pUf4swLBSV+X9EQdSOESyJYkGR2bEPp8moaH4XdbByg\nkGP7vSz5CLrAmz7ZL1fH/+9Gon2xZbZDq2eGiHLkQ1Fhoxs9HUXlH1yh32Ut\nK4YYv02QnpvIdTpAUWhaQ8Q5pKZZ1QrslUeRL2/d0UKLiZN8Tylfa6zEgyd0\nTD0Ca08S2Rd6DD1t2v2GICFwGWJ80Lo3/yQDvfR55xT+lPP7m6BzkrAnr0fx\nJBTPAEyhXnvbi6m7XFwAyp/BzcJUCoF8hn66dE/j3lgxrl+Zg4ZNgVu7pPBv\n7e+AvYDd35JfqvPSClgdb+IK7YLBrd83y6QjHvLWInmulDk3Q3fuYHYohMFU\n7rlGGLGGYMX8VBj1YcNsjqp4Oxn+f5J2rrfOOHNplOz50iAf9pcVtlTCUeq6\neMfAWmgEqVCFHyJrMzi5xssPWEl6pukf37YnKlrRBHRcmMFiIk4O6EG8GjA1\nz4sq6sW6X057wvmpXlbR46fGKBj0Wi8N7okJwgYSIeT8JxjzOb6y+56fqe3u\n6K6Sc/wqisw84hGI6poY6pTkHtrEknjVcTIJ02umH8F3nUV/okhBa0yy4HXW\n5e3m\r\n=OY7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.bd685395b.0_1618857688673_0.487729137221774","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6af9a1ef316b6b98ece676abba36843eb8031f64","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b52196498.0.tgz","fileCount":55,"integrity":"sha512-ZRhTlbuhy2Ac0yuDJJ/TC29VVz5Ep+sb0RoPsf5uOtgYJ+IbsVvDqANYYxQwAcaniZXiEAnSSV7na4GKI5VHZA==","signatures":[{"sig":"MEYCIQDnS7z/UClYVUaYE7+WZcONgq3IqYKbltbDHnxV6dEa0QIhAKIGEBaRi1ifhlec02/A0+mLSO0iJiiEVhh2KJcmX40f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDKCRA9TVsSAnZWagAAZD8QAIbuywFMMIfFPX/ik/Rr\nn+uwzL65QjbTgZQOcNqUpWGj7xgFo0iQv5Hv+IwAAagQelfCjc7ohK8rS6WY\ntZ1sQw0KFQTc0/xVIR6VF2j91emutqzXstpxKforeYFqM98vAKSWtPUubu83\nH+ZY4chv6eGNZhbTCEOiwghmPVbI0Kqranc2z6wNvrxavE4g1JY34/pjxdYD\nYCG+XzVEt2jPGJYIuPx5Qn16gfhO9oZgkGJMn52EhcajNj7Z7XznihiZL+WH\nDF6hmVNHv8fDVtIKAechez8KGF99iulFjAmH5aVImUrh4v3PPR+AhQcR25C2\nScvFP/o+JQVqDj+aUG4JgSrav8efOJsdOXtRKu46w3Rukr7uoxl3G8XEUnAc\nlMkNoGTY1xHXWG6hEiV87vYhbxNllrctsateuOqnbHe6bhIlAAm62PP8b+E1\nl+IE5HaLJcp0eRIwu8tJZSOxvPxCX7MyZBC1tc9WFxIpFC13TBkGTE3GXCDM\nkNguYTiYMy6pvgp3i2at8sTUy97jr3BmVmS3Aj1Mf9aoQaJlAb2mmVhpY2zJ\nvg1z8x8nBopmmP7wQ9xfJwIvJobqNretHhdHBYbF6+yUE65Oe1wQP9oEoz/d\nFAKU2cs6ex77InlVzryocpdWZhl2P2/BKHbbw8zIYkzS+MQy8QLXTvGjdUqh\nYKFt\r\n=zhZN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b52196498.0_1618862282329_0.6946432177521711","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dd4e28b7b2ce1a3b448632fe7c6f6e5ad154f273","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8ba3e298c.0.tgz","fileCount":55,"integrity":"sha512-P6mhWzLAlOmxAn5eVZYrhYqvWlQlIMwdzhIrDkqEZsH6Z0hrRobi6QgULO7Ngr5eZtajZjTa5AuHGr6CwF0heA==","signatures":[{"sig":"MEUCIQCe9T3T7VXLxGALuxbdEG3oYllcwBwoRQxmOYvqr/Z0lwIgQ53SeLto3pV/F/SBq+dLF1PrJPpTfgYDw6rTJp/ZH48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHvCRA9TVsSAnZWagAAijAP/0Rem7MWwNlntuxOU2uX\nKoAgIObC0pSZSdyxdb0jkJtfmnypMDbhPcE9AC/Hje9cv6N8oswQaMpBMbaz\nYY8gszDtwx/NUHXnmLUHh8PT0Xu4kCuIIjyqIq7Wv6WJ/zTimsG2S/IRkdeA\nEWIeQBI7SBrH0qRP97abLFDgd13mIH0256jzG1WWHtR86IWTTmIww6/1cuYS\nAJPRo6ovUL4WWc3BdcjqaPhvmGEG0eRTCKMTCP7Z4goUCd0lbOopxD/nBNqI\nO2iDxPwIqQtlvkNMpv1h4y2sPCeqeoPWtrLJPfjVGeiUeUnJd3BvWwVSEVgq\nfnrWR6Cki8HBDkgGpfeVRSUqcIrbswXaSheuz8xiJmX+jWTxD5I7azO8LUbq\n4kgGGzW1M3J2P6MFIn6PUtNgCtrGOaSZfp7G0cA+ClkhvCZDHMIpASc5ETpC\nVSPH9Eu/XwmljsbCl4J1fpWhSPTG+z0rrBHh56JzCqL3sx2JiDZ3DjlnjboC\nPeZvEssssTMihk1YLD5vJtSXozBYMPIkVGyoOG15vmUKBLpL8Gh4wM3c9Xg9\nJt0d2zPtEyoVFdb4LCv3/kkjo/YTeouawKIejbsTQRqbUgQ6Ep7Noxd8yizg\nkjDWw3yGlFAPUgK4wQH7F7ytHu0zz9x6PNKJJzSxah+RbWcO3it7795Altn6\nvqdI\r\n=s0rO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8ba3e298c.0_1619014126498_0.6855418944631162","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c7c016720361c34fd22e8f273c036b8a86b640b9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c629eab71.0.tgz","fileCount":55,"integrity":"sha512-qAvOR3tbTQi4H/iYDtgZ+hQJs98F9SniQDOYogv8okboBG7eqGswgOvssxQai4x5TPoR73uTTAVmcmoG/F7X1w==","signatures":[{"sig":"MEUCIQDPcg2hQB+MUzeTUAlKQWWSeaa7N/SCK9sjLeCyMi/6PgIgN8NSJQD++FoX2UN3svRMD0eMO6L1eGbp0NoDR6njIzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOjCRA9TVsSAnZWagAA8+IP/j6ln7RwTCsIcnIknTEO\nSoqmXarTKoegzQfT9lRIYIKlkzTrXhyyQPLjiV1P684vg5whCeJmBYsWJlxU\nLjsD710p7hxJumtMJBNDeqJ32GBiqBQcdhNoXdI0oyfosGaymMJduP9NYqAm\nXPAMm9CBoQf4387MJET02+5YMKYRNxs8B/DYxyoVvK3qPYUZOngYNNPCWp81\n7llw14Eg+EQWodrOPaEZDvfQ3g+4SNnzkPsxc0boHMXOTrSHTz9jnq9DANCs\nTbf8TzRfwAYu4u8291Ji80n7T+r1Y87DKRgWicnR9Y2B1sMuGxoOC9WIFZFe\nTh3KP3cfQv05vf8Th+nQ9+OPRxYNxkgzfnjtwX3q+QWLQHUKgMAnAvGAUtNA\nNcS0NSRfiob1HQJ2YDRZM+tqg+M4WdrCWO9xPx344vqXRSgLeB12NtcK/IWa\n3OuOhJZaJNWzSza047nhR5mtzX7qMKq2FamaIcxwcFDFMmslTqJNluU44Las\noXliIiMOgPb0qV+FO5JE9fU3U2savgZjORwkc6hyEDAzJfaT0SX/S+tKFV56\nd5lJy9BfLnd7zESMwNnSNpgtPmYyhaNYWF2jWthD+ptd4emJV02UBzjTxEEb\n1JrhrYj3f7Qc5g6CN9BUm8/XB217B9csEZl7/LYaPZxaBSkdgJkNR9vopnBq\nOnXC\r\n=XJ+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c629eab71.0_1619035042609_0.7879470678498255","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4a3bcf80bfbee7a66fe467759de2d915d3481486","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8ace3b810.0.tgz","fileCount":55,"integrity":"sha512-UgLAXENbIs8tvlO+p5J0gFKk6qLbHMUeRLDSDBGHnUf9i3d9lxsyK7qooxvFPCrNVQF5p1aBgAUQxAcukYu1kg==","signatures":[{"sig":"MEYCIQCj+fUXtjrBBUcw6xV/6nEtLongRmrVpjK8l2wHjISvCQIhAOzx5gm/6VIABrr25Qp7AgtBnNG4aWJj40SvKQyUaFqx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0oCRA9TVsSAnZWagAAn2IP/j0CT4YKC0zAXTpu1bxV\n/6QJg1+nodX9phz5wdryG5gFM3ygfTYW/rwSBuWEX1iX/gSBClgTHuVSCS6/\nmfRQ0Ci1GTFGX6MlHMf8UdFPTjaWKW/RziS/zM0a50vSjXu9efFFWXye+aNg\n+EETNYC4q6lGy//iqWa4rV496Cyo8NcvHZKS2E3gyPhy/s76hFTq64wAWm7U\nXVcfPbmsN4NOZ9dye7mxmjlF3alEVu0u7LC2HqMhCPg0kLe0BFh+UGyJ6ief\nXTcySWPhpWhCfuylizke7wNuhKF7AhlWbN4gOpC9FpRScx5dWR0s/kOCANAA\nFS8DLTZg4KQy6mDm6FNajSKl6PftvFVMfAjvAMukO0QMZrKC53k22xyxxaNn\nAfdW3ifvoUtA6BFC+thwZrR+bUXbJVOk7hdWDsbbsyJ9cwh4Z+g28S2tqwkM\nVHeF+Bd5cXCmis2T9zkV5JKYfkSjvuaM0ttwaPwoM8dAOTUUTmQp5s8W//ZY\n2YozB5+AveSvMbjJJHC1ucPL4nl3Nb7y7tIDu/9YPCh56zclsKS3u7NI8mw+\nMSi5CDabso1VaHnEzxDkSu7PrLrwW5M8PCMJuEVcBQym/73z/k/UlQdeuljV\nYbe1c+8NdQen4TxP0y2TG2bUQOzkJiKujXH8SShMYh0lrndGAvgkxmA40Qzi\n04eB\r\n=qXiX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8ace3b810.0_1619037480026_0.20135323698415974","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a15f6bc4c7b62973eb3170ccc2170aa4ff7c3254","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.70beaf42d.0.tgz","fileCount":55,"integrity":"sha512-pgdMkxshAwkbATe1YgEAX6M1LZcdOm1o5vmwbYuHM+FqKrIKV/EbuHk+Jo9NY9NX15UaQfIg/ceQJE1zVFkMNg==","signatures":[{"sig":"MEYCIQDOWOC240Z8afLlYmwQGwyfhZKmP5y0OpZfXiOKRb13VgIhAM+VfPCb/2HFT/v3cp8skkXtZYPdBe7sQRzDEqwcrdwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/gCRA9TVsSAnZWagAAiIQQAJ/j8n7la265a8MF+KKY\n3w9nMcSTAzLD4/wd0upo/q9xw0kAnBPeQh6aOpk1/q9ms+84OJaOv8v0M5OR\nqbHrP42S6GRQSyX1+masOkB6+GgXwGfTf8hqFWoaR03zYR6RTwSo2IwtB/yY\ngMVG5H5iFBSe7aCVP2gc/jY0R5hmRUid11V5SEljuaE7/de5kyVXi/x2/CD0\nBky3Ssa/ZjgBH/wy041vSuQzd0seXASM2E4w2Zrx9zT1JzHKgGcD36C//kVO\nyA4f5y/trr2rfptEEic7pXaSIyoa9v7X1ty4Mwh6eHWZN3vER0o05IEQ+cFG\n0KQyFSa0Zv/f1vshdbthBB5PJyaEOCfdzG/Hv39CmYB+MCFdU87sYCAV9vZ4\nooBuQ/WPlC785mxNtrCB7XH4PyzZ63MaGZIK3SMfMy8nQCSLrj6/8BRSI3h4\n5R5crpXG83arrw74wk1GDBYHMJF3k6mmb9lSPUSTnk33FMdF9ec3xL4TJmNd\ngNnpMfEd0HpcoSL6zUrAB/SMPG4GuoEq5jHADJ3jVXfFj3zzovbQGkGftVhp\n/SPYYBszrJ5xN1vKD9LE+aZ4gzwxOu9zkB0JBZE9g+LxUQ0M+8OAhK5Dtvxj\nJp+BkM5H1U0Ku7Dyo1xkgE1EUJOSu7kKXJPO0Alc7QtqgIdWabfiu1aRB/NI\nsOZ4\r\n=GW5X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.70beaf42d.0_1619038176421_0.8935564156262505","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/segmented-button","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"180053f3f7a618521bfa0543d8a7a130eed335d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.cad489689.0.tgz","fileCount":55,"integrity":"sha512-33uyoG0gSZta74AHCJQESWFJvDN1FebagtJ5klMS5sWpuSXuDfsF122Gi4Wto1VtUt3/U4g28/8oro+M3yVgzg==","signatures":[{"sig":"MEQCIB+FIp7qIZ0+PrtSTNUpsVfbUaYF8GM7yOIrYhBX81JiAiBXOmwbZ8VMlQncRpAakdTffKEVe0GF1lBSbSb/NwXFaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakpCRA9TVsSAnZWagAAYYwP/jeMbOR+tE3s/nq6ODmW\n4R7vlzNcOhQWfTr9xcsmF9WtbPDrhEggrtbSLafoQoo58+Gsitw/h/VzSPEO\nSXDr0dnZiIVs+jofkk6hdRUpc/TOTgIdweBG6LoM3u7D5O0U6SzKWFJcnfUn\nFxK72+zMtW/3ggYz1dudVkg+hPt/agmIolog8asd/XMNLARgon0qmPiz8Vzf\nEZWsOLWS3nUVEomWrCFu4wfY2O3V9Y22HDTV2GoLS1soXezrF/j2zC+7zJXD\nfZKQ2pA0teKep9wwSwx5c1JJRQ5hgzF7FllGYoBrbcZ0iIkbkCLN0p8cTsjb\nfjonC4Qykka16OdVJjEc+V78haF6R0LnLzC48laDawvg7cPg0fSN6fJ6iYqt\npRXSIVNRhfIWcA5utKXsJ1lgwet8rzJ2brXr2hrcfORwJ3oxLLRzq/ZA255h\nuIcPGxsz85ET4PgXHPQf60N3on2qYFDDx/xKpv5QQg9v2qs8JgzQU4XoWmwL\nDouF9Z9alHCqlK/tlvzwtcKijtv2pT5JiD23s0zurSIabQBnqiOv5aG35qiB\n5IeLEYRGy59tR9+h30ZyVhJJ/PX/R6wut8hWkNtdkTEYryc6vYIWipK2XOzM\ngIwhvjVrOQh4zjeac8DS8LK7Q8mEBG6cHc8F7p5fnpgesZwx8ypbSyknziaG\n8j/P\r\n=zXCl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/touch-target":"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/segmented-button_12.0.0-canary.cad489689.0_1619110185027_0.9885945240698477","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3b706b1313b5e7a19e20c301c80ee68d12deda0c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d928692b5.0.tgz","fileCount":55,"integrity":"sha512-44ZkZseznAsPwqKq0PoLkMlFA/rSOEvGl9qaaVCxIEHT2a+KC44UDPfKCaX8N84U1dOHUAk7Cn1Uvez8KeqxNA==","signatures":[{"sig":"MEUCIQD4k/u0Q7F+LeqyhiJmUllTlA9Xv3wDQsM7LvZl54uyCAIgTBvJlqG1DQCL78ULOES4rKRBsDJJsnMykvkV7mFfxCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUrCRA9TVsSAnZWagAAUkMQAKIkQuzOzc8JeSJdKTZL\n+fDNYrU49OaCKRyFR0SyG5PqPr9roqSvV5RpdwFrlH5Dk/qOLj3/YADELLIa\nsNfeg4rEjwhXQTLlxulYwpxf1giyoqp5qV1TJOIqrLy8htojvdO5WcVMF8/9\nWEBVRHONU5hvjRBupinsnrN/GrSNMzhiA/ImkIyxqK2QuXT0pY5iSK0/T2+G\n21IfIx3THKWAQMC5jG0fUM+L6eiLFCBWt7n9hg9CdEPRLnhuXSZxDhxs+sqc\nfuUSHRr/EDrko4ZdEHvhQWVfGNgOjTd1bIkKUuhzL1zxrToLkXyB5FGFBp2R\nB7/LLez9XR2EMosvKCvmFn/fwepoCCECSUtkur6P2qPwu5zrYSslSWgCWTLK\n+k3eGumBPKnZeQEkUWcT0PzfePb+zP9GhlwJkEbi43CdMwl4qxNcvfDMoXE6\nphpuO1g5YxpQWw1yeyNUFNBaxW62xuqis5ywKwb1DcWk7Us9tpNswMYy9d+G\nUPHjxMBPV38o+/QEYaGU9ozHTO3XlrDO69b34t+qChfKmExQa8tlvqi4nULx\nW/N3eUIR+hRu0y7fUalzvhmHKTJV3eIuYL3kQF40zKrdi6PNJjE2c5qbo55k\nONczAc/n+d+qh5JpUJQJyNF8wd0oeABAlLbQyfVz1F9Ht3MT9bWCjwu55PRM\nwrQm\r\n=80f6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d928692b5.0_1619199275340_0.7213706307805554","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"45a3a480a5a46601314f0f0a2d50dc284cff0414","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8f68de8f3.0.tgz","fileCount":55,"integrity":"sha512-xxZkr8KTJlkGljO782seZb+hrS4jpwYYqshWbR1hDKL3h6W9M1oY0wBxjrt/fXULxZma0D27WDjNDzTnqjLyiA==","signatures":[{"sig":"MEUCIGxFaK59CAfBdviVw7b+RNb3EwWIDCEevrBD/Imnl04FAiEAlsOWZm6hms2tUCiVKqnD6NmDrtFoIiw3OnJHjcjDCNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5DCRA9TVsSAnZWagAAAZAP/0usgh6GB3GG1ySzvThC\nfFZew3VMSGnAKF05qEfywdrnnVrPrcA7mDbsi+VUweIbCrAEwyDK6Gig5l7k\ngSf/UfyrBu293Ix7yqGHfVpuGMr6clT7dHDXERm/jkrbp4AFEGQuifrxGwU4\nWoeEVskos428T7bCJePYaYUM8BkyVgM35xe3D+6BOJP8wJtWUNIbHk1bty17\nz4bhNrhCGzw8z8Hmp29v1ehRkLiKZOW1Vi13+uxdQIdehFFEteeyZKG/Qk+j\nIeN8/WJTuf51B6mJ/jCZhN26+S7s3qL+KeCE93Kb6XaNUPkbf3syQjX46qW3\nrmiwzZfBL0mJWfHMnJfJxqpqGQVy0VuMboFi6yp0RIdv7BIUPZfD1TrpmBdS\nMezg7HMIPC2jI8VWRDPYgcFY2Uv+x55y+D05+o4G3o/yir2ddwqef+YdBFGZ\nXIgyWzqbl7JHIr8AbqEur1N2qEpvniVVDZmLfE/HmFndVLH857AvxZqKjdaR\nfTjvzFts4BLdoBhhZMWVw18b+6b4o811NDm5JYVjLzQhRsn+kN5WP/9lJGem\nvpeTWztc51d7tENeodX+8l6ejnlgmLShD0pWvlkN0lOtjlTNSBk3AGn6DQbf\nAZq4/NTYOLGZoM65e/1hZN3CFhT9PwdMDdlIJ37AdUAPRBK7ztkkU0SXxor6\n43y8\r\n=SmBO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8f68de8f3.0_1619201602595_0.9213766699361665","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/segmented-button","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"05e300db2beac4daa16d7afc0ce40d93b9c46951","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.05753cf77.0.tgz","fileCount":55,"integrity":"sha512-l1LtOSq9Jcp6jqnjZmqjJj/MPKofo9pXVEAZLAFqw5EtT9r1yquEJfAM1H8FoBzfKyQXv44rdvA9+Pwpw7kApQ==","signatures":[{"sig":"MEQCIC8FaEdCuRlLj89w0K7yTISoO+JBfShozNogmNABL687AiBeoUfVRymGbHzPwLVVuv03BagYtgW4Gu/Ik6fmapMR5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1uWCRA9TVsSAnZWagAABzsP/Ah1W/K2d0Ozo6GGTzbi\nJ8D4b9+1VLMcGA7UvsWGQ6WVW8SoZMo5yDIgGCEBjE3xmM365G/4j3Isy1YP\nzHkeqfjswOu/kaaUx30rdzYxptxFQh9SWZ22DUwYG9GLxD/BCnLTZvZvalc/\n9gk227yReRgrjf8UXXzlEy3INTQZ3hHWmAjnOB89kvSUxM3Gdcj1xq581Fok\nsN2hS6kHzmlqbqnxS3Brj9cBI1qmHQU2Xpe2baFwq0kFxBa3NFiSbtgSKaLe\noKxNMP8I6aO5gcFaw6IT9t7d45kKE0H7tayn0JIEdhjDZ5mt7l1cSiTWJpeZ\nth/OgF+3fSAIuwVi7TkdA9Y0kDcWChnDSH3bTYSoNFcU+LzSU3i4yGzzcft+\nSlPXh3jKr2jD/K7fxULNjYuchkCnoC+OvFyslYbg98ikZA8AvC+Zrm4dJSos\nwFXiIn0AtWim3eZl47zQnbOkIroh6aJSE5PbXw9bPh7nj6SAU2hpOgyvWa8B\nwKSdbnGQSV1FJa6FEoZ0BBikhBt4AxcciE169iewnznk3nNZNvjvK4FxlzIb\njarqVIj5ethI40vGZ0oZwD0ePuMXgX+OQsS1h2T6kPd1Zcu7TVHKzPmBzhBV\nggEu/KAyfdnXWaDik0lMrq3UHiSxHRMb7gxhpPdMjNi3tZPaQ9+dQc6rkwh/\nO4Pe\r\n=7h9L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/touch-target":"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/segmented-button_12.0.0-canary.05753cf77.0_1619221398328_0.943110237712631","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9937ea09d00d097231c31150afe52e4a7282ad60","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ef43e6d96.0.tgz","fileCount":55,"integrity":"sha512-HfV2muGhz+/InCgTVCs7EgU7/3Nr2i45r7XV9B41rWzXHOswnv6ZqrGvt+m7ZGGDrBKVIUSaAI/sQtQT1Wnqhw==","signatures":[{"sig":"MEQCIDBP7BgzeDqNOcEQ1ZtfqvrAh/PgrTwjHWHnf5Gx0+0FAiA/d1RXMtf/YVQu1xSUBNXv0OIm24r8Ha1in0pP7yEx8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10VCRA9TVsSAnZWagAAneoP/jHHZVE15XrwreIr6+HW\ntZd5nlC4h+Xct/QpZ71vcBL+2bRkC9G8xo4q+87M0ldVt4hhjy+sui8f/mPQ\nkUYY2KjmWd0sghtZnwS9RbsqgoazXVKMhG0Sq3R5WPDt5XWoyzVwl3DLkdvr\n3KLYDfw6RR7ErJjC/ya1CHh/lJW9ejqpeCa2VRsQqV0WSnSlBOAPFwZmsHKd\ns/wQBWyEcYxra95O1hQgLuMttdXB0ToidqvJPFUbWjfhEc5C3coOoYjWdP4B\ngF4aNg7ayEpBAiIHmuKiA004COG8U1WukVTO0MzqT/F8RxHrI9XW3jKOCGyK\napztENwCtvbvn0X+1xE6BmNTTt5nEewZISCvgpNJoTNJ5A51QsRbWuoA+t1k\nZLkn6+AVJ44htE3Zy/lmWBukpnYoPBKJJ7g63FKUV+W2FjvCLlQ8v6QgHMxZ\nNbOQdbbcLgY/ZaigbtplE93d88NUX7/xMmRoTKO4LJGlDHL1u/ErzyHejD3r\n1SuWG+W+1L60NDjo+ypaOylm5/juXuXU3FCHfAWqGjd66NdnnLXA7pCOy7b9\nsURCLB/9v+eDya0zzP4egPYPh+jD5xM4vqL7wK1SZbsGFJzAl/I0tKMSXSzI\njQIFFBmZk3iL7CdX1IGyCJkCQ6c4fOkSPir4IxuZUItVRVoPsiPc46Xqb73t\ny2bp\r\n=t9A2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ef43e6d96.0_1619221780921_0.8571983191582009","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/segmented-button","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7ffb9cd7e1a1686b23799f79e5aef00f84d26373","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.197f64fa2.0.tgz","fileCount":55,"integrity":"sha512-VWRm3VjXJD46cYraXAeHthoVKEi6mLXtKrZKPxHymgI0AdMPjT9lc2Ocdc1uKIrQr2HqYGJE81kqY+IepbhPWA==","signatures":[{"sig":"MEUCIB/wF605++J8JUQEkL8d9SXfaP1n2upvlLqVKKv3o4NUAiEAlqA5ThrBwhbDzqyZESu7RsumHb1tRiJ9LKT1mCKa1DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPrCRA9TVsSAnZWagAAdQMQAJHMW1K8CG5A+wgVYx3F\n/kg5Ljm3EdCVOwyI8t0w0Kx/OSKtOEiDQUIpm/vKRePz5Cmt5a1jE7ldTo3P\ngut1yg7D3LJ2D0rvD562zVGZTztsHjv0wbTyzDq8xrBNVBVOJCmj/rPKNacz\ngTKfECIKkbYQElIMwT1iA+BtNIivNFffIkqA//kaVb9wM462jNGgJrfKjmrl\n4IQIRqo1Oc2UU6umMZvmlDicWJq0kEs3NWkrR40nOYiJFfDt7E6B4RvL7zVq\nhY42ll+VDNKYp3RCbG76Qx9AQfahkNfDkymK33zYA5Vms8AcyP7DX3fo5m3m\nK9Cd+AMXtM/RAGXToyRnXplOjhNNOYv3K0EKE9T/F2Aa+U0PmxQT7z+KhCjd\nxvmcVmNDVFH9y3Lnh83utCuLd52L4mm4KKU67q+oa4YLMt1vXr7rY0b01Lkb\n+X+XTknE31lq4ERlkJoXK6ksm0cyx+5k5K/mGNVVsOQOyej3lXrZoUzBL/Ur\n/FprUwi6veVfAzuHhmeKI3TR0Jfk+ITwpmLapvhAsByANOXr03Use6uZzpap\n8pohD6pJS0eF4CzgdN6Nx/5dukvhw1Od6yFulnNJX08k1cNC5+HPtvdPvuW7\nwqW1UyHN5mERqNGk6jmn2EZ8VQ+WDXAOHXdDNPpdvn/yIbMfzsPmx3PVjq1i\nCqk7\r\n=7bfH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/touch-target":"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/segmented-button_12.0.0-canary.197f64fa2.0_1619457003387_0.30498269213213036","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/segmented-button","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"692f7331f5728251409b228c0e82f5c7d21e7e70","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":55,"integrity":"sha512-Itvtu7L5IS8qc0rtkqme+as2N74hZIFZG/wSYy/Y+PYMWpRAhx2Dqfl+4lVoaA+uBbwlYgwzZQljJgE3/TEmwg==","signatures":[{"sig":"MEUCIFYaluLsfC0ZdCrJaOTJ8qLMQ2OWUhWz4xlSnwdK8b+iAiEA/wHt/X3eek//zPzniakGsPpL7eDKzVD05rhbQ601R1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2bDCRA9TVsSAnZWagAAhaQQAIJ+8sR9dJqtn9z9Hxg3\nNuhqG1UjBcJC6VeB4GaOJp7rP1rFimkYqHATjn2KoSJarBwL7JsEeuccg+fu\nAv8d+ahn/T2xXa3lwuMmH4EKteVynvKgxOQxDIzaSWqGi2ATYNqn6pohw03a\nJPYQKHGwS5W4X1Qfqia+sxD+oB2lm2ZxmFOmak3hmpYrXgydWYYHolNgnydE\nbNPME3pYU3pIZ/S3/+mdU2WRCMIvDfreCXfvI5KcGTc5ErcZWB6oOGiu0TAi\nr/6TulvC4MdD4KSWWAMkNKvh1rZNX+CujfYmdatfWJ4Z/SB9/1hQnc/ezP5r\nvp1h7lXoGIAcMYC6R9gWcSC8Uu7NWTxRc7uxv1Q3lec4UDUzTezd56mDxEhw\nyaPWkcWTKF1RSo0oxq0NRJTkPMFOv9PToQacwBZNftNQB1KjZetC0+PGZ4VZ\n0LYxhfXc1unbqyLeOGco7IGqy32HTeokViKPgaTBhQmGIzwhFDhwUUc5/WLv\nRdDGOEFF34tAQuVCQ+vDjyKnlQ7ZEvaU+CWsJYE2CpsGWojxbTmU5EaUpF0l\nFcUHnQrvQs94Etgvteg/RITFubdxKh7pXHa97K/p6ntdKj7zxCHQu8+Ud4Ik\nCuhBaStaV8jA6ZhWJmETs7Sh/rTUCg2gf7JXmD+ZLMm5VU2SPeSR9hCOXkuJ\nGLKk\r\n=cK8q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/touch-target":"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/segmented-button_12.0.0-canary.55ad2d7d8.0_1619486402793_0.2041152172326255","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eca4828ed125aec9bcaaaaa1adb728f2c30b7367","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ec4ac5234.0.tgz","fileCount":55,"integrity":"sha512-7eKeRPlLpxVZXQU5cEek4IhE50e+gcnjv93dtJzhOtQqZ5w7Vnh450BYNAe/dDTOsrPdtw6v2IxRBkNUdLbCgQ==","signatures":[{"sig":"MEYCIQCuqx77CC0/0m0RhgAwxFX8eTT0nW2aMV6WikiONcbifAIhAPSb6N1wU1ry12kFZ88G6erjUYVPenQ9F81YH08lmoR1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8Q3CRA9TVsSAnZWagAAPzgQAJeXkEU0fEKyyYYS0HaI\nwNHit8+GnEyE/GwmbJZK6q+XEkqOiInXO5NvV3FsGLYu15keng9OvAhW6d/M\n9xYMQKTPQ38qAID912xi4p/yLb9o4NfRB7sImeF3I6e5UWuIKfbe5uYOC4wv\nOoobOS6czuswIJ7n7zKCRNmVvkTwKpd9uhbt8XWp0KHZJcy64nn5+2iBD1J3\nq3Y7wr8YqqIUU/26JkBfYO73aCfDLDrzFhJlT+o1bk4cGdbD6BW7iNXZhIT6\nvcwkigiS3q/HFRrXVrU8td0P2eeQPd2eB3myJ2b5FRgKqxEPT4+6hFEywTyC\nYoS8VCT0dKOqRXDNFM3V7PlP1dwAlg34OfFEL/1xZNm8fVyUkhP+rd6mvXdc\nVO0j5bH8v0lBNxM8/NNUL4VhWvpWN28M/JCdJiChWIcRuj2iJrGTP8gpL97H\nFmTnqOvp4zNTmYNuDYtRvMSURzSa5y8NH+J23c3gZQxG9zUi38hvJZim/Xko\nk0+/ycPNlLEDx9uVKyDCGIdiYQ6zwIXAyXb/XhoBP/KUOa8RRpaocGn8a+iQ\n70XpMNZ9/ErJakKTgOXPVoZ3LXxWdVyxaz8Ga3Ab0QGbDkBYLztvGcmuUaxA\nB6pJgXVGH5xTAhO5I1zJ6mFeabGxIOWOFoVB+2LTDpgtiq46+1jzo6j6SOFv\naNY0\r\n=1adS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ec4ac5234.0_1619510326900_0.16138096998197748","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d5be563f1888ef44f81fe2e9c262d879bae69dc8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b0579acdb.0.tgz","fileCount":55,"integrity":"sha512-nollfhluw9bOVxyA9TbH2NryZkZt2vIfXzfqsDH+eqnF8tKSjsTrBHYQqiWiwSpY3CSDGERORFi74Eld7TLprg==","signatures":[{"sig":"MEQCIG+1fStxLFKlJBpPzXD2/Ffh44lsRZ8wxh433SjjLnDlAiBkU6T2vKXpTpOfsnIaiChFbiHbQbagOanDoQLLYf6a5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80TCRA9TVsSAnZWagAAWd4P/1oGUsF8CErJFph0stAL\n92bVsU/tiArsqDCZwJ5HBavDB2+wtt2ZyiHs6rssIdqNcwQ68AbDo3dPAsVg\nJXeeqLNZgbXqyI2XbnVnx443DzN+1AaCanhgCNCPWTN0wU8gPuD6xR601rBa\nJUO7CqHo6RFnBy895omBBeH94olqRXimn50khamjf3izRExhBgz0l91wXawj\nd1XE/Qj5LXaN/DJGhONS9XZe8a/vRq/bC/hwnAAg/ndxar6C8sLV1FcnBr/Y\nSCgiyYsi8iRPJroQuHNk6ZBzNOmWkqopb48RFS90YlHuVjANEBwc9WjDKI9J\nKemYwoW/fymzbIEjehE93IvPmNO0l1MjmDkCql1JcRUT0Lwvk8Yiv2kca31W\nqL6a0MF46TdRDQtyURcd3vfOSN9uj2OFnsYadRsFpxIbWblgERwCIApoVD06\nMM+qL0U2fi9KH2Z2/UnTHcW55v5W3eAZRyrDx6ZUJn2pkKxr1Os91iWcJABh\n+s3/w4QhODB9DA1EEmC6wWizN78YTD9Sa+F0KhT9EInO+VmVrwqMgE/rapQk\nUs22B4pqYnD41XuIlPcvpEJik/r0jZD4p96aZ3A+U34PaMT5V/rdOdVWmkZA\nzDJWc5m0OjMeMvJL0mFNqPIl0Emz9WzT6jecfJu8EdMlH1NcKPKldBdB/Nlk\nIC2z\r\n=j5+y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b0579acdb.0_1619512595302_0.3359257452204403","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/segmented-button","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d2f6c6aa6db72a30ffa3b0374ec55a63a34b92eb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":55,"integrity":"sha512-SIfGBuhOxJZsWR729WlLcw9E7IqOmvNvzwKXgz4Gxr/NTlvI7QvHmtejQ//8e8zX21VkPguA/elxWB2eIIFN0A==","signatures":[{"sig":"MEUCIGrpeZ9FrTD67EyrxUvkMGNuu85rzEa8nfq+OZa9eg+bAiEA0SzA75YPvnUxvDRj6sNhSnBZs88HsFJkl1Eqws2Iq+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrSCRA9TVsSAnZWagAAUOoP/AlVdW7HXE2PWtXy3N9T\niJ93ZC/qnHNX6CiJt2c0oPXuxhAnblUX9JTeQWS1+F2ZsfQLJ3+kFrvg5a4n\nU1BZFPA3IEvjEbhv2G923xhHX5iINoRpGloSaOZmfWFfi67yMb7+NX7SWdz9\nW092Uh7mVvvrAhLd4d7aSWQxaEAqldnu0fxMKGn4s89zjapdx4Mfe/bnUelM\nGofNMklTj10sIUVjr5By76+r/Te9al9CdWeGGrOR6pIqcAo/XPaLdZ/AqNC+\nasg9/okpo65CuUdB1AHaoWxDn4DZgTQsCRisUDTPxrfZMMruXZJkBfx9IcoH\n6P/Phai2ZlKzZN63Y3aPX0/W4WL7++dlblW2g8wzQVLIwq6Kh2d30O7mJPzQ\n85UC7dWyogtYgchPhl6/bl+bWhuRTRCgFkoTg9LXxKEYZXma4VEEegn/FqVR\nn97Zttb2Ap1T3/CnlKoNcwr+AeKBaHA9B8P7uDbp1a2qvXn5cu4PH9eYlxRC\nHMG1LffbfoZGau2WJa7upwzDRVn2u/w2PXQmXR/MdnmKO6noTKmWRcwlqKxN\n5144LVpYixfDOE6zt9FmwN9jiKhPphOekxG8Jdp9DghbD+N1CuYxXxNWmZdp\nZxLueoi0jR8QmSNFCwljNjXozBEKDWpVzbk1KeL1R5hkJXpR1WYRlkaj0kya\nAAmu\r\n=h83N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/touch-target":"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/segmented-button_12.0.0-canary.81e2d4ff3.0_1619557074440_0.5473215711325399","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8ae9f8e5a7e7033055ac96b091099480ccdee03","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c8edee52c.0.tgz","fileCount":55,"integrity":"sha512-g32deKRS8/68PBhtDbhG3uWVLyUrmFZKRlidvdUxFfsx+ojRSU9/4Mo3SgvznqqrwPdvvxnGb7wSvqdbmvENqA==","signatures":[{"sig":"MEUCIQDBa3Al6UhSllUDN5WHq50Wb0xgi+dyfXkqs8QS6UuzRwIgKU2XHtrDKL/iC/DZBP5nurXoSAztl+pYVXcXM7CINgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYvCRA9TVsSAnZWagAAuXgQAJYYu8BqIHt/JVUDW94O\n1kTgrsd2hskZ+WnlpEXBC8JDkek4uPxfHZlcKxR10o/Xi/NFwZzAlFY5gh3+\nljUefeU6LVu+daF2d+rtSD5fY/p7QZtA4UqrPop7qfunRnhh1hjSeYSR70PK\ngLhvHhr5Gg9ael6f/MSlx+f8M8nv6q9+23Prxi4kBlRlmmqCdv9PDkV7OuS1\ngX58I5du4W9LUWy5TBeRiNrQJdbQ4UpwStUDENP8oYgzWCeDj4Hy378B7AQb\nEBf5YuOokCvBNPQXGcpnMuuwc14kQtNYJ8JtXcqVLXmqUfmtmU6BFc4WkKYy\n6DK1f/zgXA8U6ADeL2bBohaUBIpG/2U6QjOnHsormsMma6pvCegGedbwzrlL\np0kUSkPuEAs75gf+YhvYxIETZkjt5nCLjs1w812/Db7wYMzdU2khjKdIEKlg\nmgIIMyIxaq80dn3gQCahDABiwkgQbBi5BH6oRyLSYw/Us4GPqjUwwAVCGMNs\nkqTCJi0507vpV3Y1GTdfehjzlYF1nmDd1Vnw3nmetahMcjhioQ8XRe6KOCO/\nCGnqa8zP7+4YJw7Tn/EXmNNKn5KdEICfX7smee4eVjN2AhwGS7ka3PQIe9zI\nqLTaiewGK+NWbAsJMGy9htX5Xmcf9vF+U8SrQxtTuo3rMG1UU0wIaqwwstFs\n9JHk\r\n=6Y1B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c8edee52c.0_1619559983018_0.27688215793607407","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1362739d8984fb20456e61b7d7f0165db0d19f82","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f5b6110d6.0.tgz","fileCount":55,"integrity":"sha512-NTbBCrDNYEkdtSM6g/34wCxi6HYKj/2iEKon11VCfSWQ/d/iZNKZakHK/MXkmcEw/RclS6Cp1Dvro7eopQutVA==","signatures":[{"sig":"MEUCIGK8Tz/r5Tr2mUzJU1PbXddApQwKxI+ji3z1Ln2bdLgvAiEA45KRnk7MDj7W3vQYzjkwK0V4EfagUZ43nFDStOOcQCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIswCRA9TVsSAnZWagAAUr8P/il5UiB0qUQPob2IaQ1r\nb3N8QfOzf/kFo0YzsSY5YzMT3MNi3XTFYdj4R4JafA28VICiFgARYtVL/Dbg\nf920QYB1B2Ddw4dr9rh4WLuRSJ7Hs5sDS7yVXQWn+UfUEE0fWKWHJVm1pO6Z\n6YNDuYoW/F770GSLv7xLUIGAC+svlXSC2IlOt5E32c7RrfZi4VCaVMStNl19\nd1KnUOCtUyEziJg1Z6iTseAaQIBQWmKzvvNNzmIecGelgKwHE6PFsbeJ4WbM\ntavfzJwm6GmNjbXuAjBx6QGOTxJAfWddBP32mxcreLf+tmHHlDHxhfU/3IPX\ndS2g/L6WSQvw2v7dX6i+j2hCeN4Zh+uM6goeRvBTXk/DNz3UENTfyvSiLCIP\nTvHbll377OsNXN9rvY6bQ9ypfzsDcEmCb/laCGSUMsFE9UhAZiA7QAMNuFUE\nMO1qLKpHyEUuOthrscU6EiINoYYiNCf14Ri0bCownCb+Paw19yQZDlnjjE5+\n7TTvTYn12jiHheeW6qg+pW2PK4qFYIiafGjRe9sQ6clbd0f+yeLjRHSYM356\nEt1ZzbMH0nURKEsPh7cPmix10uSIQFiIOKvvSUqlSJGks9didrCHt+g8xlQD\nnrU23m6L7QPoW3iyWDLDuQmyCpbZ0c49fPEsSp1j9XLSvHcaQzHdRqileGjG\nvKmt\r\n=6LJe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f5b6110d6.0_1619561263886_0.5164837017172432","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/segmented-button","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4a6dc814b9d6cdac003dfb42dcb3be80d97028b8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.cee9b9e22.0.tgz","fileCount":55,"integrity":"sha512-81x5LeNQo/+S+lh5dVnqqkDXQ1IJHJyIcZtZImI4pfV7Yn4OpKJpnmCs+s0DrX7zHFlsm63KIacE+0eWvGGUAg==","signatures":[{"sig":"MEYCIQCE74fmGT/OBRWKaH1B2Vb8l73Q7qwEzU7YCQwYbGFT8wIhAILd+CD+lQeumhBRMGN39KBXqLn2SOLoQtFmnrKkRRzx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKiTCRA9TVsSAnZWagAA0cUP+QH14DxQTg04j8CSjYf+\nKgGizG9QvSbiRMVdN8ZXVcg0TMSb5EHbz4q//IZPJL+4VSCXO/zmRgMkAWdo\nwZYlhgc1h0r8ACe92/BP3t63YrLjw6+Yjjgf11VXtZa+ddAwyt/uMDwqRWyd\nYDO/22/w6uo1L9syIQASTRj2QryvJFfpiFU8g6jgKPR6VjHXvdTcMTdUtMHs\ndSmhttcyuOHIMtzj579ctIP9keYmFSxq6cR8gbyvcjFkTlNa3+tNgKErJDdN\nl2B9XzhbxBt5nS0jT/Xu/rhxcXMRp14NAGoOh2YUxVOwnov5BZ5Y/zFrsket\nZyq8nrSpT8Grq+kYpS7/WBjW0t9901QsEPv1bQpT0t18G6Gs4374IdI2qJ7i\nXjggy5HnzyQ67cQ/MyDFqDYZYah5AjliwhEd8+RJBjnJZIcwJU9nOVwCduEF\n6evKo/Q8b9AeWipcpfCH+Vx6gUzZXBpM5yPKhhc0eGKk9zlq4Vki6mI4VTmX\nbXsU4pzOXXxYxq0MuBCN/cUyTkCDMOpAx3hC8T3vs/PD01BJk8SHoml5uOiQ\nuUNd2UcMGCQkDW01Olff11kwx3sRlASbEAiJHyfwceQbENU27Dc6yySNXJxF\n9N2exjbgI3AwfEUqrYpIevHP/4Hvr///c+FVOK8z5QmJNmo18bNsuyfjpsZ+\ncQt4\r\n=eT4o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/touch-target":"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/segmented-button_12.0.0-canary.cee9b9e22.0_1619568786651_0.7261198410457907","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/segmented-button","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f033d6d3bb89f548bc56f0564a4665b4e0405189","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.96e83fca7.0.tgz","fileCount":55,"integrity":"sha512-viJIpu4u+0T90S3z4TRa0LWZunbD1ZPtYZ4LJDm4uO312W7esJMda6biTamkfwk9J3OuZs5bYWTyDb0UdHPBOw==","signatures":[{"sig":"MEUCIQCdWplB5XPE0HncnH70eDjPKs5XNvpgEsqlB/uZFPMDJQIgAcBy/lxOCS5piVUBnDnHvaq4Go4tL+z+g/hNl0r4u4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMznCRA9TVsSAnZWagAAYAYP+wZrFt0dgOQieIv76Z5O\nqfDvo8FiROUV6B4I0/2h4qiiXe5kenx81gwRpRf7p8ljwbDN6/x1ASpYYnf+\nucgJC5Jho37xloAWhVH8+Tod3L6futP7bJuo3fT9BxdTL9Au2oXXDRL83VSK\nivujdWyS9iGwe3kNn0VtCPJNG2ukWN3Z4IjXePtZUz658ck+2rXpvsWVUfyn\nc/yMMZkrNhfU/j/eoAPa3VvWxzxGaiZ8FLqh6YIECDbiQZBbAch2ndv55elb\nc7nUqYMhwFn6MiAJSGMWCU/xxFwQ5YPrf4o+JIt9RmlVyRvx2gD+VXp7WPVx\nX5ORBVqFpvaRbRtM8rMKCL0l4Ejbt01RV6y0M8/osYkbgdvdlATuHLwcaS93\ndRY2GySQZCnQ4em3doR71lF5RE7uFK/xGwQ4XIGCoB7MikeiBLdiwSHXHPDz\nhLDXM2VxzuyT9u7ainoyYQE6Zv1IQw3iucjafGuKJoMZs1OEJJtY0f0KAMFT\nqgYel8eagFXdMBLdrSGkS16r4TShlqEM3PuJwCnjscINSsTGDpc4pbN5S1Xw\nhicH0pJAIP3/8AMSnWuh5+EfQ3SrzTGMlWzgwEAco5Pp+ebu7Z7XO27lyt2T\nF7JaepeUNkRVbok7XPwhTTEqCphV7k24W9XfZW0S0kmlJZdB+IzrLDywM+pI\nLlwC\r\n=CyUW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/touch-target":"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/segmented-button_12.0.0-canary.96e83fca7.0_1619578087143_0.8430873226724207","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a03a9e110eddab650906be3b464d0e2e894d1066","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4c497bd19.0.tgz","fileCount":55,"integrity":"sha512-hBpOQJH+KHo4bx2wFQhVC4DJIEXd4XIAPwRY1f2mbzxNxPfDaC2ndEn9HV31s6LCV670h/9Gp5QWwTcqPtBmRw==","signatures":[{"sig":"MEYCIQDbqx8LbXtI7CDFDr40nJpW9+SGip+kUu7kgBA1c3uJNwIhANu82BosCjgwOId0pIiQx4airUXcP3a6/u5rCyEldlgn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEuCRA9TVsSAnZWagAAZkkP/3DxLgz7jKrDUj4BGJPY\nboq+PhwdQjEB+mdHCtEoO0gTV7CLAG5Zzd7gKKp7GKPsOgrKBzrissGe0TI0\n6Np1im57Qsj//44zJ++s2sVBp0fbTpc20iF+ANJpvqSfh0on99lUoeGIThsv\nFX0q53FWLivRFRpXluJ7zC0g+9oogGb9D9h3PawMvFYGQ8uRf4ak5yqQODUX\n4Wad91+rpjuHWiq3GvvtNxS1+Fs/vZPOvTw58H3Eed6YBViq9gzP17ka/tK0\n4HwNAB/q1kIwKo/loJvGkS1IXs9KQVwoQIynowWgsCfDvqI0PDg/sV8R00Pk\nAwHIOhMuyATcKZt+j+eneOQcK07GioUgx/DmMVRBrXUhiAHIOzs+JVDQHb/P\n3SFxaBo1W6Ph1fuouEsyLupEwrM54WV+Bv33JrHuHZATVPdGseeNYrVuFQ59\nyarauLcfGTudRNOhK8U1ZLTQ/38i2qMIS+WaYDv1A9MPHWIwmIOoGuhyjsx2\njF+yHqp+oF8WG0djFJ0Q97osVtgWutgv6Jh5p/D7TCQK6PrIGKmHiQm7XyEj\nZTBN1MNUFo9n0LAO+y8ER1XISUqHhOjewxkjd3PQMJuNa5RDhaG0yQ8dxULQ\nA7K2RS8oWBjshXSVBvW/mfdScDJZch4VQNd/4huAKAvbtW8w8F2vY20tRrob\nEpI7\r\n=EuHP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4c497bd19.0_1619632429908_0.9924712785371608","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/segmented-button","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a693c135a0d69a18b4e8b9251406305d17af25c8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.105b15b96.0.tgz","fileCount":55,"integrity":"sha512-9SbyuQHbjRwhFWl4oAnPAjHYDbKneO6Yow/hsihSKLwOb4+QQ/gpvwTSuZgAhQWbXJEflritevfE6telgyAQag==","signatures":[{"sig":"MEUCIBT1R6HEMgHi5HMRJ+w9gzZKcsbBUtlFKJJteM4A9O0LAiEA+MGQbbaNtMDDf30rfWJzb7cgJaA2zaGlQDE/Wm6Kc0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidddCRA9TVsSAnZWagAAED0P/iwLnE7yw5gH4E0ONLkB\n831yWVropOeme/q0ESiEvIiyPeZ829AC5t1LLL0n1jDzVAQ0aByZdDCrJy80\nakrQ7nYnkhnJ7UoYR8Z6qqNbJgdHd55fgINOTWYQ1GE0G2BzRNph3TIX6Sm5\nzVEJml5D+Xz8fm6gnG+uxVSg4r31yE3kntd5Iq6PWMk0nW4WwkqmTJZt59aD\nEN0oWUZPQ7JYm6obARyQKzwrxzG6kC+z4OVnYBWdude9/iC+ytnRd2EtRa6K\nC+X8x+2fDe/2u5FjzB12DmPRoCe9a1KB7vVM26FOrMC97MqitdudDynuXboL\nUxtK1UvSBGARiHx0V1yRnD4yfDi+6pC/y5Dw7oTZBFwupu9Wtn+g7A4gdB7X\nkz2OXxAQ9xt4epo9ODeAuK9iHl//GDecJCG2fl+3pHYH222QPAbaKp51vcd4\n6OoEF/YEsRMlEXnQcg93/OFl1N2+acCmpb2IXKrKcEx3ew7NbzCxd4+NdMiK\n+bCFPFzjSkUFLcc5nMNxMQx/Rn4amTvnFpWkrUkFZGDRhQa7eBMufWJoi9cl\nQcqEInLtOaox0fZdEtInlP4PmHvbvgx5p3n7CQjgieJbWQKEDzxZd9JghZh8\njlzZvcw6ZQHwXAfhjiyQcx7rEahHOTyKW1L0Oczw42Os5vlYIaW7Y2ksYOuD\npDJ5\r\n=8D7i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/touch-target":"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/segmented-button_12.0.0-canary.105b15b96.0_1619646300608_0.09060849182681485","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/segmented-button","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"402c171dcc6fc13661b0dd59cacecb599b6f2515","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.6e20259e3.0.tgz","fileCount":55,"integrity":"sha512-O/SDb7zolt81xkeQM6tmBYwhnclGNdVIQH6N21sH/g4o7NhCAusZHKm/27L/L2T8myNQxnPA+EYy7fsqrAnS0A==","signatures":[{"sig":"MEUCIQCfJg2rBw2/18f+4P4xlGRBpIf1mQiCzSPkWJMy4kqO7gIgPj7v5s8toCqvPCCDBtp0PLajxeOA8ySgHCN3kq3L0U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhnCRA9TVsSAnZWagAArUoP/38WnHX5IXbF9X//Ikp2\nApAlaWOqeqldWp1klQZsP2Z4N8RYj/FniHdxDQo+BpQVRzB3M22+XVVR09+/\n5VfEvXRDppI0cGsDi3rW82Qp+mIieDbx6N6SMfiIHZ1sTakAauyVywMlhZH0\nPpeG2zoGTzNZ7BCnNtEZHtNnjINREobDCZ9AU6bOYC/Ml2X8CAiVvew6qfr9\n0XeDyfH2+Yys/ERwTGAgSE1CWPsKIGCRt3XQ9obkcg9b27DSvUAlkb/V5Kyf\nu/C6R6zbocDutjFOUiCxdxC9eUbSp/e6KUXnp6Qccp/Sh400dDsk9HUBLqVE\nRWw2z8O6dYchpCdf/r9FCq8f43jOmgxzijgILchgtK3WN1wHeef6k3elE9qU\n1KVswB1ErKWw5/7+vVuJOd6cXKxp/1znTrJBqiMebEtBhkhZJhByRbjGhPWT\nlBxTLTfAYa+GUJMNzJpY7D0CsIpCn0msShYeIx2TINyubgi69E/ZmN++k81z\na5KtpIdblrHou5Cio2xYL6nTpgam5LUqBde198DAE9fHkGCJbdUAre0zUD1g\ncM6fbY1gNClPVjiDnKzTgOfwDu6jwUPa4uZ57eubONluOLIZp7Kc50PpONi8\nivB6BBlDKdxG68sm63QQEVIq9wivxQ8iyHjGy735++CCbWMbyqDbRVZHT5Tb\n/WnP\r\n=PX5H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/touch-target":"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/segmented-button_12.0.0-canary.6e20259e3.0_1619646566727_0.39605460687195815","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/segmented-button","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"646019c18356b29de21cf79e3874dfa62d6270d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.0f79a5d74.0.tgz","fileCount":55,"integrity":"sha512-XR1SGiIea+33P7OsV2GPSL5qq7rBGNh1fbctn/zmu9C9+KMMj7LzGQOHzOftoJQIEqLaaTjmMwNDaVd1nV/Ggw==","signatures":[{"sig":"MEUCIQDRPCgPKL/YbwzfCIE79pYv0vQAjb3nBxiUE1V7LFp0dwIgKlyq13OudoBRZ49BVqunpyvH6hC2FMWZeAfQYM+kaH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieUDCRA9TVsSAnZWagAAxEUP/2qs1T/yRdJX8dAFuVqq\n6TbylaiL53qqdRjWvv3RWGYpD/NawBtGoMZMxYxg0cdUQ9Ljfb5gCsgCzr2h\n2hTne8DRy9SM4FDRSVysaBOVrdcFm3cmLfGjNXmOSeFA0jL2wqH5x5BET5YK\ncmpnndjxntBZBZFe3mX+xTpvGYTI2XkL04h+MJYG6Z9pxW8PL3fFEJV8NV9p\n9cT9s84dFUplGGHHz4fbo6k7N0v7LMc+i7HIqQslMBZv642m+D5NSfiunXNA\nsT2Y2xUAqGkoChY0dBmMd20NSUcz61mJ2T6sCi9NnivAOL1YEKwSt6yEb9R/\nGmjUhfoMCorTQAdEdKUwVXPvSIqz2q3VIcc0/qm0lEdWhrzEdI9aXFLbI8A7\nX5NA6ebiz6qz0ARAGH2Kw6ZJHMTzrL9+U5WnnWU0L3INtvl7ReESjCcj2Q40\nRybLuBhCanFUIHUieIhYWe4EDmptzI1QpetrVZqviT8R6Jg/vJdNow0OObud\n6BHUJnNVfCP4kbzqNR7t8VwIi+Ls4jE9pcyTkp69nA0MfCj3V3baIdhXF0Cq\nI2PqnJwNA/ZkDSt+XlYxlX0Vj6pIpwnuyIT4ZzkgEImJb2229iWR/6xrJQAc\nS7GyKfU8w15DCv17jtHi2NOnxB4saegJ1PDh4YRkdvfAS1GHuk2Mv+UJfbCW\n4KcE\r\n=vSU+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/touch-target":"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/segmented-button_12.0.0-canary.0f79a5d74.0_1619649795263_0.2747371262296552","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/segmented-button","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bde4b579c599f58df3ba0225c869f79eb66c35ce","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.84f3db9ed.0.tgz","fileCount":55,"integrity":"sha512-I1VBUIncmxy4sz6SJTvNcgJRJIgYYPiRRnm4XJajzBodmmdOC2ejc/rVhi+NPgUsed/teKpBlXOKVHB1xIKfqA==","signatures":[{"sig":"MEQCIDTgp/q3wq1CJ0mU8etK5ijNDf2fX+skBWk+l5xBdLkLAiAT6PK7V00pDntSZ7CKLla5EvxdS5Y5+lkOszDKJbBGgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisAnCRA9TVsSAnZWagAA0cwQAIsavGJGQ5zjLBuv9LGw\nQXOVGwgrN4PlN1vBmzWjUJ+et7wsCzZ1+0y4STF5oXiIRaviR7jia6Nb1oIn\n7pi5hxB5Bfu6GBoAkF0OT52CvusZC9j612BSq5OKc6K3nc+8LXF1hRm4Eb9p\ngmLu4PTXAZepbRqQTUyDXGcN3N21MKHplypasZ3RvKA5/oTS5RG/xf7fZxIk\n+6BJ9mk0/PySmWMsdb4UKdpyMFi185K+KwXG9ZFf2ChyzVASYLUyrYvmyxOA\nHoGBi6dR+Zixr+BfxcWCVtXY3rxUuXmZ4X0uaIX9kbt2owNE73mgdTT7cQmu\nMHG53ZieVeK9S3X+JRz9aaXl8Y6K2Emr6vZLyJIB4E/lMZtDJQMhBlule5/1\n91N3B5jCE26SIcneL42cu7d9QLRinKMjQ+EwQOc4nI39AsAzlDCdN5XtW5Pd\nAI2oJd3YUysSKuM8ZYAXeUXdfoog6en43ZB0z9jodoyUf2HZlHIhVxE8UokQ\nxfVdyIGx2kXkedSeK+Nz0BMrrtJpCM1CuYY9xFIQnAi61NfDdRYcOf8VtWTK\nXLFXKw07iHc9K/pQfOyweqXzPuETiscWerYebVjssKcx2TG4GwC97Dk18d2G\nYLlNwSyYTeAf/HVvNSY5omJVkMa4wTe+KC55ecxDlsDP7i+S5KoL2MG9vG2O\nd7sl\r\n=d/dV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/touch-target":"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/segmented-button_12.0.0-canary.84f3db9ed.0_1619705895159_0.05324726143597491","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"039e53a61ac52f949a384928c06a6a62837a4a39","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8fc29273c.0.tgz","fileCount":55,"integrity":"sha512-17M8Qy/VuxYQj/M6ETpeRiduTI+8+S8XltNMaVOMpMr/bJmfF02fvV9u6kmAXMkISyi5e6viF01+QZzgk0wBog==","signatures":[{"sig":"MEYCIQCusopE1QqyqaT8QE4TOXuIIHat25JyRQv87oU/+Sc/WwIhAOaNXVDty+HXkkoHl3+c3HmT2XJmkb0UuEBHrzddhyb5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPuCRA9TVsSAnZWagAA1ZYP/1ylTJIe853eXILTAcAW\nNViO2GLuQ4I6V5lERgBBUAMSLORLcUxNak1emrESeWdi8WDYOzP0ho22hqMh\n6s/PFVTnZHLC4r5QF7iCisIxn8HZZZzP2QGCh6SPJ2ourZCiJbqNXBHR00/9\nl2KVxPuQ98Kv3GGShdgNAWwLiqVht4x+bbGk9B3TmpsPe18vlE/CwBcbZEdD\nuHAI21bqF/iN1V9V/jT88o0B5opeRJPH8Ik2MKNhfzAYH81vShvgqXF0H+ki\nmQnxwDWQRWA6/wFC8HolctH0wDQlj0A0UilHzjCJltz3UNGg12hwiYBuaqhV\ngOMi4RgvVSH0VVFff9arIZyhh+7j/k9pcQDFQb36w6shHLq5G5nKxMGvP7iX\nlQqsAVYu3kinQOZ8lOWkIecokhFzqVpe4r2LKnx9KyVjSpsFUEq4n/mILwqx\nzBPXOdt+pTH9HpET98ttevyo0KPn8C3ZITmELY1iccFx3BySilQfl9kky+uB\nlQ+G/0N7FwQvp4ucxjfTxVRQfCndlYHh64UFRLKJomQ+mi7sU7WhpFqF9cEo\ny/3Hc6+IKo3jr7EK+xys9Wj7MIknop5dboD9I7XOGaGZsrNLPoCtolv3GZBE\nqN7lnpa6jKmRYnpH6geaS6hh0GazfgNeAydfdAnc6LmqDuJMdbZJJrwI49zb\ns05P\r\n=Z9Ac\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8fc29273c.0_1619731438268_0.21155591443388055","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cb6e5fd2eec8e982e5f019212f4c43cd4a87a9da","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c50d20bab.0.tgz","fileCount":55,"integrity":"sha512-khYoS5jmA1oWsLeafYn0iTxsvVmlA5Hgb6Bq3+ZMQFhlpaVfAJT9yzsgo6sutMaU8HPLoE3a8r34XNPQEf6iZw==","signatures":[{"sig":"MEYCIQCA24pkXyNDAtE4Nr3yejGGNNKtEObFrGue1s33afuWogIhAJhYEMnoUNdfZ0/e6p4+zXNs6JtLpTo9f7Q5mQDhJ9QR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizr3CRA9TVsSAnZWagAAlFMP/jB/QuqE5/JJ+wVbwKIP\nhYZY2mni8QfSvOLdv7wbWbZw/2C1tIHKl7yHsf/JotnVrbjPZpQlk5v0SPlY\n+oVnYV6gjbe6QWpii1mAElmFYd3hAV/oVBsvG+YtOvrZAhV5Nc5WiVO9pypp\niu66VWz7hbjASSjM7xIl227k0OS1CjsRef0eA8tVDoMAVXZKfJByYF4dBe9Y\n+IHHyjgt4+id7J0TGBl5pMaFKjUPhydwnsbjsuZaTq2caPkllvtxloDvuV9y\nhOqHlIXa14X+ap3lOnd1qRHXsE3vWUcL+7yS0cja/dtEngConp8SWn0Ne154\nvuU2au6g2pmU9p1jGG7WDX7Ya2YfURDrepPm/RzdOY6ftfPoF1lVBGwRqAph\nZJCBV70n/AoWWPdEtyOvM9hGZbvsZfs//BSnfJzBSWid/RkJa89TiF3onQJ6\nTXwJyiuvug69gh3T29yO0IDZ7vxozpvSSWwrws2qMIPLwmUeeoVh++aSQOlm\ntz1e56AaUz9huI7ugI8qNm5+Q18nN367IJ36n197DiTkq1eoOU5nzr4BaiFl\nW95pNhyA7bd0m6MADiBDYhKQdzQhHfeT/NU/UA0mba6uwIT5cPiOA/8bsR2v\nBDmzOdHXYgwm2SPWjHZ6vkBaABBtNyxX22avrtbEhxZckfF5NtRVyAFc7dzl\nLzoQ\r\n=442Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c50d20bab.0_1619737334810_0.7355638237212359","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/segmented-button","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec44b0355816b2187695f428dea3cc034efa34a7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.474836ad0.0.tgz","fileCount":55,"integrity":"sha512-AYHXPuyvmjkbpLDnfkmjipBnbxdhkle50sU7jus8mK+a3IHHiaJM065I0DGu40q0Oh1drYk5ngNmHW6fPnq3NQ==","signatures":[{"sig":"MEQCIBiH13uwW+7dtEfix279EYt5sptKHJx/UAIFVetBz+tRAiAxAyjBUhq19yLwOeVKO4adNLWhr/CjOtHsIpXJiNCbvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0VCRA9TVsSAnZWagAAU9MP/A2GHnIyVpBPcOpimaEO\ncEmDh3MbsdWQm78ZuIOfUTkhugn3Z/oKeRFkpSER0/Wb2EiSZ2uYacImhNjP\nQlkJi4JoqolSo39qJEIqyi4ITYfTso6iaQbdWX0mupADmZvJJp5pX1ltb4ln\nTlu0/LGiyFMipMrQ8lbybXkl79CJYQVGnSC0tEwDhM68XJz3+Ah+RlBmszE5\n+z2w8bE4YPIHxJLIDARpWPdt/X9yqe1Nd/j+y3yHt4gEw1O+7GGj1qi2Kg+J\n5bOLTYCIq8CGMW+sQ5qg8h3vUwqWPmqS0kSTWYd2IYm9EuCNAHI+V5gu9OCA\nYpnBIRMKXacqa5jDV0Grspe5ASZUWXporkPd6UvM70lhsMRVAA/6iLP6sMtv\nhufXL3Nz3slQ3hgDiQjGaXgRZTiXdAuaHix1ptiHqc0WxfU5mXyOSvCJAFql\nHD0LdJW3vMNVnPp27HkdP0pnydDKLaDfNbJCzsccZQfYiAmZTsnJh9EJ5Ksi\nxJQqopkqE+8QfHirrfKP1WmF2YtnGdFas6u3vZU3mpvSYYLlkkc1FN1/0TyS\nhrvp57ZJdiGfR40WZ0d67OlQjxOyspuNpXY123yZdPASGN6LYgDYGEEP1Cv0\nrW+GnHB3k/ZGofGHv70rlrMDBUAc/KFjmRnEyc95vQWffvUtCIJ8UT3G1vcP\nm9sD\r\n=ARFz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/touch-target":"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/segmented-button_12.0.0-canary.474836ad0.0_1619840276914_0.6669826602061959","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db86d7e691d39dfafb61c2ec24ac67e1460a4e4c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f5ad92287.0.tgz","fileCount":55,"integrity":"sha512-ICS0s8pSZo4fx9cEfQ0QdO5E5YiYXgc6UeGaeJ+80J0w+n/bHcSCcFkqHvpBYRhXkgbP0UUErCZPr1YKrUXOiw==","signatures":[{"sig":"MEQCIGNyYb34y0SXeWAebYQ/ir5b75oksXymn29DUkp70dUGAiBipbFJnQXoNYFuzG61auG3v53azoETNiR5d6DAeljZaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9nCRA9TVsSAnZWagAAydEP/3cHSkqnfYnfraEhOBBN\nBC0FrTyAIY79NYqF80JrsUDLCNepWiOfKEW2KsZFr14x7oviN9mWWv/c4i3I\ndd0ipakLAg1yyaSWKBDFhmQnb2p/xQqgS+JEKnHIrXz2FX72yNjr+38wPF5k\nic8tN+UvnpiIi/9JfrSQxQQ4TgBmfLd7sdF3jEMLwdMY+lycw2rhh1vwt5Ra\nief/Hz04myik0CZ+zUAd76lK3S0Nh7aK2Zaxxepit10OJqY2i31/LFufwIxF\npsD6L6Ehmrymq2pUzdU2TVw/vMrcfd/QY5S8kZHhKusLhiCxlPLRYCGbMhn+\n9Je3aoEztpQXClGw4coHDq2Km6vt3pYFVyh7jh/Qvfljd2p8AptLZ0ghZnBP\n6xWdw/gYEu5xMJmKWPI28qgZiYtmxsstJZpana/KUkQPryPec9nOXVjfiBgI\no6WdJBDvRAEEulDnjooViQ4dm4be2fecqTFyZs6/YkcElbnHrMwg+DNji570\nFpMhbtwGn3KZX9iiCAyxD+uR4d00YPDlWfFFYaS11DrunLAyET8KEaJ7R8RJ\nSSSdCvSbhQQT7i8DBZXNzIdtlsL38hK1b0ZarSqBU1IDiK6ul1vNNGjtt4Et\nfUfpG4yj5tP4i5gHGjush8dYNYwYv5uh3dQXfaJXkLtbDIEuXJealW/8DlQp\ncAWP\r\n=/psv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f5ad92287.0_1620066151118_0.528989245940024","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/segmented-button","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"33cdf888846e1a0307fe3500cdb7f7dc7b59aff1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.af453daf8.0.tgz","fileCount":55,"integrity":"sha512-uY/e8FL/ZVxocFP214WpS6mz7enDMGCFtEvhkyz8Lkg0RNMELuEdFDPvX5xwdB3CJ6Ml3teuGplh5Fe9TqBpHw==","signatures":[{"sig":"MEUCIQC2396suTfL2lQTTb5u6Vyy7DaMN+gImv+PV5EqbyxP8QIgQ6SGpof+CnU5TcNwsHepY4HGMdiZ/kSHAZ6Ks9Bv81A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEa2CRA9TVsSAnZWagAAJVIP/0LkNUGghxhefkwmaPXn\n2X5f17kl1mxgt+IyLsxE1IN/WamPYdRFExXKkFLGcF21fNeqv6znZUgPBwFe\nrDzKKZisa13OXPU7tvTavSco7WUyVzgZH0bwrAeQ1YQu/dHlyNksU8YABqB3\nGAQzk3dXjQiR0vBIMoXseXt4p3JP7RvMY2F929d03/rGvsUjUIWP/zcvZk/k\nIE02+raVqpwwM9Wh3QplNpIf0XswXv1U4uKzo3ptzIwgHnYUo2/VCeXrOTKf\nHMAQFL4Lox2XXwRUnaN9ZL8FCnHDmFPO53L9/DG024zFAeObXfYsPeUsJtgd\nWuOTqhQYOwPh1ll9tkJuxghkRSU2U1d0LzpCgbLDWdz/gEkCEXlgfvdK/Xo0\nmZt9uYvuHIo9HTPJGzI15zAfwAa3OnleGIo4e5i4YDEbG+TlB9vTtUTI8+fr\nzk21A7qHCpkOUw7CGM0fS2Lnfzojw0EQzEOhc6dzYKoU4yHegqcNIYdCO9Pe\nkRRaAV9Drdgmet9uSpetHSiDRb4xTJ1Tc92pgK7GETVhmJakH+HMk7rVgBie\nkS3TayxpOANkM/GchWx/tlG/g7x4H+GTgd7mqf7/tpMx9V4Cx0CDyCFYqLh7\nHT2etywDYd+pf9DTW/KBGQUbly1drR0TiZDtXHllT9IEtGbT8zVTP7tGBxDZ\n+eys\r\n=KNzM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/touch-target":"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/segmented-button_12.0.0-canary.af453daf8.0_1620068021642_0.5465676693871817","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/segmented-button","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"448bd80424c03e9e133c62b17901053db14b70fe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.1f1918c24.0.tgz","fileCount":55,"integrity":"sha512-XxAL57e7NwB7DD3CiZuK2SrA1Qf8K1r6ZEzma9IE3hcmRMce3bHcoLcU39geVjUqWKLBt9rGBO+9nsGtCKa6HA==","signatures":[{"sig":"MEQCIDERpvtXpsW55vR6UjyDFmMJiiTKCUUKbMJBXAjU9UBOAiB9uAesWFOyG1CCBx7mhuR2tJS1pYzOj782vhBBO3KjkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2ICRA9TVsSAnZWagAA5AUP/iFffGimxMznrfKgncwy\nVnjz5F5dwjqw9cdF5h45tkNFlUVwNzpo9iV0Zs/sZKj7mHPhM6zOXoYlpL6l\noFqIET9rI7D112PPdlVV0p9NeGHvzP4Q+8ldvDHaYCFvxSJ7j+NDAHFHSiMt\n2PGZ6oTRYMXzba7NRE5xRNO0x59LoBeMLms3cVeJL9GWLQpTDOMoXPxazCFH\ni5Sa136fhnQgjVY1ascYGJOUd/SXeU/Y6FA3Hip9xnKV9DYfP0d4x+JxpukA\nYAZ9rn0WmzK2LnNsOyv9SmKzRwm0jvU6l+Eiu46WO5CFauCXBy5naBxRzQsm\nZmSErvi7fbDT9r393c9ZTspfx9MU+WcNZQM5npeJC6Dh7sVUEjtDDwd34V+S\nBE639NZ5ayTiVNbQb89VI7kUUcjVo5tO5x8mr8kxvMjbTz676AkhwW3KhJ/7\nvTCZbaRSclI2DT6v2wskaviC7cwOHIgI1pMEyglrmM6C874EizAORugiwJXL\nf4Km69YvsBugjq7zHmQ6NBlfs/Q54mUagAzbM54cURKKPB+tG+of98QdiDsV\njUeOtm71B4sStDPR0DxSYiHePf6Lbv10lugrNseU9AfFQcIYdCAma/Flp1VI\ndEI8Z0doSodOi0Z2XVrhetI7JRLo3zOg6cBrMLkSBfs89vgHqZ6JmJ8LueGc\nQZxX\r\n=6MxR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/touch-target":"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/segmented-button_12.0.0-canary.1f1918c24.0_1620069768267_0.8597190873328244","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/segmented-button","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5a8d644495d711a4b69e2803c78e50e65f372fed","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.33148231f.0.tgz","fileCount":55,"integrity":"sha512-ORaAhr/66qauWDa2larynSuDh5Uy5T2PAWI34Br7dYNCQoSRDdq0rR+MGj6GNzeNxR413yFVuAhkMUjnwpOkQA==","signatures":[{"sig":"MEQCID7mQGdDTeVoyKf5LrCm9/Q7AV6BTy3MMNlKs97fU+g7AiAPM1+NSS1TVlCisT5dLnrdzaGPjbzsUpH7Uczcgcax5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFXCRA9TVsSAnZWagAAn6EP/iSLS3ZdYxEofMx8fWKl\nmA2gWpWlPhoTc8M5d7mS1HmrA+7kT0tPWs+l/1ZBQ3TVZYnb4MWw7NaPIpBX\nGD2ekBsy0o88ka/HasiHM3H66k1yMweigRXqT0fxQlD10xBYYWBZyH/KgWQR\niZfzdmQRl8kZA0UKPwqn3hBA8ZrYhz6j4zU13cXC8SQN+fIdJVfAVTcWw0t1\nhYPDtc2OKiZBr+fqne6pK7I8WnMG/4i6Wotmh8+UnfB+M4xh1fT7OYa+/jfN\nrJICBe0UvWXViXZ+pAaKTrebO/Z6LBGepNODniYI7ZJBa8cVJd8ZDhgr7jSz\ndeE8ihyd9uappbLAM5xeiG7D68cWxDsAOodJamgGL9vXIlqFE/lR3UHNNDfd\n4D5hgQ2vHmuVJwi7gmgAB9lXFyd2bccf76NlMqlMDZcE4w5FuH+grDg7mi3q\nGUbGMdDoPzTuOPPKiTYM+Wpj4V3m0/mh753eVHYdDQyHceGx2NBdWjvsJ7V/\nbpOzA81szivTwaZZYMvbJx4LuFV5TWTIBk+I6QsgNmvivtKAO7Z5P9hEfNLx\nIc/3vdAWexgxBAJHtaOV/Hus5o84Cmd10fnnFcFiuEsZ82QYAGpiy1Hl1P/O\nlhTLMzc4VuD5yezn/M+tsF3QqPSAicfHIDsiIrso1xuJZID9BqNEH/3TD30V\n/Y1/\r\n=Dh32\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/touch-target":"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/segmented-button_12.0.0-canary.33148231f.0_1620070742850_0.4932064314638447","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/segmented-button","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1c5f5a8a2b27309c23e1f9c0cf43f30ced6b0fd3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.06b76fa74.0.tgz","fileCount":55,"integrity":"sha512-6GRE5yfem1hdhMj425omqnRwkTpvAgJgKwK9UDhHOqHVvd8ZuBlIqHJy9qjINt4EIBEx/1rsGKxgyaf3I4Mmaw==","signatures":[{"sig":"MEYCIQC9xWB24DgrNcfvq15cBmW1vB35eAoM4kjK5wJ0eY2uPgIhALIHimg6yI1kHhOjuoXKSK91+aHnVmtof6JAtevBrtly","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMACRA9TVsSAnZWagAAY/kQAKT44oFG6zcYaYXWHw6d\nFOUyMMjlsznzVvW6KHDZl098/g2qwTKzldzSLMNWsVwuHO/XJ10r+SAa2LkD\nMSHni0dSMvZbln5igucn57eTeKfWuqKXOmWcYUCBVC6TYpoj8Cnwuq2S7aiv\nvySpxEYs5+nbCeSLvLthiUd07M0z0tlptAq+9advXTDv5RnbNAA+N0DqnY4X\njyvG65jdtpnDqihyhOZeJ8tbuHwVakcvK7MZOM6WbCugQ+M6glB2iH6DWIs+\nnw/UEmL1aYo7EFKAJL3kV49NjIjA+2QRclHKQELWafW4G+KW/mTq2QrRx65i\n2TyGAopYLfYdlSwbdGcTfU0h6YL2v62Fh+jAANKWa4ZMnBQjuBMrhGxA/Ubx\nO6wKBAnofXRmBEWk0XdK29nChtS6s3Fmpa73qdOA0ES2F1oRS8CySacd22qE\nQo9gcrOAuBiI2+1XcpV1SQMCl1k9V3TQglx5GBtH/7bC7pX/rvROnRUDS5hw\nIPAge1RFS6M29zXmtJt7cSKL0GMBZ9IAe1R24Go89K51yCaSCC7r4AmE+a80\nOxaKHSHctHFhxx0oDzLtksIXYXqe3xeyFPIjF76JuNqYsErnovIW5Y+WOQNS\nYla2u3JxqT/p+cvs6+i5sNrV22PZrpQHis07IU1mwND1UnvbCXTPj39G6O9w\nA7GX\r\n=T0it\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/touch-target":"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/segmented-button_12.0.0-canary.06b76fa74.0_1620071168269_0.529477326905363","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/segmented-button","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"afd0ab700cf2442525221e15832a4794e887ba4b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.7c5000473.0.tgz","fileCount":55,"integrity":"sha512-AAP6cM1ya06bJzrAifllmSLGxpwviafa1oecWZjfxVQlps87hS19W+dLD59+JJpgEAAHUCbPkC9l11xHr99m5Q==","signatures":[{"sig":"MEUCIEmxG8zlhxSEvWh2QMYUEYkNaVybVvu/0ratvC6ESIrgAiEArFY3/EGENtPLXg1d15IUFFnoHmBk2ErUi76P6uyyUeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHw2CRA9TVsSAnZWagAAuWQQAIqKfB3ymohERroRAGL7\nScE2BssPnRmoRJKGGe/eoqiecNn+pqi51HInDc0RXMbs4RakCJcHaqR7MTf9\nf+cRTd5jgxW0PNBHsP1q8Q8vx7kivRt3t8/D6LParOPs+quDBOSMUXVhFD1H\nafs9Hg6oa9I/rRJe1kO1X4Xh4hS5ihSff/ZNxAeEE0vO6wA/egeArmp0QyEh\nbehiLryR5ZQJPKDcmX00zJSdct+IRJ134VbUXj4CrDS+q11Tkg2eq1IAaQZs\n+rxNaiRKLnw4iu4aImwobZNK1ys0qLekxF5hGbrwwxkf28QnQRlM+kpSCO6x\nJyEE/OuejzlH5Q+Yj4fqEgGvS5HIl8m017Wzxhc2Yp46RDjVc2+JmjBifrE3\n2eGBWX1txn47j9CfGB0KzOkC4miwkf0TvczSS7xkc4rytdnaWO7wO+Rti/DU\nb8m3GLpYFfrS+aSqFcJylYhOPMmvgQB7Lem8cNsLuTCtpvfRkFG/Aq9T1ycS\nh7VW4XZ1fxBXBoFReNxHlPdWM00fbl5YilUkJQWHE+JN47XAI7SBsCfuav9f\n6DmlS8iFTrOcnKbvpdWQpx9bUE0HAWJ/0Fb/duHkAaUNZu9cQRDA8nPXm6Oi\n1NmrCI6f3+6LZT9txwhzbJRdD6/JuYzwzAT5NpRfytRGMKyCSYj1xAYjr4gd\nw/MO\r\n=taMn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/touch-target":"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/segmented-button_12.0.0-canary.7c5000473.0_1620081718395_0.08007430652017766","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"684a2f1a60fa73ac24b3c6a90a3a43a57ec2bf31","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.de997644b.0.tgz","fileCount":55,"integrity":"sha512-xIS7tN/XfUmJhNxgfSkDKnEObXyHrM/qcyV8TB9BJmY1lPogJPh31bvK63eWZrEMMvcxZGsSndJ50bypYBaWKw==","signatures":[{"sig":"MEQCICwyMiuxKMdwplQWUnuNqMaOBAVKfjWqItAYGHTSO12fAiBB6JJahKgSOLSA57kZ23mF3veGOIj/bv1hPsNKE+MTNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYRBCRA9TVsSAnZWagAACCAP/2U5hD70yFaIC5bQO1bn\nyWHUQISReEvgmJCfPFU03HvwEk29bs0o3w9zAsyzkSz8ey2wQ+Pu9zoDgeUf\nCP8G3T6tS3wKlPpvXzNTPJsAMXysq16whMeY5HHffkHIic7mbE82zJ3i0UV9\nWMHQ+1heYyFlKvoRq8xwZwb8QeOR3yGDMQH4+XwNeaS3VIcPFveAMm9LhS8F\nHwLGWe41MWGjTyHfxca91hZoWc7/MqZUqEAtDoh/iAQqnyLQSxjA9v5hbnFX\nCqOLR8T/Nax3le+NthV5jWzy/Qx28Bl9jkEFD6pABpit53H9Z5CcwfYBB7X9\nGxGOq9tIEEqm/nPf9siuRX1nNS/VMtcU3bd7vYlTTX/a38MwFpQ6QQy0B7sC\nducvyCLKtkNHSOpCm1H66IJDYwLlgwGeP78dQh9FUne0002k0rLQUB/ht6S4\n7ERBmacJwB8nMr8zhaRozq3YkTxv04pFtQXqELPVmJ9jDO7Ci4dH8g+CGTP7\nFb92OUO3+psQfejZAspIaMaAYZCClsc7h6S1EoAbPc9DKShXxrLDMTAI7oRU\nQ821zbVu1hHGXCC1aKGX6FJZ5ezcB1NrldaR9NZOvpxtqf2SqxcTIkCdrMpW\nn5I5Yt7E6SHxV+Ffzp6KOfXnAsWfmliVAe3iuW0x1tNhOnOnyrobYsHf/3Wi\n9coP\r\n=EyFJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.de997644b.0_1620149312892_0.5158406883626654","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ac81820e422f7130f591a12f9a6fdb0bade3ce2a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":55,"integrity":"sha512-my2uPuNAXh8phLG4FZLBOEX/JpGUorlxwR0kjXzssLY3l/bXC77y+4HnkNQPGpSvVbGdmlKvfW+P08tgnpXY2Q==","signatures":[{"sig":"MEQCIG1AFXdemyAEVobvrdwGAaPfy5ffE1YlzZCA1f/AjpXcAiBd3WEQ4Btyhk+u3DrcEYZbQa3rKv3O+isVHnayhgLZaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqECRA9TVsSAnZWagAARasP/iQmnoephORQP+ZxCRYW\nTHrE0VSOihlwkNbpcPilHaG2q+S1Ti/3eoSSQQuhwk4dtzEJRpNwbtbnu07c\naLJeZB+ftZlJqijgMuLMSLdTOlaDTtsNJKhJpSczbHUalm9zkTRg8rnElgLv\nvH50bGDBIc69OJTtB11nC2wVyUCuC51aTyIfm3KDrj+EIOlqACAvk6Lus97g\nMAdhfw+UZnNe4O6S0CXOZmUnzHXCiHW/W3mlcF8cf8ZC9y17z28ZjkUjPSZK\nvp9cKy7EOWoSzyPjH1Gh1RQxVmUVVQ5YZStMc63UwZppbs8YDkWVRCrIBzk8\nU1hK0/me+07NH561d7sj6UmQsTiTbSZZ1DI/nZXLZJ3z+KstMjd/GFObpEtt\n/uBxz86VaEVSia7FpZmZOok7y7CBdxKhxvDwFyg8P3b/VCd8VPLYFjNDr721\ndgpXu/0zO5teSJ6QCjLdHT9OUuq83DoVUgei1Gevnq1Oo/tvAGE/0b7Yo15F\nTPoNoS1SBpzbwtp4t3RtKxvUSoT/NSR1wxzDBRPBlGlgVM9yvew4qi2CYyIJ\nS0a8/7pMEqQ+2a0+kug0c0N3NOOmFkHA+cGiFt66TjQ6E7i7gQTIPIB0GabH\nvBY8vRuYtCa/NbKU95N+8PyWW90dtvLWTS5ij0WUrYq8CFXzynfLDFz1iF/R\nyrk2\r\n=iD0X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d4d7f1cc2.0_1620150916551_0.2723270097622972","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/segmented-button","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3136acb09da8363b474b0420968a3405f2882e08","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.be999eb08.0.tgz","fileCount":55,"integrity":"sha512-/u7yDp4TdVvaLCIcWId63BRLhwGa8c12WrkNJUFOFBL+iLOjUidTE8uYTvbajQGhf7V2JKu/Y9J9sOPPXX+pUQ==","signatures":[{"sig":"MEYCIQCCdq0UzKeea0JNGg2sWYjgEv6F2R3a+YPZTUdCnjTTuwIhAJrsWATpfPBBWufD2jZSMXw7zbA+TINNCManZtwXlJV2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYvACRA9TVsSAnZWagAAkXcQAI/iFP1W9THGZIdPVscS\nPiWAILcyDJ2SBo0uIabWvXKwgEidfHvsHv0cMG+DoG2ivAnEDMwXRD1FTAUR\nyCPK5Qu+wsOEKpPjzqVs0YruBmFnIePqKmkzou/Ph2W3JmWXDYS4ORHM/NHI\nlLJEHnxTdp/DxhsPXHIUp9C/CAowEbwskoP6DZ6rg62KaJ2DdwQmi2B9YJHs\no6kuheQiyIhycNiXDwG6YYF6ECLwBbXEFk3osuU4W8tvb10HuixfDgxd9ALd\nxeogneMxPJUmpai0C+207K/Q30hxuELsFnpF6kpqVj/KnpMiE9/X9o2eyojO\nY+D8qqJVcxGDdvqxa6haTv8UHwEFDFcA2nVt667cPbP8Tfwe0Fe/KS9nSHZc\nX/IorWuapfA8vFj+fxd1rh4f1kjP+LXfOCB8W5l5B2AKT8K92ecUTzRWHz7Y\nP9DZFfotvc4SCHISkBUnryjNOGYEMYVubymu9bzXNugB75LqhWmtiKsvTnLv\nn67/GGXfvphL+JVLUmcMvsOgn4RE8YehvHUn9T0/thZnJQc/XuHyaLxuZzl3\nwY8Do70IFmecbvbCHZ6skdMqqjNLLs646vwNtE6zKTN85KYurCy8GHJLX7SX\nJNhtk2vEpiBBVCjTaKybW2cTzPXxL4XSjTtYHDQMRXj71/E7TXY/Go+67DsM\nrQpq\r\n=TcdC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/touch-target":"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/segmented-button_12.0.0-canary.be999eb08.0_1620151231896_0.9383049361787377","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/segmented-button","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e1b9dfb719cd6c2701bbc4ec294e802cc12c6f7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.eda1705fc.0.tgz","fileCount":55,"integrity":"sha512-7YooeEf8TWy2fM2TZztcUvraXSP8vJ91bfjMK82uL6aJmv+jYmnKGDRmGsqTMw69gHlaNUNY0FvQ/aN6f5gn3g==","signatures":[{"sig":"MEUCIG9FkQ8hXjuPW1ZgODIiLTXowYiQzulQmofUv6PdmXraAiEAmZ2d4xaJUvzFTNy8E+bkiRKMWzadAdA544e95VYbNFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwwCRA9TVsSAnZWagAAXYcP/1vpH2/BJA8tgAQoNp3X\n7O1ksh/I8YIYKy6wNLUK3WafcPlnVEryBRq7QJXRKDPOF7XSn8nJWYQmws4p\nb3Ctse2KRiqRz6UIaSmdW5E5SS8nPNZjzGtbNI+e2DuM6ouHCbJaVJQJAceu\nUMDSJN3LzGa3wmY1yWsXnwTKeMMW6dsmKcb+a9YUxC0DCDGfvOXivv0eIR/S\nLhqjt/NLLxy5gPnDwiSB9VIDL9Hcy/NRjwJmqdpvSW5ItcSr+l2+7hMs8dDa\nNAby4qQ+vjPqne2mfV+uh0p670KF5OimuiF2BOgfhfYseXqjSFBI2Ef//FTZ\nLVthIUCcu1Y+gyHHBlA4FhxypfBeRWz3erOc4PC3IX+d2HKIhAl5l6lUHAA+\nEBVEdusPJ1b7pz7oAtBAI9l9s8HFQAJo4kEub1/mAaPhR1LnYKDxqLl9loCl\nWpkALKpX1hEVapuzALgA/xbKWS/kcpfDG4HSNAHaBdmSzk65dcOuWd1NkZVB\np3FJOl9M7g5rBCXDPQ6GnmI1w9Ryo9J2qWRT8jklsKfiK+fxy9vU9nEOIpFG\nrVQCQgDn8icBPEr/sLY3Cy1z/7KtkzUv0oN5cC97iF4R0G8j7PNu4F7sh1EB\nNmJ8Ys2cv+P0hvz2+UbJcWEXlz+yxe1vun+8I8mifUcufKV7uh0LiLKvp9np\nzQZh\r\n=yzfh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/touch-target":"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/segmented-button_12.0.0-canary.eda1705fc.0_1620155439900_0.3973132074376826","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/segmented-button","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2dce75570cb52a018ef57a99ccccb74035ab070e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.718c90178.0.tgz","fileCount":55,"integrity":"sha512-PhRJkkT9lZVqc6Z4mY0iVy7WhyWasKUKmglpFhgh7DgjBkeju6ZIFqbt7B1JPJrZng0yg2BjKHqxq8Jk0zn5xw==","signatures":[{"sig":"MEUCIAcX/BLS27Rs2xpWeNmbPwgAwO06SsMZHWHKuePui3BJAiEArStcistNrRJ+Km7P6J8Tgq+o1jHl7AnmICMdTCbbzUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaBBCRA9TVsSAnZWagAAZH0P/RG59ZHWw5deJ7zohzCa\nuvGlCAAfqnLy/LtPOWP94ipDhUf8s5xLhjHWXoEhMmuLJxxtVxPGOXkH5CVK\n6GpH+nZEXNoNwTDGqJkBVqi1GHZHH1R4f4NnIqTBU+7lmeONMuDr6q/3xKlf\ntRRMgHwoj5Bkt8ciqiUJedJnMTpHY8uCO5ZSotFeZZJmKm9riZybDJXn9QT/\n7lshj3IQfnE2pjaxvqIdZ1iGWKBUJN4kK0kHKCirLqxexrT62ATovk0H3L4i\nNoezciyV5WlNbw6RmxScI0OO7oXlgbM39lW+l46XTWjM3ocKHKS8X/4NrdVB\nNBeaFUV1dVh6OOVMnnFgy5neXm2knuS5DpS0hHM8LFTNsnRTwQ2b7EklcNw+\nnZnjKp7LdLPhrUMkRVKlr/XY5T9/ZbOx4OZMCDRs49jCByQomqOB/9AUAmyc\npoJZVU07jPAKAa/TEXMI1azmlMXCcpPiePYCINAFFAe+B+dqB3jv9ZIXN5Qb\nB/D64Vom1A5+pRwnMTvAen2GBoy0aN+//Vi8nQzCL8ZLNiMsvoDfO1/s+H3w\ns7MqDQO2HyBMH3OuzT0IdRBTKZ4eFYD/s+qotzAlJQz3AH3ngZFQZONJW6Yn\n+6tfiHuMnCeoI74aYRMmVDGwKpLNofkgrcgx3QD7H28DYSGPmpiIJAZwJIRD\nW07w\r\n=FXAm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/touch-target":"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/segmented-button_12.0.0-canary.718c90178.0_1620156480914_0.5156642127084738","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/segmented-button","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63a9628124b3bc7fd9b85df507d9fcf78eb3932d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.0e3917299.0.tgz","fileCount":55,"integrity":"sha512-9A6i/FLWAKzkhpS1LxxCsHvU+vSo4G0Rig5aFv/UP++gpyXlzszSzj3Su/C630gGQyEbpGW87aLwsrT2DYKNyw==","signatures":[{"sig":"MEUCIDFIsX3I58iZU2FYYd7iP3J4PY5Mklf4nLI8xEmBoif7AiEAg6MLhnjBBKivpxE6feFg8pbv0eONgkcC+uRAZS9vUBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDiCRA9TVsSAnZWagAARkoQAICWdd4F7B7STiw25Vdl\nAH2hfuQkbecuiRWR5CtYH455NxhwYWjwsXjr8+qaGy0waqD13v2EXZFGNOzD\nwXlKSwISqRNoXpiqMem0fku1OOwfBwtLKdUFssxPyDPjOXsYfp63jkYEVlIN\n7Io8+FoXPQN2fgycElRX1zCGJbogUBUQzsxxHzyDUBc7DYFbwm6Iy9FeaXLq\nZQJfEiAuI8l2A8Sk2xJ6b3y0YyarAmb9Zq2Ql/sz3EmCPpsno+Y0Xzb/ZYgH\njySm30dUdaf2s8tNP7rbq7QDZT89jWyQUbM1WA1hIsJVlJlBRI/vsYZ1cB9U\nceZv7TEXnTYQV2+hK4Ddlvmx/toZ+mdN7DkrKBc8kQHEIH4P6jbFFu88EGRt\nOYco50OKlxrjlkYMhrgYys9ZxHwwwit3f15IsCK+DqCE/i/GIlcCZZWPaPzP\nRXfUOywR5HiESYH+R1iJKJDVhVOkIrK4S1YXKltsxosJmxQeEFjCcCanGP1c\nwW80digHsEXI4QUg+60kyZ/3kUlaQjHJcoJ6oYed01z8vquFvEC4bhsvxW4o\nIh07v+AUDOAh8QQOr3dGMvR/DV3Ol3z7N/fnJyOu3YrtXuHI3FhGTqbSIAfv\nOe711UK75G4H27FQl1l7bR6MSdfrM5BRXYbSNczn0LqQUpwWrJMZDTOtsMwe\noVfL\r\n=ufO1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/touch-target":"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/segmented-button_12.0.0-canary.0e3917299.0_1620156641887_0.2798593338353004","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/segmented-button","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0b1c9d0dea882d242dae62f1f67e297d2fe35704","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.836b3c7db.0.tgz","fileCount":55,"integrity":"sha512-hVXJkAeafVZ2ncDpkRRQj8A1k5uf3TfYOkGqusiQWMPZRtT80I5JNfZH/cmMgLxEMqeO/xBDRFG0YlBBdeKwIA==","signatures":[{"sig":"MEUCIGyQJ/d24q0T8suXZXEi2N+jmJb4tmvnlVhcov4ns6cOAiEA4xYEg094AnXLiqHXehagttLKUi/R2RTix9GKaX7jR00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/CCRA9TVsSAnZWagAAOYAQAJYAHTw9OAx10Z99slcP\nKmYtKEgfoIAneo6bYviAKuSVSIjwDiRyKoYmCnzmdodOZbN5Byk7w9zJCqBb\nDzwbgO10xJ1AKmbXWPSBhJlImnWPFoOUcGJJjJ8B8L/GVM96as8vjtbiLm8J\nqQkuxUBchK6/ak57jGisi/B2j6EzHanNU/qmMEwOBoY2bWWJTuFiAHOsp4+e\n++5oWrFGtumOfcz3cVdDX6gF4zWiSvisXavBX9WhehVbWiBDQlA9NcJ+N0Qa\nH8p2UZD77LEeiG9p30VaoCHZthR4sqykrxs9PwKg6q36J2aICZhhBXxMDHr0\nw8rsHwjtzN3DxBjaN7D7HY4vFg+qjHxuMrw/pCENA11MG0FNElvLQjqvmioi\naBBxw5/lIuUSpZE9bYA0J1fnzOrELpgnhiWb8Kg49tuqYhdeRC4RwbxxWBcV\nzuqzp8LMsRXo0ga75tXVqxvKnYs9l/z9S10MsWG121Mav8eWTo8O7FHY8nMU\nkKLurJ7GqM4+E3kIWwdWebD+4MRqUez2BmpvxmGsxzMX9l57V0iBcQrYBvfG\nOIHiLQaIf3Xturc2d89maGFeB9YLzgIksAKc3R+S47uzqYll7r73PIwYPMsR\nF3OcX5nqHjGEkeI77x07Xqtclnfxp4o3HwqlLJF/mn+C5iWfDf4/8ccz8iNi\n79Zk\r\n=nYSn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/touch-target":"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/segmented-button_12.0.0-canary.836b3c7db.0_1620160450196_0.20974148510460755","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/segmented-button","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"afa467a5baf6da0bf0e254f61d87d3859d2a2865","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.53d4e6d59.0.tgz","fileCount":55,"integrity":"sha512-OfsrNHAcIl/mRinJG3uO9TqzslxuNRXgNLiRPlhN7tAGq9eOaC/VVt6f2nQNqokyCd/IvCrt0Rv4NifXMiA1Gg==","signatures":[{"sig":"MEUCIGRAIqp2CrHWd76at/k29oFX4z/ZUxMvgb2dICsccMJ7AiEAnFznX8optA3QEVC2AZ+6VSo3I0uvdzuev7rtqiMSxyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNvCRA9TVsSAnZWagAA3CMP/RZpg6HTbuaOeJ7XAXzo\nfmrvYOBCF6Jd6Nz2W4x8vsnJR6IF4zIPMp/pNvCcnmQvi1cDCZ0ti8j0pD1u\n6eAKxOVN+JQKPXslJGTEUrM2iWzmmlhAtzwjGaa19qMTwFUtDUEksG1zxRf5\nxr0mmR6qBMBHaXtn+0EgRUhO9CDWobrjMtzxWQONgcXx9zBuzvcqPpG6PbQs\ntsqIr6N9ckmgbpHu+xTLb2hlQHwHLgUdkYA2Ve58KudU1wk1wdK4lxcLhv2d\n79aZWnp2dzCxNPRl3Gj6jOvxAdsRzb23zkeBL/WirRrs7TgToEyJfzjPXlKD\nw9M/az67kKXy6jgoCRxGa7Qgo6I38JGwqhqqR44guKdOCy/HfVbS8fuVogXs\nOZnQSpwim4WK7Lbls/gfYC2GW1xqOkTxXjUZilIRYWUmKwK4ODj/SVkTHzbr\nzQymJ7C4Nms+iFkaEVC7PJbtY1UIRNhVYte/cUovIS3T08yairfEkTMYOGOS\n6fl1m2y9TEvyuxWufCLvc+AvM8f33Q1MOv7AJKdHXzLQc/V2omHX52+VA6Ai\n++PK4OaYTaQfc4NxtcYx4dMsOUU9osNhl56uzNT2zJtIb5/0Td5F2jNKVGww\nAa/vSsnq4KsgFJ3kCL32bABcZ0HBte3TZZpgquJeoOnJgh8PrrHUCswGTDpw\nRQBe\r\n=4aRo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/touch-target":"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/segmented-button_12.0.0-canary.53d4e6d59.0_1620161391188_0.10808159311062537","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/segmented-button","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b1892a62ad1e5fcb9860d146fc927b783d783201","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.18d147e27.0.tgz","fileCount":55,"integrity":"sha512-mjh7T/8Cu6UL38HIfxr1J2DFw8L+RKh8XVsmNGTDYpdWfWXcztnLJw7odiRYZdAgu5z/MabhfEgDz8AMJnDRMA==","signatures":[{"sig":"MEQCIEDiSBC9HuPgUMHDiAh/koqcvg44UF/JtNIn66t8ZOygAiA/7poJuyU0SDbW6EM3SA7aJf8sdPE21GGDSjCE48kXDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVsCRA9TVsSAnZWagAASN8QAI8AQlqkQR98X894a2OI\nGR/1AQOgUHAt84fBhWh5oInvectZn/o51izTlFx9/lBzfxFra8mM3dVTgvBP\noUN5dJu74B5gnv19XWg050dNSIWjayhDzb1vblza59brxB0iYCNO6JS6JH7p\nKmu/JEP2ZiCVYmNSZ+5UgAYiBkcs2oJUgQiK+Hbuu5o8IhQnI55uODeCOtol\n7iKVKq46dMG/EAc8j/aHNC4LLcZXx5seehsYnSrSyYluk11zNmajN2uUBVOM\nGmnN1D1hC7SEZBLH5uO0EzXDummg+VRHjYP/921U9UH6cUZlfgHF7flYba9d\nTmScs2DuRVp7mmXotg6HNX2gOA6zj3q171GO4s9vwkvhVxhHPpwlG3VhZPB5\nmAOUvK4eHc5e3MzAhvVJst9Tm3FhYkDk1K/VRNZTE1iR0C94XsZ+WqPHawEu\nGi67Rwaln3AxBCEvY3N1MrU3YMJZjRV+Pwy5DTBHxfuzBmFpgZp7zbujxUFv\n0BiU02Fw0Pv+6IekcnEeylCeuovPUpogbbNfgROUD6aa1PSkaQuH1Lph8cSB\nv1PeH5g7HDaSotf/IO+DIqSFbHVfytlvcFK+7vFToRRhLp4ZcBG+Q/FC0Ya9\ne6JszNspj8TYexSw0z9VbXDle5YpfS6L4Vl6k3Vs5qJOp0w6RMF54qVlXrWX\nv1oV\r\n=G5zJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/touch-target":"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/segmented-button_12.0.0-canary.18d147e27.0_1620161900320_0.7465652400611813","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3b27a7c8416a0b2fe8a5c3984955892c903ae392","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b9984794e.0.tgz","fileCount":55,"integrity":"sha512-s9CkE0G/Bdq7Ny0/O5sxRl50gkICdMOyYfaTgWMU3Vjjj0KKhDoKUbbI4cozbSCEpbnCkubTy4O+x2Zbtrt1Qg==","signatures":[{"sig":"MEQCIAteTqJ7oCdVSajlC4it6T0viTWqipAMaDuQSYE4JF4iAiBLbX62YpP7kovY9HUkySDhgGZXIJwRp9VSFAQ4+tkixQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdK8CRA9TVsSAnZWagAAEHcP/ieZgIsKo6elI2ALsqtf\nQBXcPYZpNb+s91EF3DxeZ/+1ZILTRJvp2eRBSjHX4iqMvDqu3T254EXHZ+ar\nkxu8lZxPhq63Fd9zg/0DDBm+9fo8pQ2deNHT6Oy0nQ0tsJNCYM+gxQ3BhL4Z\n/Tzhhch/fABkizNNaFNa11a8mR7blyDWLhOypDHhgb1boIJL9dysW0P1gaHX\ni+NzYBOQJ9W/yO0Rw3HIRHPprGlIbBlyc+pOZ2dm4Mp3uMNFF/XODKQNJDjI\ntpr6IghxbNkbKhcyzVCcEeZ+czl9bD7Ac/Iax45VI3qVXkED48Gre7j9oxiM\nFWuMLrmmFccmRycDhWPPn3naIr74ahEig4/VUrk59SUcgGnot0cDeTFys5nR\n10BdgDibKWSIrYc6TFNYc1RQExfyOwr9V/o6NGrzX1r80KnBabOK8/NMJKfh\nmya/Uow5O9S1HomuHfcE29vPghy95LUUO9zLRsBqof3tOsr/g35nKGvVzZlo\nwrECqFC1bUR0bV1FKpE0id0xKjeW/dQPmgMlCenW+PNFfLbQxDd/RSU3U46v\n7PLJduKikulX7XAvph40AlspSrZUtL+H5uXNbArrdlQ8eHzh8j/1h+ps/Mdx\nZ6yPN6iBCDx2eRTKfv2aFgGX/wCPqbRHySCuji1U5f3TI4MtA/RqBwm6ETMs\nsoxg\r\n=HtOi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b9984794e.0_1620169403610_0.9996136424688706","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7911efd554c4bfec50b8263e47592d494bb20f56","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":55,"integrity":"sha512-hlNlV6cf5qGoyV4Of0ABREX+DHEZ7rJOnR3FQLJd47TdqhJv7gE9cEpwKKTn1KwjSYvPeTDpnmlwDv59j4tsrA==","signatures":[{"sig":"MEYCIQCF/QzKZXdHlc+IxUc7ExTpq0a+ZxvDeH8rcamsR8aV6gIhAIP0G4tzc6aaSMURUIPPRYDAiD/uGbUuo3DhWodrkRJH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOJCRA9TVsSAnZWagAAtPYP/2eFebQ6kt6nzHYfwbas\nstd8xwhlazftcwPXs2tkXbV97QWZmfADukBTHaJOU0sf2mDK+MUzZFR7RJgh\nK1xEUMLFuMsI8jIc47rAo6vtETBLjSJKSJQcNfdZbCVsiKOf3hnO3yTIrTEv\nto2Xvg+jyd/NPhmq8sUG/YVpWtOWLr/ZKFqzOoDL0DNffxonf3Rq6CeoLzIz\nbHLcCBfU5d1kOcfKcbCzvkityxlRQLfT8T9TbBEj4+H3mCvWoC4VIbHkn35N\nsQzbOLzJ+XsU9SnQjMLqWibX9kvlx+qtLUwyKLM8sSRyp34DmOe/LLv5SXH7\ntGVlacz0mOAa01smDlxyybdl8mJZiACTp3Aj+/Hje+veCwIvQ4VLrJ1tViw3\nSB1lnhridLZWHItIgX8JMTwz7SVgOypRae1Qq3R2ODOT4h9LpMlmRlzBsv07\nftk9ZEdYSJqPzM2g3D/LwGHt9+4/kLWDAdqvqEX7vSFFvY/73eMIpZMNt16j\ncYnpX6/1DYPRQF3f64xC3jU17WKkJEog+bXX1asL++iO4uD+/hpstXXDBICz\nR9Oi9HwuSRDKuheSJ0nbEoi9eNPZln4OCve1WUhmj4xgD4VAGJet1HVTq+gL\nb5yZBjrWU2fU9u2ZH1kGS/53wuh35K1ZYUh11URVa92wH5v8ZKIIgTFZ+vqv\n5u3V\r\n=EBeW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b76f5fc9d.0_1620169608856_0.6246119764486848","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/segmented-button","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7e2968ae4a2c6e70a1882170f7dfa062f6b86a6c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.055d4f10a.0.tgz","fileCount":55,"integrity":"sha512-l81HApSexciPqaoUfyISJtYbmkBOSxBqIjUq24s2w12fU9/Wh5jext3tX4I8/IwNlBcS4mTrVBxcPDwDxVF+fA==","signatures":[{"sig":"MEYCIQDE9toXRw6p99ivmMcBtt+MytGuBaQZ5YtBh47rvTG8+AIhAKPv/J4avHtnlKNQx5L3sIDHCtcEXnRcr1Mf81gQIlcY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcVCRA9TVsSAnZWagAAPwsP/izNMEC9UQpJcpNjhM9a\nQYoaqwuBwsAf9SdvfAJTDY3GqmqaBE6TJYB7SWtJo38YKs9s8MyerQpXm2UF\n4htDWelX5ysApRJ0hW3hXc0zDQWp62bkR9e9pjTljqzSXy706mHLG1VAVEGf\nMsvA26aqd20qF9XmD+vH4AD7ze1KOYRJvHCP7+rjBX8CUmPDOxsxuRkn6LXJ\nm/cZ8wIJem/q2r6hjfemBayLK5uiA7TT6ri8YrR+6tyYxUhNk0D1cLxlNfxN\nLQNdek6BndkJQXFE4dcteoZ1f2l6txUc8mXHHD6cTVi18wnOoL4YKkvoC6Zm\nVRr4wS/7iVPwp/L+ZiSrKhNdr2Eb65/cdeQBHyzyy5GKrgswnSBiSLXsDOMg\nKK4uaWmvHzt9ihKLBLlRFUr2wdf2gf4WggXOBenspbmpqxGB4KY4wz3soNSb\nEEJLm8MCJIJz9AXkGTGTsjgwY9FnM6zIph1zWqa0l9gC5oURbjmydhmO/k3u\n67ti/iNojHYF2mMdAQhthptm8uktHuyXaDBe82EckfVI2xiHpzeIa2i8eJcM\nlVYWWehX0q7rtyXEthn1dGYBQ08XbxypYsMq13bsR6dpjz9RfgWMIFI167G6\nV58e+Jp5L/B9k0pDxlpaVkoldjywIEZ2dm2Q9PwNJxJqnTYrfya9NBjwLt9J\nTiv2\r\n=APF+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/touch-target":"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/segmented-button_12.0.0-canary.055d4f10a.0_1620170517398_0.5054217315648006","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8927e7200cf781de8f79132ffae6bee37edc2be5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5b6a46016.0.tgz","fileCount":55,"integrity":"sha512-msV0LIESiIBN17psTK5O77XDVDJKd6GmoQcbC62y0K+alN05VknOIZqGaWx0Ikhe3Z1VdBLsXie3MJZKK1VM1Q==","signatures":[{"sig":"MEUCIFd79vP7mkB+k/Z4M/2Swog8pKeIPNFEDa4M+AreuPl1AiEAsQ877nviYI0KUnVeURlWeJwhGVtn7liI6ZEpt4h3CuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTjCRA9TVsSAnZWagAAVFUP/0+PnIGxNmIPo6OD0ldH\nVLTnmK1l9vgMvvXeLjS/jp9RJXor+5RLhi+fKbTVrcn1Nr8rApzeD4ExtAVG\nC1HG4uo7dnhJvdYIDYKlwd4D4bb5e3rqqK1DQ7cXo/3XUW3iRK9J3+D/GnOQ\ncG8ZdKw5ub0hfkUU3/xRxKxtQxP7qqaizsr1WifAf2TA4DtWHnhvHzXtOnnl\nRAD/MAeyhEgfZe856RYdzJ6DhHUIqmNTKHVXRSXTuCSPQ2YgkvUggzuSMjd3\n8GQln5ayAAAfgKZ1tsiH8iQPThzI/sgLZYGFY1R83j4PqrXTXYYSVLfX+Q31\ntjjUhVaYFyojneJlUNoZjj/OQoWGkm9gzMY1sDV4mVfdYkeHbPnVjzwYJ8Wi\n1AR1ZIdq1FW5RLezeQMj0MpnsCiW6WTda6zx+qITyytIypFTm7qjJx278kVN\nYmr33pe+FRbglf9WgXYEnWhl27PeE7Xd9pJHZlsrPe+RoPOnSRRrmswx0LG2\nyM3aU0Wli9q2j+3sRm2aN04LrVQ7yR5aRu9fTm0vUStP8y5pPaYgVIQIQfU4\nckVuVIlePoL8F7K3b2oB8RhPRYUbOnBfVrCG5d7hTe/imT6IWYOauxIw2dtD\nI2FNMz7cFt2TLfwX+9Z6IRqEBDI5a3WuWcsGnpqA0uKYzlcEr5wtTfARru+n\n9mAc\r\n=OnSZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5b6a46016.0_1620231394705_0.6057921196350335","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/segmented-button","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2f39f67e70626325d823837868a56127520b9fb4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.33c9a737a.0.tgz","fileCount":55,"integrity":"sha512-1wIWF9Z7JSLlCyCS/lDkHlKj+z9U7y/ow2HesK4nM7di1C8BWWGyuVJIi4i2AKwk+h2mfCMnmQJm0rPI/dUBpA==","signatures":[{"sig":"MEUCIQDBT8NEj7ZVN1Ly5fCAlfk0qjWrPJogaKw8B7bFiejmoAIgN7enank3wbtRjRefnAVcYZyeOZe8gbBH6gh227f5gNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktV+CRA9TVsSAnZWagAARXsP/iTkwLWcGX4x3QIFSh4H\n0wSCRIAg6p76RAQB9mkj3haEjQ/s/ixziqWMrSSv8lzGqLYTMrD0OuCI4qet\nozOnVa5GffxkmtwibIkeQ6nN51+Am59uo8ZiwtcuWQU9oMFGcp0o+Awy20RJ\n+2EWgGDHWlTPHYkkEKkwMA1Ik93Lk/eroSUIJjEXseb3LhgZHDl+rOWgBDrD\n3UIzNY+E6bWtYoN1JYAEk5A1L6Uoy4BQT3CEm8Vzwsw0/up/fIME3X7TM8Yu\ndrpYQPJdNnTwRwvjivKXtiLzZwYRm8XZCVBUkMVLZn6OAK5Js023oHWk8I+M\nZl/3R9n/Na9z3cxDZfKlHc5Ys++Piq1V0JZpa8Izox7pQra9lQBHIyjJxLgD\nJZ6fwchen3W/pkcN1gRd+7pTBjtvtEN2wKM7spOfKnXQBoetmcL7qKtEsGNu\nYoaezBKk4h1KG1cGdfGK6YUzwMChUsE09retymk8ETP+wkHzVLKGtN9nJnMD\nUOR/+/yk2LDXNVqPn03VRR4ZHyiNMD/9MAcOBLoSGTx1QkQdI2iQLCw1F0D8\nM0JOTlhSzHzFM0OvaRTMhqpzXflIfwp82eiAL/eYYiDwy+dOetd/+1nTiyeR\n672BUc8Muomblxn0Fc2Z1s9IaW44E1fIuBLEKR8Q1qI3rqfXXEJglTJMFbsZ\nvt2R\r\n=1dIN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/touch-target":"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/segmented-button_12.0.0-canary.33c9a737a.0_1620235646261_0.33866054795569367","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/segmented-button","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"53f65618a6290ed890807ebf27bf5c293adc46e2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.9bc0effaf.0.tgz","fileCount":55,"integrity":"sha512-PhCTMdZ+Idb5y8Tsk5i5ROWxcgmCAjLekh4Rwmh9j/8G6vI23L1Xc8BsFIT/A0pVf4AFAVTdWDf1BKwIO5PazQ==","signatures":[{"sig":"MEUCIQDnRPDtOH+JEhSWGbpSYu+0oa0CGoY6UEovOUCKjgFmjgIgR5jHTydi6dW8ywl9VnTTpukStyyatCZTlJbh8xEjpNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdkCRA9TVsSAnZWagAA4vcP/i324a4vY9DSTmLpavs7\ndHdndoKjhUkz+t0d/58L6pR4ICBc0uF/TuUeLSylA5rZxnqjqr75z/a158bF\nKL3WeVbmMvFDtDhTHU7GTlG5CQicuJMZXrYSMEBDmGS7ILQcKjVmd/rWEcY4\nKCLrZI2J/fpZhpzR0eV/Kn3eMo2OqhgKumvUmFGRkUzVeMEAv6Vm/o0UYdjI\nLbZ8NoVkeNeri1QFivLYH42mYaRHzBAdS/K1AscQlBDIoIv5qML+u9b2fRQF\nGxrYYFIUbWmEYJ29fKJxYpMLZHKzTJuxsooWHuPWZmy4n0p9NP89spwJVXJb\n6czHBlet3I2D4bohaYboZ1NsyQL1mS1+N0pkYTKIf4eaH2OMoAXVCRRR00Ba\nYBRx+y1I1pj3c/nYWQIYKk+V0sh6dXY1lmINumJWc2wyknvOa6Id8zmml1wv\nKc/cHERJj2TbfYQfhaC8eeQzp6KduQtPnT9V5DvjlM12X0gze5+D15BL3Ypg\nPZzoQm2l8/NYK3tqgssJWu13Ykq7ImFnWi6mxDNOlk2pJFVXM4OGQ4YMVy5d\n+egkTBBoh2fMvx9pg3dWJPTEIUTgVyouJCSoAS/LdERSkG73/uTYGZxNOo+w\nMTdxejUw7Rcxetg45IwtujIVDHKZIRMdf1yktvWn7VSYfRu0BkP1l4/XWKIR\nhOAR\r\n=W1RQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/touch-target":"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/segmented-button_12.0.0-canary.9bc0effaf.0_1620248419607_0.7520673777980549","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6e77619a6688d7ad59f596cd55c379d9dd696523","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":55,"integrity":"sha512-Lna4HhzfiId4lriuyYebWJ4exRwvoq06m8BmC1cDJ7isjmCjf+70737dmLsLaJj1NDLNGEGXd5HV6QJfylp5Jg==","signatures":[{"sig":"MEYCIQDNHZ7xi9SXnwfSF5CLlDv9qNyWm5M3bOiUXLa1c2O/zAIhAMGrizf0M9mn5lQZ3+3zawuCs7EnUily7AaTS6/smTuV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxD6CRA9TVsSAnZWagAAlOQP/1SadhrN744DH4bj+7/0\n3z4rEuBWE/Nb+6hkRwqEAJkgby1Tgrv3JC+VS8gjh4d5+b620z1JRbx5WacM\nyJs6CoNa8b2/g3RrZsS4OipvI5dApDNhFfYF7xZTubO6XYEQpIiqPYAyegMx\nW9KQQBq9oZ2s77D2CunjvW57rmC3x6R6VSrNGxia85taflgHuRRLrK4JC2+k\nxmJmaEm6M50dtOgPrfR4GtfplwPFhnicVaBiOI5sOXR3ZZUUo1Iav5FWZ0Jb\nL6X7vaPAvcic6V2lzT1HyOrCLj3AxiZjQ7L2KX7tAhOdqf69/k6aPYu9736m\nOnMRt6vRiuxxxK6Ihp1M9KkVETItSUNjO4DGYBWbsfRhNkIFtToSsDxOdOzi\nQDin4Jbt5Jvp6V0alIQVhDs9zBaUky1gpaU6AhTY9VH+KXk1fJAVhkZj14Gl\nMTuUOXV6PsQ0LmmumIsAjwuZ6t4HWoYwLBbQSm3h7BQ3lGD+6CcqCUF86+Db\nIoACSys+b9t0LUC3AfwetOiYRhiYgc2WfRkmK15owM742ozCO0HwamGYfRXg\njQ8yTY7YDlU4HIfd9Tn2CcUFBy+dhgwYc5K0coVI5m03/xMaM8ny4YxuTWFM\ncR5dMgTUnhmllA6G9IK/DiCJZgTwIF5v26nKYafqnmyYAsDPdhVdcNQValDS\n24CA\r\n=U3v6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a1e0f2af5.0_1620250873872_0.5619481610875978","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be5bf3765c8a00fa4b90bd01b0de74c3eba2b3af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.06930c96b.0.tgz","fileCount":55,"integrity":"sha512-TZJYpFfdrAFLQJhBHap07dGIe+HvFHnWLxedOZGxAxry/wXpRKG+UMhil0ozQJO8xjy07IG4XkXLZBtPl8BM9w==","signatures":[{"sig":"MEUCIQC2qVmrl5sbHzyIf8xEIh0h2PaZJhUAtcmaXbprGNp3pgIgTFLsrD17/rm3JL4tIelg0EevKyZYqcGHqPL9WeI9xVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyy3CRA9TVsSAnZWagAAm2wP/jhYJgBoLGYtGQ3WTVIO\nvT1f586rlJ2vUlfnu3B8SVLSY8DpliNHj7Xrtr6ALVSeRNFFV2T9S3qY7Zsx\n18ClPt6mG3jwph6UzmVyIoZg4QiJLs6H9HODNiswB0CR1ee9iZnz7fYzXLQO\nCOsyaBT+GrEamI6UpUyVI4ivQycZgclcrMV/SdJqke+Rb90JILBJpTUGl8Yf\nS6SLDvEjjODgXfYrBcxqt18CFJPTJBiYfegVltl4IFMhZMo+sSe+fC7gfKIJ\nPj3kKhkLhssIDUrX8XF72VssoWABHHZkeVLeMMRHLfOFFvLw8L3/mJ/CO9ow\nUEnWOYqtCUpaNwxp3zrT3zAyS+q5Rh8k5ws+TWxXhmqdA6KIxhZqYCssGCix\nlC1zveOD24F7EPmZqCow2NLGQjrclhRFXi9xlFbWi9RZV18pQ2SuG4pzYuk7\ntuWI0gjKv+FOmvKS0Qf2pFWuOHOGhAfuCVJH89iSENyP1fOQ5vMMMARlTsh9\nxWKtrU4t/TZVRYPECcJfR84ypA3Xi6bc3L5bHgsenau/8HY5a4pnFiaIw1fg\njlsVbNLAFx/M2eFmvHoIACYPNOFmjLHSLrnyI62CsQgYoV099X1i+Ns9p+Wh\nhsfqLlHIvnsRvsABV/yZlqktqJOhn2ADIIJFR3J1GSH8rnRZa7zcX5EeTlEZ\nCVOz\r\n=sLCD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.06930c96b.0_1620257974850_0.926690868656775","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/segmented-button","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"097195542e403c1a44ad0e0185e795eed813b8d2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.03f525f9f.0.tgz","fileCount":55,"integrity":"sha512-ck/d4W8NVhBc97nna3hrfPpUI6ogK9pUERN7bR8VhTTgwkVhVNhkJSG1meQqdRGgHFAT50Vjs5dF9NHRfzerPg==","signatures":[{"sig":"MEUCIQDKPNONeJHWed5sSeEjYM1STOsQDFGuYBMU4K4QgFK6lAIgDTXbuelNN5JJXjtP/jRk+UIWFrfP5ObIgFKyuDl7ibU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkziWCRA9TVsSAnZWagAAzVEP/RKxZ9XIr2XzjzQuUe6b\nWWIhejjXbSyS8+knfqj2M5BcQLuYN7GcPhQTYT59x70GSIQb56C/S9LHwGqr\nuTC/YgZHSY4SDaTBWFzoNGahw6g7PU3YH7aH97Mxv3EFLU7osSKHbrQcD8DX\nFx0NM+ag5xbAPP0mS2FbV36vgNeLi0u7GbBQ1hknOSyGQvycJLaag25vSP4G\nFLP6pggSQAUiORLi/LsRTuPU25S+GX4dCPGTqbWOi4JWt4uQaQML4xe5Q5aP\n3X0QiR9PYqwadfkyw44Q8VndBNz3V+SayqaurqaIxsKqdM16Bvwy1WjPXvr4\nEh3xebRR0d8u0vDTg8AZiS3UD5oFhC1GvkrzKpcMXnfhZkmsCC4nS6Wde7kv\nv8bypQpJyajrleEoKpG6zm6NOhNrgTrZBK5ZzMTGabdgfFA/zZdDf/+ZYmGW\nsuuTNvIS/NoRlLh24frsp2q73/VwxjSVnBpJwBNyNVmHxqp6Z4Ffsvo5zasA\nziRkf9rE4Bj9NpPFAidCY/SnYZIRbE+0Rn9CjsQvdyLjXEbGxlGO9pwErEbe\nixfDt2cOZmtdT4WBZ7TWsWhXxziZNO8LSe6Ju8bGUZx4RqUm1ZryL8Vj95Ls\nkmxtSVDMWP8ztp2Lofz4nWf+JbnavASBGHmwkYbr8GgS4cuo3vrPvzxfnrsR\n0r9G\r\n=Cd95\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/touch-target":"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/segmented-button_12.0.0-canary.03f525f9f.0_1620261013637_0.8543064284496127","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"618966be165662536a8cef583ec2f1cbd026ce05","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e82ba2a26.0.tgz","fileCount":55,"integrity":"sha512-giXrX28E/8w/jVT3x4Ul3ayTlVeI10XOGWxABPpihFqs4CODjcj69yyNdVqd0cNumQsuHSZHTl36phMS92DXkw==","signatures":[{"sig":"MEUCIQDcih1UYdUPGIqU5tTHIrrvxhvWgbJiIMyFL2m5mENWGgIgWTqEej/NDFonmECkD9vAVYxFItp0SgC/VTEhcrho434=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBG6CRA9TVsSAnZWagAA2v8P/0Oaq696ZMZ5lE3AzI9Z\nQKVsf3/VQS8iPE3Tz5+/MsxyhUXho/TnOR7ty3Lw4LctbaAWOvGM59SZViVx\nTGJDUmae/myrFx5JIae7zo86v7lj/DKXpOJ5GM0oENhuF2bMydkcy+MQfvHd\nNI5m7ftjlW3zM+yfytYWWorUdviZ9OIRP1VlLvCz3eCjgnnJq10bm1ytjPFj\nrShcSW9bLKDNSUykKZfcd1Igw5XHGrG6vj5r0hdj7agOJmdxC6Gn6xSmrjUQ\nybayjS+xqzmzpQuboIUvnCFk5hkh8Edcdp3rWVcIqSeYps4cFf/5o3uG7mvI\nbCW2H/i4zE7Ayqvttxdi2rrJ3k8g7G2SRvPZveoVatpBti2rPbXv11CdAl+4\nmympICbrA8t8MN/Wc2Y/8aw8d6GfWJ7UcNELBD5yhcaUNtVXRa4ajs46ZJUN\n3mhBp2HMQHsH6k5ro+suMyzHjIxqo2KoeUOimdqeaHwst2c2YAm0AP1LpndV\nob2t7ulLEQP1lcSyFGLK+jIoq3pS3ptvABzQ8MWxxpCm8/mTypJLneky14fy\n4Mz6ImLkYvbu2vbFnDkbcJmrJPgPCKud6a3JE5Pt2wwleIxHHakVjDy8PznK\nUtUha/NS0iZI8vfc+KrAiqmboFZfQdUxSuLkcAdw4vvCdAFLpxO/n4fghxkq\naS31\r\n=vnzK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e82ba2a26.0_1620316602126_0.27233336220795135","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/segmented-button","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4d466720c5f6d4eb0b0dd0c719be47b2b5fae5fe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":55,"integrity":"sha512-Y8JbbBEfmv0q0pQQ6wkgOojR59291LvkpFz0Ohi+wfNucU/ke0X2RtmJIfc34+v9Nn/0GkXO7I2YY6up8S4yFQ==","signatures":[{"sig":"MEQCIDOc8ImsSFr35kTQ1qK6aUoZnAJnxZrySekb8M3CcYa3AiBGuEAkyWGyQcLjEZ4ODxTPhaTUdosVhF6yIFmb2nQC4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCd/CRA9TVsSAnZWagAA/QoP/2F/k9KmZZZ4gZusdVEd\no1vRK38AzCHkBwov5OGdf47IyTH1s49J/G1NdNIBPGvbcW+NkQbJvhvif9Fb\nS3p+uFbtNGaQshULLe2EhCowKVnit5zp/etrXMJ37f1Vk27LSft7AMbTil2Y\nCUbCuzXK4SdAzpxbheY7cyeR3q6Bg/9OgMUpfqYxtmpQwdAvr5Wpo8Y9UlYK\nWXOmwZMoyfS6uiejTp3LjDIeGb91wfxCf7YEePP/iT1yjT4xr2fs6csqlHEI\n49LA0Cp2gJUdrYt8yccY8rXs1KgU8VFd9ulNUfiVeWf2cZBkgOgw8m7oErvg\ndvqdima0scZ3A1wd47Ez/W5E96eYREtmvZcRwH6X2QD3k7A+oI3TaJSoNsLx\nAy3eMhwp/ruEmL9fHVbPwj+fJsfnDSuROfaIO5J+C5L4T7+ZQl4VU1UKqUDF\nL+72GVjQt81kcukoqyZUtvMEZZafunMu2BlTtpw0bfKdg+/lWVt0zVRtOXvs\nCNuvXsJdoKKo/EbDo1GOOrwLN5776y3jN3s/F9eEdxEkfNkpV2F5Z2M0WNwW\ns1Qx0uqRJbOhuWsvwZAYOMTbpVL5R+HgXKrhuDn3K0gxeEwx2se9QQnJmVqh\nCf7cStNfU4zEoHPDUG1/Vjg3p9M5mu8XyWhdKhXBvGS7b9LH6IQCd9nqHBYw\nEABN\r\n=YMQ8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/touch-target":"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/segmented-button_12.0.0-canary.fc7c4e5ce.0_1620322175374_0.00974117913050665","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9d87c09259a36cb9f7d8a841d9bf0ca94b81a43b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.65c04514d.0.tgz","fileCount":55,"integrity":"sha512-CzgdUkEjPqxvfCmlxe6puajJVDjG1EhgZmyzyeU52Q2/b0pNObYgYO7onxcVvNL2tXc8ynjiq/8+8DnKdeEDxA==","signatures":[{"sig":"MEYCIQDGFrdY2ANbnHFFNBHmOul13h/8aa/BCDB7LINVzx/whgIhAJJpVQNdajFrHemP7KfTzqWW/1X+bvOV+RVJCB+MraUP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjnCRA9TVsSAnZWagAAPYwQAKQWaB1XgX0W2aafn814\nR77KfmZ57VVFiCLLdEXvfuE3Tq/cwQqYa3LHyyfsNdHidWgLa5EK3mtt84Ei\nAPFXOsluhmMMcL/YCt4gGn4Ul8UzzeHPnpEG1xvxk7F9tOSRsj+y/SvAHoLt\nlgrqB4q58S7A+IGiZbrq4tOD1NDL8gd6Up0K0J3LmET70XrH5JNVQQrtlptt\n56QKbVjDfYgtwKwHfB+Tnz04qcEHPLfzu7+lvBX09YFK+cYEk7KkU7HVcStp\nqmI5MjGBUy8a8nR7EgVo+JT/IY7IPMYqIFkbw3BhDMFHhMzDzcfGgOSoNBjb\nSPDiEwdfkr84jADzoY17Gn9UVvE4fZrGv6fG+7VoJpb372Xs7CorvTfSIprw\nRTB1qDHW41/MGO6xOedzrmoRrMOC9vGegk21gE3DWxSg6dG+41gV5lakl7ld\nO7mtWElTfzcqWVpdL4REB7OnVoPGEd5Nfp5hZf30Blp5ku8xOexEaIEjquDR\n+TFNbvxH0rQSmts+m1S1PP/u2jcZBUchh9uKrtWmHl9BDU801/fGcdhGGGPW\nr+9V3RRuXSqn8sTPsZomivvzBTXflSo8kWOUiCN38yJ8Z2Qju/9qgJ2D1Yuv\nMus3JdHdqly5OdYrNEpj/A+bPDgwx7VaOlo7LH7Ye9pTv0DV0brNDYSnuCYa\nlk83\r\n=jZdN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.65c04514d.0_1620326630779_0.6659488001456373","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"796407eb01b8acdf89bdbcf7148c891e37ef96fa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c97779ca6.0.tgz","fileCount":55,"integrity":"sha512-CBZv+y8oGmqu5QQcMgT5B9EC+DhHklQyCgfgtQqqFbm68eVEhtS8haDSCVKehkJF9Nf3I9K+GNFaKNwkorEMMQ==","signatures":[{"sig":"MEUCIBvc035azV4CvFVk7zJqLnlOReMCtK1krN0OATO30ttNAiEA5URRTxxzPeX07YQUXvTPTHOAgWI18UGlHLOtakUx+Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGL5CRA9TVsSAnZWagAAAVkP/RtovX2WDmk546nlh29F\nE1q7LYDjerEDugU/eBAIt5W4BOCQ9u4+C9KBgeYH1eCbhay7WkkDm5SodTj9\nsCt1mAe35d6pWgczjHNRccaWUJeM2Vi7+nA8VWAAQzAQdGdObZxh07ZyNXBM\nsJ1abVsGmOI8WUHNQuJHWwTytdeLvmuhtQ5FNbMLtwYQ7UMJbhlpuz4f4AKi\nAbwnzm+XcyIrA1D2W8HuT3j9Jt0LB+F+kPLH/UriKpzOBe2tWecn1CklmwrX\naAJkU7ldk9FSzFGpXP+img3rNWSfd/VcA8eZOtqqXOvV8HlL/Dvu2GFJzp+0\nO1uros85u2QGUSjsQaL9yZPMpBTJHXBMQ1XTQyzZ7Rswx1bHjo/RieczKM87\nqo3S+u72hvLShDrsGapAsPAqDbDeJeBGi6Lz0mHMcz6Rn5uNNrLNdl97SwaV\nBs+3Hq2DdEGv5ILMUOUYaq4oCF/Q/j9ojAPChBLwl0yaYKtAujRNohJpu3Aw\nyfw8lbT6kDYP4TrVtD5BXwDzM29MmitUmwq7PeQqDGV1y2U5ZEutm8Ex+BaL\n4OPF6bxtU6skbDOWtzqIz668VkL93kF2JQObjmL43KK7HQr/3P8d1sw0OODS\n4x6xMbCZ4eJxjc94GeK3mqr5vmVHLsgUUj/YUa5g0VBtPzqqgolGJjvnBLhm\nVCbN\r\n=GUs5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c97779ca6.0_1620337400578_0.5616040768847319","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/segmented-button","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"692093fe5931444634ee0b61205f07c2d5037604","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.869d890d4.0.tgz","fileCount":55,"integrity":"sha512-QKqdRj+kkJhspOXtJgEud9rm/PS8W1dLdygXGZgrLzfaq+rY4MVW3P7INMVSazLI4/67l97H8pzNi9Jm91vfFg==","signatures":[{"sig":"MEUCIQCSCsH2Rk7umGon4zxks3vdQdShGXkHqM3O7LIVpAexMQIgUhKWlo/WKFomGqBpJOOIkrDD3glSsCkjD6y1qBpTMgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpsCRA9TVsSAnZWagAApAIP/jhLMLTffvhL+8T5RlJK\nAUhQ7jAlVDpefMhddVcConamAFd0oiY8GSMr3HaDSwcgMI06SVbtgPcdE4Fp\nGgjtyzw/0PY/6TXtXYywQepUNcM6k8bWnNx6Rb2i+/g+Bw+ZxilM2xXlbvY0\n0mQSkhj76jeU4cwAIhpZf6NQyTOTwEImAalF+N2UKeLMpldnulCDCgIrgZr5\nJ1KXhNY+dSx05CdZde1Br/54bLAeR7uW3DXLdCy5sG5ALpWAE293sp8iXNqQ\nhrpUfcteTKpRNnzsqhenwVv2ctogRNmlbM9ozy1GtlYKeljGzqZIgnvG/lz4\nsibb7YOM0rPTGT8fjkeJybmVAkcqq/lZIT1REtF+bnV8/depBiUIC8PNckgI\ntJCe3WetEhOmFqIoaLo7/dgt4sMnS8KO5biqiVdmlnDlWSwRta8a4qmnuIUq\n1FICz0a8SfGVZ88sTasG4ntx2TaePqGIb/1wrDGXZvJ/2kfgGxjRXVXQCzQW\no/x/U9tjANcp+WUcGEaGVCd4+0CfzKlkox9B7UiC6TT+TIm2k6y92lKH0akw\nLyu0XroJBnXWjZc9J2mUX8+FWCpKnHW2t8sDOJYCQId+tUymSsOQJVRxaydh\nBfPjiM8qxY3pyja5fFxzZfWKtCP4XUDdFDExKmpR00M+JZHZjKSrlmeU6333\n1c7F\r\n=upzK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/touch-target":"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/segmented-button_12.0.0-canary.869d890d4.0_1620400747509_0.006035767656540125","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"204720e956f63e9a41a3a4d6bb7eee1c74d2a9a6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ec22e1da9.0.tgz","fileCount":55,"integrity":"sha512-WCGIvnMqgn1Gq6G/goe/7ZA4FYLbAVQx3a7UVZXA44sLBhf3+izExzP4+aIAjVzNvuLwOdgzdp1ch/OX1gTjJA==","signatures":[{"sig":"MEUCIQC381j0W+mkNTIav5hROZBwgIZ2XuLOrgo8WYLL8MkzIgIgDE1hr+4HWEkA9uVhPyLOkdvw2UiKwc9PrWe3WFopf4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoyCRA9TVsSAnZWagAAP4sP/AvprmAhiNsNvGJj7QBD\nimsn+wp/9bp/r+NNpdpep4hrZm2+e11rMm4g4PSs2uCOH/Edrjh3/LXXw6gE\nzZ/AQr3sRvwELik95Rl2592NFpQdx8CTplMYz5hAL7hd6Q/u/NmN/qyUDQ7r\nYI4MvMe8zw9156RdAHDvzqsY4+M+iWRHMmzpEJwyxUsJ/+8+KYPQYQfDA3be\nzt5OTU3CMhc+H69RvOo7a0n4ddcGuPDSH+076iE3yLFocJ2VprjEd8TaqC7T\nWuXVBkwdoGmaJMhuNBBZh1wPMGm/9jNL7q17Pji9fEGtHkUq2PJvK5xgQg3g\naz7ACNRLlLMVOzeFQOUFtUTW8OBBSrB8aryrHOlt4X53x5t3yt3xizjG39c6\nDHKLUoN+hUv0nvJc1GUVscuCciiMxReOHyTsU20MSiDi7e/F4qvfxVkziPLB\nHpeOTIjSYx5fNHB92HyG4DKdKZM3Kpt7BuSHhciTte3EW8atjzuGop7CNkiZ\nP1+y4m4S6IJwEm8ygx9rcYDmT09RLKTyms4c/6nflaSECElC1LxUGRfrYFhL\noN2umd16pD3MOySdFW/EbrvijEOn2K14N0RQ/2r0LXr38T8VF61HwVtiL04p\nYvKVJS0jGsdaYxlueVdFxnO4aoMQ2Z3n0pJaRrJkpJGTCef4zvwLw1sf1bu2\naYTW\r\n=fNcm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ec22e1da9.0_1620671025599_0.8048856075539719","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/segmented-button","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a2cce54936bcf751532d1d9b74e1704f4adb51fc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-nightly.7427449f0.0.tgz","fileCount":55,"integrity":"sha512-0t6xAiZml3SZLlwX0P2+h12v/eEd3eET1xgY6GFmvdReEIU/48UmRACOUtxgnvdX2q5DayGq/4BITsVhQUUdnQ==","signatures":[{"sig":"MEYCIQCQv7CkQ1rTQxFXqMIdhBdSzI+wMiUdEGKixYQSBHaTEwIhAIDcde5+1F3oq8rgfsHJxDCRpvUWdRjuRRpxHwhlEXhY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8xCRA9TVsSAnZWagAAWsAP/iYjwJwE8H3JM37fhMhA\nIEURt28/xnyo5d8SagE1vZgrhZ50ftdctn8Xf6Vs51iA3BNFV++blrMlI5bz\ni5VxXLi7/CZcQTzw0c1Q0goUiydw+NiRWgKc/GpFDCOv44/SB1ChLpOL0JgZ\nQ1S6ncKllYA9Fnn+BcmmyLNYbGPOCuiwVa6bMkojMyMgAet/smN+mNYvtR9Z\ntnu5ElShrA0jI8WG3DtChwKK7DzRzOlJ5Wlvm0q569GI7xYtsODPqrCydkuq\nEa/oK9tNQheUgp2ZRRCRzTbxSBDepxxwqCaKTuV7e31b/wzfO9V15UM+zhLc\nWcIU/SAisB8q6dFFZCeb6c+mxG18Z9uDEuZG2FFwbTj7yygQXs3QH+mqB8+O\nxizZxART5WrYDzP9FJZkooO9snRzagQr15wbQcvvQXKlB07P7/1MQFrRldIc\nO5tdHYeJwSgmL4ijos0sMdijbDEI/HPcxozMqWEpbfd5mn1XbLKp6VA8bJry\n6BsQg0aWlu+Zb4jEEW5oq77P+4S4KUWKzj1kVJdUDOdLkw197EX9PI9AxO4W\nP/OsfjzjfTFg4sxY9Q9+/f/84pXBolRMIUtS6oGkiZlvEDioU0BHKF4v9Cbi\nQVgBYHxUFt5h9CnhUA5onfHyu/5Olp74WvzU9U3wY0o8+eg5w7Klf3F2cDu6\ncJvJ\r\n=ee5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/touch-target":"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/segmented-button_12.0.0-nightly.7427449f0.0_1620672305004_0.007152952565592452","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/segmented-button","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"799c7dd4d261cff38a43e11d31396379c9be68b6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.957cc3bf5.0.tgz","fileCount":55,"integrity":"sha512-tnnL8eMRZDAuoNd4g8w/+GE3TW0qnoiCRpUPRPdo2KdbaYOa0hKJTgZOfpd8bvwU1wsIJ5O4KACzh45oK1HjvA==","signatures":[{"sig":"MEUCIBttel+zEAvvxL3iUKszci8q9JJBvpqO2hkGWL9zy/EUAiEA0IgFGb3kDIBfMazmHgcWajOzgRRLlk0k3EuJLSF3vLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawyCRA9TVsSAnZWagAA3PgP/1QIKq74TFA1+ymHDkU7\nkDsaLQ37kAYOKCG4ZJtP4hLSrM6L5w8ZY16qN4CxsMZL7FqYyINOQYDRh/GJ\n3yUZecOQOW+AiNuar/+And2FxC3GsKchtZvh6BtleuTb7YcA/zi8QCeGhacF\nIE7fqSKWgKp+Qk5p2O1kQ7O/xIN3gxrFccxm06hcw/PzmbHFHC+lmkelQM1a\nLFYxE8YnReIvO62AbU8HIr8XjXRr466VNKfTTs+4fJ7+zEanLA77w3w86hqz\nia1gs/0SvNzFVmQnSHrkcKYn2LaUPSEz+ChM1Y4xdEp5XLl37S+/BeQna1KQ\n+WfdItv8/v4QA801acYmOYPjuKqWuuLOS0x/e3cAmnhSh8oVDcOCW2YdmHit\nTCO5wEfZv+3Oz3LDsH+oosDgwzd+X52e54XjQME8DbCCv9dw6ciWtiBtFyzy\nekg5ScbLC3dJ2SdaHVWDuhqgLJBFD+Nl5g49zUDbRqwcbu02l0nIuyH27mzh\nKN5rYNowCDyTKDQ0Rgclg0ChMtIxBw8H/5+hKkFoRBFTB/WXHz0Ay+awkPLY\nqcxqc1ULbmOcLhALbw+vsYADhhc41hb3E/fQD3vGhhSfPEYuIFYFIjIgj295\nlaEbYrY+bGaoQpug+ony013mB7x8hfGEQrr/Vwk9ZVoMOQqZamR35Wsysy0E\nByBS\r\n=B1Nj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/touch-target":"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/segmented-button_12.0.0-canary.957cc3bf5.0_1620683826002_0.4909231617392049","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/segmented-button","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"80a114ce4f3a3c39fc543942de4a0f3e0fc614d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.88a33cd70.0.tgz","fileCount":55,"integrity":"sha512-4EbW+jAdJB+Ch3+2Si45j8I/1z4l0L+wXBIFMyq4go2MLZyrPJJD/S8wAV/qk/CccnyDMx5Q16XmYzJ5wuXNbQ==","signatures":[{"sig":"MEQCIDV2TDSp732CoLFIvlxrleWEAEEaWtb+nQDIZTtV2xMFAiAnYQDFbPYGrtzYjljDPo5h+Kzd4QQSaQPxH1nYl6CwDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcspCRA9TVsSAnZWagAALlgP/ixXVqQM4W0vdRvlKlZ0\nJCpgbgilY3kLg6KRHTbaNFrPW7zIXZ2TrblEOgIzbvEuZBifPQmnQhlmiZrd\nlAeNMTLZYP3+5nwFSVOTuslKtLwEYYnycquntVR/KrNd7FcbWdx7d/nP6zBh\nUf5WC1inM2DZQKGNRQfa339OIkcnuuxk5ofecufkEggPYzkUHpWcKXkfO7ej\njs2KpHpw0LjONtOxRm0O1MSQvu+2kVouDil8CLoQJrJP8dwEmDT61mvnVVFJ\noDv2l3Bb1iV8WnGCWJtcI7tHBTfmq+r4dTXU5DVLok7GPymIFFEkH7OC3vFH\n6akSTfPSF9NVHqR1oLA2+1vNk/BoH7W7yWzzCaswwFH09d64PQLW+VoWuTID\nQD3mIG0EvYFyH9q5QbTZVSr3xYEQ//RJ5sIHk06K1akUd3TwzeyxsjCGatqP\nRFm/9xymmnYD9xjN9y3cAHTOlQeFmLOdp06SWo4tNo6Btw3rBewmg0O68fo6\nXOFXaMUrfgRs3EfNKk5C6WdnMizqWocBFZ6Bd91CY6DKHfYxGhrcOo/01cKs\n9YqkC2oOa8U+kUnCnnzht9GOOtg1R5HvBkETHoHd8YGWp1TYQA5OFFySQFXe\nRuy86V9clAmU5ra6qsmOvFjNy1uhucIi7NJRDPPYuv9SdOUcKCZVBx1Ge/v1\namag\r\n=P0LF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/touch-target":"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/segmented-button_12.0.0-canary.88a33cd70.0_1620691752994_0.8168812308745907","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ca1a78f0704ce19628310e9033c9cf45b7a1d98","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d20dc6dba.0.tgz","fileCount":55,"integrity":"sha512-cx18/vimN233QzUIgZG4J6zL0/WEiCodOrVie3ML1NojEHXe/XrtiLaSgecZ5nHlcRQ2V72PYJSrz/dgUf6Cgw==","signatures":[{"sig":"MEYCIQD3jBSnnpLqr8ErgXjuEsaQ8JhbUpvpbvxiDIQCSZ1NcgIhAKtqj+WRHe+WCwTwmPtc63InEdfLR0zr80WCQQPCG62x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7bCRA9TVsSAnZWagAALSgP/2euuS6vrZBDH+r5kXLC\n9dREWKs51wiLF/2p2nErMGrVj8gsSLPvqtbj62wkVgZlAy5zOgAZ4xW5f9Ul\ndgwf5WBYIDnVpNBZp77czirRNx1eDEi8qo3sEm2+SmmIf55hFSBl3duzgNJV\nyX9xicO/97Mjhef5/LXPHvLrwCtnaIsFHNluVCVcZVP1oMuOfJhFFokwnQrk\nVniI8HOy90KXfvZwPrf5ezOd7Bx8je3U4DrXzYyKkHPT6owhmPNikb1N00Yc\nXQXieFhNBUeNjQCSzwPVkntCEpSWhTjT/EJOKjcB1xnEGDH5ZRKbSq8RpbH1\nwqnAncrjgjGa/f5/A+RlvHpl/3YUOh9XecHe8b7PLAZoUopWPJuyWSuUigtn\n8RZxpKf+78MEDUGmJpWcKJI1JgxkJZGcSO8qtzZlKF9/pPnCOwEz+cBtIqXQ\nhPZqFTeurM0SG2BCkHwQSR7mc3jMcBmFK6bKZMFPVKl1DCogPeY6gK5Z5+rX\nGS6B3AySB9r4HylWsxeCnDJ8XWV+HympKDT4DKo4sRKwY53peSGvJvY6jkym\nSyGZHy1lvJR/NhdF2NM9Egq75YwoxTqPln3iCAX/O1konJ/EBkD+vFqesZeg\nZN0gWr/GidUWsHvYEgtvV7O6ODOEMQS0In9kSmpeItGO/X493hWw3BpkWfSl\nnt68\r\n=fbbE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d20dc6dba.0_1620692699254_0.28257576366302595","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/segmented-button","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ac89850cb66a0d0641f01c91cda16d006dbe16af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":55,"integrity":"sha512-aMV2SuJCxfx+JiCi7iDtL7Ts2ABrx4+Qn1FJkCgmVjcZbx/gR4byvGaGl8gQU0I43tostdUqlRB2X5nymQVCdg==","signatures":[{"sig":"MEUCIFc3RMJaC/+Gy4+KMVnr9gcuv5RgM7A+EvhSd4PCDfyrAiEA+3zZv6bQdZHdLtcresEEk0uV6thGP/U6AwUkY6n6Zhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbNCRA9TVsSAnZWagAAWr0P/jE4q4gDQ2silami0V9D\nvXjLjTL4yvsJAKJspPwlg/n7dWiR7k76PcLY9J0gTib+sZFAEnp5/8klO4q5\nh6/OI+Yb4WfK65KKamsFFwnYVMjs/NB/HPLH9LpGSihqRxpw4TO0uaBvcChR\nQlAZ6aYihiQQViQNdOyGVrz4zecY4SALAByx+ekTKvMaoLx2bpyP3dyFeV2g\nOFSRPpXnRZdwcaXpn7twpKjG4xnBtbeXZupc8vE/1QxCe8rjlqCmwfIXFXkg\nsmA8SIpvpaO7/16xz4f/KTWFz3MMyFI2dBAMyfSG2sYcDNQJBZBrIiwdGJEY\ngTlBdAuk6YBxVKBKxEHjfYg9b98tj1rYaFJfiHjqtA345auTxmU0eg7yccIS\nk1ZIw6eg0dnkT2tFnQMTF0hymvCjvhgCNg1h8LsrKjNSI5zKFqL3LfnJ7iCE\n7+YLb7Mc5hzBYnOqH2NTNA6PIXxN5Wn9PoT+kV9sK19OXFqgNiQQPxMFkKgt\n9a+MA+EmvhoqVDWHfzRq3ir0CoBmjA/I1Sf0mQZLUlZKPvwtDWsvCCNwH1pq\npcpYkl+TvegcQiZXmO82b4Iz7FUsD6Zqh3aBtnCeV7K+6ChjLtacLCHnBfns\nKQvJSvpNjP3dcc0OigYfle79HOo/HpGTvq1tIfFIP9g9JxXy3iYmRCzoOxhC\naouD\r\n=gkp/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/touch-target":"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/segmented-button_12.0.0-canary.0ce2fdb02.0_1620694732628_0.8047805547822606","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/segmented-button","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fe83e860eff9c5738e972bcf3750919f125dff4f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.cb162da37.0.tgz","fileCount":55,"integrity":"sha512-zjOjDBeZAQI7Js7y1ZWRg5rqXDlF+lmueeXBUY8np9gYtK3E6a/FR37GpqE3dAzXUf+trrvBm55biP4l1ptW7Q==","signatures":[{"sig":"MEYCIQDpZzB/VWESKNKxakyzjvkBj0qpmH+bwDXhRIUUEpdQeQIhAOsT5cWp6MKWKdepXntYUAMKTAtjFAETIR1NmYAoNvjt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTOCRA9TVsSAnZWagAAPeEP/1GrwCVLipt0Q+aa+vDs\nsdVxqWT6oLPbG408x8K/D0ZrYgAxUftWHgUbkJkMuGQa0LY56hiy7TpV7b+/\n3tZVBpp5H/o+htEfE8SZi/KEhmRDR83dOR89gCimE+foDhXRxQkQFg8krlAI\n/AJK+8WFNU0D0ehcholFRA+XAxzjtJ4U57aPoNbr/jW2CNIEIMs5Z4dvDjpS\n5qlbB1eLgRBsQ5H7DO+liO4b7LctQgJbJIl65n5VGKXk95tw6fwn2suFfqbP\njo3UtcX5Alcp+B4USrjOl+9kxG0NPNUqj9HVXSqSH0TmGUexB7X8qZbfKP4H\nJ8/napD7cc52duMc+4+IdAe18ppSla7YBsojXgxmK07vMuXdK8yW/MAPwSED\n+uGjx5xJwK9VYtxjJDM5uU5F97lKQ1WuEh3Kp92AAeA9aow+3MWL/rqcJ5X9\n0eJZX2sL2kgErKICbg9vHmJpUeU8MsIey0gVozrTsCgS551V/kLMkPcLQ6uJ\nkYLwxeJ615cP9ukCqqOAfDVH35xAsyRDDY1XTQc7bocJbPsryLUtpzfOkROc\n4tFIjt3nFd1kcQOnYi0R0WCCj1OUeeLLs82eA1DbM9m0lPLypvA+jwjIRl+D\ncBFClIOu7hMQYU0nopY06PqSq0CZldHTn5MJI7KQDDHwGy9UrsuoV+RcjHhV\nVd/s\r\n=P8Ve\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/touch-target":"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/segmented-button_12.0.0-canary.cb162da37.0_1620698317359_0.8773952173884143","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/segmented-button","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e16c2f41f0efd25154eff4f496ec2c0998629fe1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.573dc7ffd.0.tgz","fileCount":55,"integrity":"sha512-y6Y/z4DtDURAzYl0lRxw1vdQ1YHEel3v+dmURdfBSsREzk61shyqm8FfjGzEWH/etgdHg5DCGJShkRWEmOurQQ==","signatures":[{"sig":"MEUCIQCiIMYop4GalM2rco6BeXYzCbIeVzl46o1Q+/gdn1ziFwIgHIX1SQh/ydRcsp9RmYXM3/PoZmv/igioZh8Cwj33baM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmek+CRA9TVsSAnZWagAAoAoP/0dyCOCSvxbxkC57oSNn\nMLRvaWE+UODbgBOWjaCt+wsGJPs2QFIK0esK4DNHmfVaVx9Z3TSwV0RV4pPO\n0K+SX7rKwWpY1xTkPWmtjMJQ/BtYCX31vt9wnZRQU7ZZMyVZdTOFeHoRdayR\nsIsRIpW3lyJWu4OWIMz4czPjMWBSef49qjan/6fZW3iTdR0RUinVPiJeszIU\nf9BAoNFplS6d4Ycp/pngmXc1sxrepwm4a/OecEvUnKUAqeZOxsFLFEfHnu9j\nkntwp3UiK9oNrSggSK3Y/wAe1NAKa1jW6iTfCgKY/taJonIXA76UxR7UaxaJ\nU6u8kWObQjFhAUS5GIWhyxWNCpvVxDhudIe5ojItvr7emQB6C66SAM0lxrLh\nPA9003fqz6MVEyASNaRZMEQcH+2lTAA68PvRLNv2L2BBOJOmB/n7YtdA0dLL\nWsHBaqzzOuXX0TdKTqgHUFZDQh2aLosapt1x9xPjmZTj3mThy1Qyc6c9FU+p\nM+l9H3K5rhXwvfEFnEoWyWXha98CbDZvqpPv10AKxyUWzgbsfOleX0+LIgcv\nBFCa+ikd0pxrDsvZ5X1k8d2ACmeZjY0coCyfIMPM5XGZrIfyTwPB98/GTaru\nSfqNjRVQrK4nqGmxl47BCjgc/9JYvLty70zyZn/8DUjUAvig3vXhv6Vdi9mF\nw+Hh\r\n=dzhE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/touch-target":"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/segmented-button_12.0.0-canary.573dc7ffd.0_1620699454451_0.20829648672461487","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0052a8031db026df7d6a999929a851ab6b31c435","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":55,"integrity":"sha512-xmqjfGWyORpc7oce1UCCNWuf5olIRyMHH0D0D/waY/jUoTQbDZX7Cod3nSvwNiJvITTGVIvyejvGcYpS0cmDVg==","signatures":[{"sig":"MEQCIDxnttnjya5HMtLQ97YMeCZoW3wMvmPpflLmu6CsXigGAiBeD1jIwxSyAvY/ULRflpb129FCHSsK+ngwJ32QqU4rUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHGCRA9TVsSAnZWagAA120P/jp8Ha2HQV2xdBpil4Am\nrUH/7AcqBqWRoO3dRANrMtbL6ThM1iwzhClghs6b9OrPwt/poC5WPhv6D7L9\nUOJE+6e0PeNaPZkCIijzQ656pL4PBsCc+g8kapxxrhSgnGZjgYFDB52Reo9Y\nVZR3PAotOKRjA7WnfI+fOqJov00QIPJO/VSc3P3e1ubQeHGH71ASlAR5k/nN\nbypQ08HsiXdfOSg3qEp44YKJyj8ON3FM520NFHNioSOcdmVgMeqUbmxnV6It\n49G9UsTaOg2PcFqb1+GEVrQh726bEeCwMOWuEd7/amPuV0X/BH4tMvoAvsNr\noP+CROXfFR8DQ4i51rBu0sK05DfOS5sordt1Pj9IqQuBkWm/j0dsVqkO2ZLD\nH7j2rgiOmMvXjuETWOgOp2XKSElzD/xHwysAgn4Gu2XrLinDyT5gL9tUuHUQ\n0CmrGHeaSXhXLkElWn1p9K7/DIonZSVdUtz3Lcb7LG+bJZT4XVkwS1MDgfxN\nak+Lpduc23eetzoVZpJP6r603iSo/qIDv2F5AL4K2TXeCQoMS4PAE/2RdFby\nJBtnjWzBgLeSzlidy70B/lVfqCUnBPCM6WKVMqoqYOcgOklaWSIA7Gkb6wx9\nxZbouh1r8WdRiq9PSfc183uddVm/h5NnsgZbcoytg1FU3zYbOwsBvaNIgmpn\nDN8p\r\n=tRIq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d5f6ad3fe.0_1620775365873_0.33685106791430064","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/segmented-button","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eac17bd6c01916c447d04d2e85a090a5d5fe28ac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.25751d2ed.0.tgz","fileCount":55,"integrity":"sha512-M0QccsZTNED9kTvcKbrESWgb5d7ntNyg/BsrjE4+7FS4pf1ZDYdqahQRTgc7C8TvFJYVvcxIpjU6jLMEyL1V9w==","signatures":[{"sig":"MEYCIQDxMd0S8930xJbRSn19Yu5HWhjAPeeEwTDuvkPfeTUmrwIhAKU2qMQ8L1YWSJxU1OumFv55tvDRWsTs2xie5XRTKuGS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAwCRA9TVsSAnZWagAAnvoP/A/vzwyj3/r3RF6StGuB\nNTFwz83VkudgGM9AnI6BXCwXJFzz2z+3SGbHyRy0qyXQwZhR1l53DP6PUYjN\nFuPEMbV32g1f9Mb9bVz5jzyXYWRAY96oJgVdBdxScEhpqqS5Vmc41vmgeKuh\nogsRq9LXmxzCin0r717V913aA1kk3I3ztwLLhN5sl+/3aFwVX6TkOesrMLBj\nBFzsyPhU56OF0yuLVKMrx4g8bD1Gn3rhmiYqhxH+y1f8U4TqdmtcIRa6GTHb\nuFu144j0e+YVAL93TuJpmNXX8ThDPHjxzm9tj7x7S6k+R14JZT7RqJJ5ReLu\ntCled3TETrUjQvVdbw1ISqGojAQ4hzyymAehGoTw/qOdVmBPGxo4EkiMBnuZ\nQzBjz44OMviJXTGIjQQzNP5RgLIvo1ut5L99WDIIh2RFbwofU9ex8vpR/oMu\nQRoPYORGkqNexIBjcJrRtONBcKzNzpknxPDIrHxlYROTTVsva3ADfUCwGu6p\nyvhiF5sIrX/g0Dq+vmeP/Fs5tpeJjrcdXbe/oLeghViRuTLApsEvyOZuNMzh\nI+A35dfy8slhKj6jyrB6VcD5Ct9k9hA+46oQVfkpB26N2Nim3jf3at0WU/oF\nWuSfdXGcMXTRcl7pdI/L/XdQ/QcFdWPuYCJtwDjg5cuNMkWTUkCrPil+zXAp\nR0um\r\n=NASn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/touch-target":"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/segmented-button_12.0.0-canary.25751d2ed.0_1620836399685_0.6767183100092409","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"526d22158f6f0837b8cf6aeb7a4c0e8fca635e2b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a23ecb682.0.tgz","fileCount":55,"integrity":"sha512-EShiritRgOfvS2Qup6vmuVzA2wxGihyzxSefs7sKUdOBPqMxcR4TbWbGFI/ex1O4ESKFoFmZiLScMErWFl9nGQ==","signatures":[{"sig":"MEYCIQCTwolH1bayyoJjQ/5XLVTKwvfvZnY9p6a3F2LRUUI9OgIhAMSNLqScVFea68MHq2J4lXKWBxG4uaOV3ZBlg7b+WPnM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0cCRA9TVsSAnZWagAA39sP/iok9Fiw8xaAz/tYOAj/\nAmjVO9eT+deeeXxHhBfAznFYHhh0u5sz68zBFefO/m6Ko16t0oJllOZwQ/AO\ndYqAAwXSA3dZh3XBdtIGDW0JSUvwHZxEWdiGbZOldP7s01rd5sVt/kydByxd\n+toTX3pjHB1mr72u4me9nFFMR7tUUHnngL8V82ginTbf/GUPCKMhpN6oJoju\ncF2OoSl0sEAAyImEnb0L6C2KUk+v8MaRH2LwoutXIjP3HeDUUlnWPZawpfLm\nXiiNiE5lW5S1LXUJWpimwPWB4wQoEnO0Y+HICAuzezqX4LGqoro2suAtqIfL\nMdc2Yq2WR8fvyEZr1ykGj5c8Dj056IkVeGrYsPkny5sn/sGD0w3Nk1inJkZP\nL5EDEYwUyafL0YFV7TfHfBIAO7KkzsT6AQGrumepcl63mzPTvwI/6hqlLv0W\n74SKmdqGWYN2jx75aZ0slIb01mFaAPMC3zG8cx/o8fCTIvSS/2qibVS4yJps\n6t4dIUaz744dKPyB42aC4swsELgr5JpH3NV33mcNvBCkmRnrygrsPCizxztX\ni/PS5ZXsD+HTKWeHCJrRAzpV4S0aK2jVpiuLyJaZlqeNddjPCXifgq31eUfE\n8sQEzAN+TgQBOpatcdVCG0hmOxm4j4+9qKRYxsM78TxY58tgfYIFBPFXVARV\nlw25\r\n=t0zv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a23ecb682.0_1620843803483_0.6872613111563055","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/segmented-button","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"71854afbc875252ee6a2931cc9bdf9ce4cc72749","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.33a954852.0.tgz","fileCount":55,"integrity":"sha512-EJ04xhIZ4lQi/4AOkAF1w0Fu+FRd3jDbNM/8mUQ1NfFOgo7QLReEBfVvKcXjkHIg2mStoVeAJ0x/YZB/NxLd4Q==","signatures":[{"sig":"MEUCIQCk0Lq8i5giGEzAW8bl1aOMqAWaGhuxU7znDtLPonzqpgIgSnNnubtc+D425z6LxTgdnxZFHEAZMcBxVkRL0q5F39E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDICRA9TVsSAnZWagAAVLoP/1PFz95eCTxerxEGf3/Q\nZdObY+4SJXMIciGAt1kyWPG8A6aeEnqLlfYkCnZ5cZlbJeZcEZgyih4OunoC\n+Gyi78qHF6HsDNZLYlsiej6/u1PdKRjTCpg+eoAqPytJgAjX7UNUbOgknX3C\nqI1uqh/kdr4wEdpm0utA+wyZK09L3pSt2eFPvTrYJZDVqn71kPE92MlsMmSi\nUaRG3yhOVaK14XK23QxczsvJKVC3o40Buhm0G41ip6zXGofmqi8qGlbjNHYI\nkn4L4L+5NfVJsn+pryK5RHIgBsfNiXksZh81dKuE0owxb9bv6DFb2fIwGCez\nYBanIG9kGCEESlMwksGTJcdmGKyRpNieLksrpiBl8H89+GaIJLcIRVRBUIBj\nkCISr3oa/EYy/rGtoJKvd2W7cKw3hMnP/oJ0b7ylfLOCb9p9PbIQlyoNvJFy\n/sUYs+fV3QNCN2LduStepWiRmSirxsCraO3KVibCNaaF5OUlWe0Lcy0gK1J1\nhOFUdYJWVw6O/KMCFGFmSRZMOtxq7CITe8RLARyx1eb7FaYlTzkm46RMXSQO\nz0XPjb4mxhOzZM963YDr9/N9eWgO9l8YaB0draxBRu2QF8V42WEyqmy79LFn\nixyaO5IqxM/D6r2Eet93fTZAYr3vxpQICt11d/jZKoxITT92ol3oUDdetgn9\nq/9R\r\n=TGOq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/touch-target":"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/segmented-button_12.0.0-canary.33a954852.0_1620918472320_0.3018313843488549","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"86be061a66a7c5fd13c2e4bf835110709fe5a5d5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a4484849b.0.tgz","fileCount":55,"integrity":"sha512-n+sYjYjmPrxch+zMCfyJLnE/dhYi3r7k0+eVnISAFiMcUjrgi4XRT1TB50jpGGxzV9LtdAlNrruri+IDYu/FbQ==","signatures":[{"sig":"MEUCICIO0UpDi3jzZ8FApfElLZyxiZ78fcw6nlmDkAwowVsyAiEA9gO5nGKOtncdpunGqoyEYwTtebGdETXH+iRVdwPMa+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUZBCRA9TVsSAnZWagAAAjoP/isaNkWGrQSFuCSDAahz\nhPo+pk/pbIPPZCaYBmvbM7gje8UmO9PLj4BjUVP8xswlNDWiptCON+w5XQTU\n+m/Jp2Dk5k0P6GAgfp3RaETpXb/CBTpfWNV9r6OoQwKZcMhElXmWiS02Jgow\ngJH367gClsAccMcdLLuVthkMetE1Q0emtO3yOViH4s+6FHXI5lGgHCIIocKq\nGIJ+fWg13FHQ/8uLXQienvJwghL7z6Eq0TY1arpj20hwS4d8dieuBgh396Jg\nYcv5DafPm9+VEhEx9BZ4r24ENaW90tMBdeMyJJQpKfYywBVOSl3si0bg31y4\n8i1uxczeMfpsY9o7fInwGJBBJLOKWTEZDpot9O3t2kR78wXnS3CudNlRsqKN\n1nhX85fJ5bul87bukOI5xQu92I5Z0zMNOuJTKjZsBwaqevdt+PwWjeblJkOl\nOBS64Sl6hicFoNXa7Uz3Z/lai0MFqBPUWL4HzjFnvDY1UrI3e2R34SU9ed3y\nAoGorvagpdOaJyDq3T+Sz4Sm3JpC3IJNI5V71F7PtLqPY0VJPgaHdZLquGsZ\nyjVki2jq9qEMdhCm5+L4EMe64dQde6juuTTnqI+64b2x7tUwXSwxOcfTI64/\nWVkUP2+sj4OVbPc+WaKPzZ3No8FrgMR3VTIxgZy8yjyBZSb87xW3XEIo2kmI\nDz+3\r\n=ZVx7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a4484849b.0_1620919872633_0.6566509097438682","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6b3343ce5f1ab69ee79c8657cbdbc330aa63bd5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b4c3f513e.0.tgz","fileCount":55,"integrity":"sha512-G/2ZjXEaQ8IDg5OjpQeD1Z2fpD+wvWyMxcEqi64gFCy3MP8x/CeyazPSAfyCh0XyGxCjTN4HTv5cOFIiaOb6/A==","signatures":[{"sig":"MEUCIQCVJdvMEgF3rYRCEmuI8uwWrhEKMFvi/1DFFQJOZhfjzAIgLzNLKJ9WXfBeN6c29TO9sdnKE/9U47GtarTKt+2U1UY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7wCRA9TVsSAnZWagAA0lQP/3dHTijDqDKM8FJcqJ+f\nSwiuVKEhnLu0ExF19j1iAGyJ/54tqQp9dCUuzHfPHhVzdmbVKNd7HyXsmh6e\nutIwQuNtGDMpMGXrka5O+K1WjwrpJTX7zCY9z9YAz7zoYicJhci9DLtTpKUO\n2iXtw7dIq5ATnLfUhaQYg1hiPc/BN8fhYAfA6PWDGa6fd2pajybHdvu+Emp7\nL74mQgGldnwn99LJUDNhR2z5UzGIY41PTX80RPZBt1l0AypXTafUsaVaqJa2\nPHUdOJ9hIrEauV938u7+xT8L6cRmPriOwHwjCGSkaogz8+FQiTsn8Sn3uVS8\nkfy1gxmq19LFH+3urfiUIxR/0m6nU2XcT+7rA8MjBBGZMLB9Z3kiiE03yKit\nTk9dvuVLoEclQSqCqqc8BcAgj5WE35COuj3b8G87Cp3UwGRr4b54U4tu/FPr\nwVNFEi9ZYaKOvhJ2OXUOnvDUCwPLlJDxhYCEPrgjXfusIjLIajpIz7bLn15O\n6BzBNzqSeOAP5slH8n16mOhdHlWmlj8+WDmYwSRUbjHaVOVAKxB42+H3oU+r\niJvteSbUJwKQVeASHCBXydBSqkYdbQFxcBnrG8N8p6yrFMBFztSpthj44bdN\nU7TQrR2nSElNdGfZLVp8TFBACQktL8QJBW+Q7DOi7HHHaPOQKtignhUB7me2\ncHmS\r\n=LrnW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b4c3f513e.0_1620922096338_0.9583888912175871","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/segmented-button","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"38cff373c113a8093e80ea1550581fdf71ffc95b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.1a8d06483.0.tgz","fileCount":55,"integrity":"sha512-IWYUAXXzY+Mp0AsBvyQwhrtjnzcJZ7tcXefOiXgZo3Y0JH2romR9IMHmj3qBuKgmQPLA/YP2lIWvLm0RXaiCyg==","signatures":[{"sig":"MEYCIQC4ftHK3m2DI8ZunQ8xEKjuW+NrrUIs/MOTzM9HxRaYIAIhAPGjzRFR/24qd0wM6aEYjxEpILQBpYY8vUoAA940RxzE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBBCRA9TVsSAnZWagAAA7oP/AhQjHxQhSf0TYhL1iEh\nZ2LoP0ZEVpkEGECGSDzRL4i4xPMK0BrQlrqPYWlPQwTtKgx8fep6iDprvXr0\nj8enLoChX0PZXZbjYITxiISjwUWywyrVsa4A8Fr52HpBKIvMJLSkx1lEjmn2\neLeV+2pK/SCg0OGLJ+xJSZEHRN7BodrS6zgR6J9VhWlWphyYFb5kFRtSitN2\nw99LMN4O6KUFWttplnc4FPmj5R1hEoFboeLNeEH+JncYNU6DlNQh/ITRxrc7\nShp9uPw8NGN1O7S6gH8vwIi0NQtOILtURVy0o991iUMNhOMIj++OF40jf8KV\njgoEM1FF0UGqYJD07tiAT9C1cqdW8IbR2x9lixksbSdZdhruuFY7XaZw9hpX\nSUAsrcjILV3EGAqzs+Xdsel6251XBqqWHplqDOWb3XAA0LpmV+keUsTCWA6n\n8yZdhOcxsrnlfA7tzutYIiCJJBR3J73wEjfdubXr7NgGI5plXrp/8HKCCR8C\nqxyxP6TJF/dPDiabtqlIJchRL+3Qp84db/Vf5YQsv69GJyWlx69/bOokeJ1P\nr/09S+PGf5+01dORoHV8IPyOX+Updx7Z/OWsHevoLtfdWawXmjtf/DCX9BzC\nJsPVU9MxerJSwb2Hr4kByKiKVk7+U+qPTJqajCgzZ3VIA1HgM45gMKbm/8pm\nVKAL\r\n=wQXV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/touch-target":"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/segmented-button_12.0.0-canary.1a8d06483.0_1620922432959_0.27071880184509767","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5dc0ca344ecf9772067153a359a16b9bc3fa409a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8e6081836.0.tgz","fileCount":55,"integrity":"sha512-GYAaYCPRTCqEcd+anHgUvAD5M+WuP8cg9W/V7qzlli5JyYC83JP8HjlzQ79z/gMS8QNReFXOsFsxmZKZx16m3g==","signatures":[{"sig":"MEUCIQDHTc1Wl2yKSNlCJxC04ijIBBF3LvV4wBzumyFh1DKjRAIgL+1KIyctdWfx312iQGpwi3v7fBxJBd8FWzacotvT5s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5iCRA9TVsSAnZWagAAcUgQAIgkXYOWzRGb25SjpVZy\nZWivcbIJFGlyvrF3nId/udQMsWXT15WvUwgUTA+T8FTF6Q2hMDkTd//E+S1E\nuTZSPLqRbuWHIgtwzIH24ZJQWTpp9JErV6x5B3Mxz+17SghyPd7oh5GpvVcN\noK/O7y7gTZw2sZ0P4Ro5+DNZtBW7wZFcG81YrwUMtgzwarBT4QaBj/6F07Gu\npH7SuiXj7yHTt6m/5FqTz2Df6mHuBkJva3jm6NmjtF6MYCDebw3+oPrgUcJZ\nDD0wiQjMIBPKO164uiU/mr5KusFwNzLVlxoNkultGr1YJNXYRHBnx76CDuMv\nwsXxSV+be8PXJDrT6Rd+y8cr1IcXaCoiOZ+ydQQiqJmJT8AfT1Z+nGZKhaEl\n8mh2rIVebhIUkv1D7sOrpIofb1ARbf4vH56WNkml/fpxtK4D2L5EADcu0MD8\nwE3nG8roQGMKHsOwgUU4wYArAyuvJPWXc8lKoTb/btf3H8MdFBZP28aetv2T\nvRWUF74OFo9Gll/5lMMQL4H/0xhCt7f8D8z+Ou4PevngbPb+h9/x4+bob+2d\n87Eqn7MCYRBbBXN8DLgkreW2Ij0pBHEs9tUPr3RG30QQdhQzWMVIK83YzI8P\nzvbzLlb9dorHkZmIEJMnA8q0/6P5G9hT/fJ8c6OAlSttQWBqyltEjgitmIW1\n4mZi\r\n=BZpD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8e6081836.0_1621028450484_0.23368861940830987","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7f6c6993e9b412288e80abf7a4945d70a8414774","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":55,"integrity":"sha512-NivZw0Vm1QYlxqE296hHE1tl/LCo/ucGsLhizq0J/4ss7Tg7WTELYNZFbW9O5P01ZcG+xcYBa5DDlr5L2VJsdQ==","signatures":[{"sig":"MEUCICqvbxgvXMwRpjvVtQ7z5dIP9Tm6ydjg1tzG3kyBQVeUAiEAojfdGHnnSBTVTC9KGF4pXeWxSHJ7vpo+HoO4i2V1PJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvF8CRA9TVsSAnZWagAANhAP/11ahluzAwRwvuQ9xIK0\nRMYtZVsg3i4zyYmllU22Qo8BL+/WFoSEfA1OtqvR6NXfyYD/70Uh6O5d/am/\n32YHr1lNKpL30iQtlHLNiCm1BVQsC8oj7BL1UXSvsLJPoCRQUZDuw6Imt1dm\n9ly0hS+ptZrJIlL/61e2guGdVE3Nb9ZA2zyW0kmOVooQbD5O2NfhFomx46jE\n+I0NjxCdiAVHbOkIfiE4qgSXZjuInmvlmw2PNKat0aTT/rXL7QEGmpFO0wlC\nMUIVgpEKnHdT4oX0eiaPeaQC81NVwMCbhznebw4TO08BRf5BDN3hnQKFX4kO\ncJMlzpYn1tnpm/2q13oDaiVGd8L/7zx1NT2wnho/U45NaYrUEKPit5WKmto/\nSi8P2QnfOig16SDct+DTp5hXyTiicxsd4PNgSkX57vRn/0RoaEoQM0EbgJc7\nehGXEtoHvIq58tPSjTvnfkyO8M+7GFeMdd9dpvWzFSdjiSdtZ105HM8/I8wC\nxdqRYdE0mPspjExgifWXLe6aPhGk2xC2atU2kxdW+4Kw3jJUlJHm71jCd6dl\n/ILgImliG4YyPf5QMQ9cQ12GcFY9yCtT7gFAKSEa6b5Mm9zRFgcb0H7hpemc\n5ZQulmO/Hf5Ho7gq9cVzwyzS3+SwLfrxhBal555vtt8+8Iuj8tNHPrJ14erG\nNx9T\r\n=pBMm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n    <div class=\"mdc-segmented-button__touch\">\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a2b0f4cee.0_1621029243427_0.37321849519211736","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f3459581a490d129b3bb1dc31ce67b4dff9fa3f2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e8e39ad19.0.tgz","fileCount":55,"integrity":"sha512-AVyQUNlCeWDsojgy/6dNwLvCS5Z9BlBlP5mZrT9fHMoODBV5TyNynWgJQDMY9zagVzhSTGLJEMzOCtvkeZKw3w==","signatures":[{"sig":"MEYCIQDIy1HOeG6c5+UuWMcdGe0X+jk7ODXsNbu90Rz3xkdkEAIhAPsEKy2eCtwQj6WIY2JwgmuK1WFmVMlUT+5LajFHJkCm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/gCRA9TVsSAnZWagAA+kEQAKFQNYFwUxWj3ZtGPjZB\n4+IGnvq59UaJXFMOAsFjmF2BKHpLKvJzMN1U7plvEbnmsETUaf/x9RnnncZ/\nqPe/SgBmv11pNv56Wt5Bm+rFCB6SR9yswVDY5WRX49QKJHtHwGa8iRei5Ulv\njLEoAz0o/2BM/Io+iqThG9u4Frgn8zb1O4GargZCupjzW5/+q1frhR+yQ2TW\n4wqccPwyFa+ktQTAWFa6cZOUEDrv/Pclwzll0K15eIPjli4uG/evTK0hackm\nBCXhRlM20JaqSMOpIjPc3iOikQR7SWB+4VO9r39/AXS3m2PMBO927Z6aA7+N\ndiLdfOsWxKBGlutM0Y19YXV/O7TIuUpnq4S978/FTZ8jt9bdI/svtarB4PA9\nwcGVC5DitXz4fRQgkR+ejPLN+EsO5i80WNZzI0/ZvfeR5OwdxVm8yDrYmxHy\nvsIPFd58vuh0QN/vFGh2LZ0Eog2+B6C4xdKLOkMtz45H/aPCCEw/0a1GtDB0\nyQon3WpIMDi8MkxPQA5L1sqkhcVPtW3KZ7c/iZLpWUvdcGSANXgMbyn+y9jd\nZeoWbixYta1qPTXcxK1IIThPX6U3T4TGCVtOTxokvSr5cyiQ411I/w+NXh7E\nAjLr3rXwJW4h6yaxwl7hyajO5Lhu3n5XyHnfgw0UyShbFeEE64Ohs1q2wm5g\n7KT/\r\n=OuPs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e8e39ad19.0_1621368800386_0.04719329511780712","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"735aa2c443638f29d3bd21a30caa2a38e8763af2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":55,"integrity":"sha512-pUXbcNTqJIkX+Wt8eqpPlPdsXHdr5jf+NY3FjQTpG6wywd2zLVm/4+oBNt1teC9edOFmI3L0ymSHtrM86Ubx+g==","signatures":[{"sig":"MEUCIBO08JMXBgpa7Hi9MB0SHvABeRSA7vEiyH66SAOlkw+6AiEA0YXYTPLyh3STO1WUSWMbmSmUOWUK0JrC39D+9icIhKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6dCRA9TVsSAnZWagAAEk4QAJ5qGJ6SnJB+OhSsl4I1\nejCIB2g93iJzA4uioiay/xsVfssllzNEMYJsd20503sOxXU8Jh/uqeQbMDVc\n1WENZw9g++gIsdy4P66qSHUo8mnqSiNHroOuTptMCzMu+I5tI5PHQwEgIjxS\nOs8TaZtBgZ/A9Tu16PNPUKgpbghV/1r3vj4Jfy+DLNZjMpQ0QEyg5jtv1KIV\npdECi9At3tXnHWcx+zSMcyMm7m2RQFARu7wq05kZoHTKMRdL+0vV1j93x4pc\nZyCKezadejlAyoIOX8KUZ6I7s8/z5hOsNMDcHEUOKWN1kVBdrOAE/0rM6QDJ\nrxR/FM4bgG9ZZ/EsDq7Sq2toFmFrAdT/KjMClnYBoiRmzkv10zmjs3zMn++X\nKRLW0jmoaW3e3CS69VYC12HkC7lRGFIbzqjR2MELNrVU3WaWS5R/FiaphUMk\ne2iv4qqnIrgz3ABA1qD200bfqJC0dlWGL4WjWM5ZjT3CLrTIus84Pldv0xa7\nIgjaZWA+2VIa9NvRZ/vmTsO/2O3CncZHtFI3ULIdRUsAnhCIG2tUtPOKA7PY\nVf2fj1QT/Vcebwzj+b0WkM6WlRESq/8EbQvjyRhkYjrYNd9rMQIYuCiyRd95\nntJdaj9ww1uIe1necbiZYFUsUnVPnhoddr9Kh47q2E/Ck1VBQ6Dw7pVtA2z6\nbwQG\r\n=P11r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4bb5eea2b.0_1621438109406_0.8511151596812843","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a444d0e781fab674b5d3459b0da98ea10c967ac8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ccce99cd6.0.tgz","fileCount":55,"integrity":"sha512-COPdm71vJejemp1CkOe+17Ot9Mt5iqMhH++3apFd0g2crD/Zj8lGa7vCCTpBxnnnOnLaW16BMxQTkNIRX0pLuQ==","signatures":[{"sig":"MEUCIDlCeFJG0I6M6AJktysH0jctihz080Rh8V6nXK1pQ0KMAiEAvUZRYRvTgM3cwjYB05HADL3lxjXgBJVMSEEQbI7PJZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPeCRA9TVsSAnZWagAA3FEP/0l6foy8nfSpKrI1WNGS\nUvbU4zUVUIn9r1zqVOsWYp6n7xD0g22aqR8C7B9lZnR5Hg+g8fZEH2G+rYi0\n6WLMmdYHqkfyxIvRlXC8UKxBVRruwxxK3dUPdvoL92eK6927mijSwrJDpWW4\nNl5tIAYf5PmUM4rywgHdbe+0ysMx7TxAIqceEjtgSOX+OzByTsoVhYLo8FFo\n22ETIaASE0SGVksM8hIn6Fvvfxn3aspkZhfPQI5TwiZLsXtscOrMceK4uHvR\nQskFBwS4xOYfFKZMFykf6fzENHESqb0V4PkDgqFyKAnAbwGTM1oIOT8nbR/+\n9q7Myq4tnApJNFihMz4XSY1sRoxHEA5x3mAc+deVPGktnIcMWoiSGpg7RfZ6\nOy6N3t8JR0i3qHc9Ci6JrMLxIeSzEKN7m4rt+7DHGu58G99J5tAMT4N/HIRa\nNKQ7mFk2ra8dQHJ33szwYzYsdj+XdWIJieinPUR2fTMnmrnAPOiEpy8l71lq\n8/LR2YJOE15DL6A6BRH4ouC71BgTa3s6j9+FN5+1wp1/vnfry3auaQ1FIQl8\n6IbWjo0BaSZae459Y+XwHO0KtwsnBWUDkFic2L9JT2ZDONwpTpZ4OT3dm7SM\no+jsJbWTd5t59ATjNQKixL1w3fKXnEKvxCub2CqhVMicxXgxNTimJMXfGqaQ\ncg+j\r\n=evKZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ccce99cd6.0_1621472221696_0.03404738533021767","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/segmented-button","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3cde7acce2e25fda38733db1c154da566dbffe04","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.14767a8db.0.tgz","fileCount":55,"integrity":"sha512-s1RD+dJSLqHeKKq3LrJ4nxkE7d19zS0Aq8hT653SABtCpa07d1kO4d8kXAOwRfofBjqMGUM/d4a+PRKfwpQznQ==","signatures":[{"sig":"MEYCIQDFKUPOgNrRRa7Ibc5oxLxob3Rg1tkabeyJJFYCYFJwqQIhAMRDxqnBk/RRaeVlKctX4CNjc2wW6M95T5x8C9Dup+cb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvDCRA9TVsSAnZWagAA6ZMP/RUtbPFHklN7zhaenB9g\n1330Agx+zTCYf8dEwgJOIOikePOqF0csmDskkaMobCR61gYti4i/4a4lr+J1\nX1x9OYN92A27iTghNu9VKNw8m4QEzbo8hFhNGoACzTbLdIwYY4B21fZzCnOm\nG/Dy/mUnBBjdnTvSW4Rt/oO6pyBILj2cj4HotadkdW51khlXxLtp4c3h0gVK\nqxT8bcJ5mqT0MvTwx+bpncSBSUANwKDccjqMwSjFq+QB29OJ4AzFm9Mqp5Sk\nv8I4psrSXcbrppG4b6EwB8HWNPQWCZP1vZkguZORnd8zufW5Q7bKJYtc5Hsn\nFXVR5zoVn8pfG/Mv8xgO+r3ge+tZHZjCTZu+RUJxdR2wAzfdmiaDG+cBMG3s\npM5HqCIv4neOmJTkN0qdnnAKsE58gmxx4RNXqfLbKiuRhy4XlisZXNNqZsw2\n4BnQtnMvQQDytLYyWX8vIWFBylAjnWbaSuh9brpKH4u4RGkiH0ogjheDnXpB\nBoNq2xV55GF64vzbWZazxEmBzlDkyuUt6fMeYeFYrPVf+C5F2pKNx4/p8bLe\nQG9GCOh6VZcve/aI0arRIgIDG9BtFzRgrz+gG93nTgOy7HxWRmYggEKKlDYi\nkjsyi7eZNO/T6SoySGrcXYh0vI35suTB5DTGkkQBcI/Y25yLuKA5rukxcMqp\nCVB4\r\n=2579\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/touch-target":"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/segmented-button_12.0.0-canary.14767a8db.0_1621543874967_0.6425615499579262","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d3da224a7540f4d3d5ed022fd3ff43e4d1badb34","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.22c6dcff9.0.tgz","fileCount":55,"integrity":"sha512-GyB+90ZEPRRn5JTu1xJGL8XXizKe+m8cfXwGVfa9mXy7YMqRyY8t7s1CTOvrrLKBnPb8M0n3XQL11SLgmYCNow==","signatures":[{"sig":"MEUCIQCRKGW7W6RypoKHkXI3Yu0BeTCVuCOUFAm8pYH/ftreoAIgROZJZewVvtg6CB8K8nLHQrWZJj5fy0sNJRkM2T+hcho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PcCRA9TVsSAnZWagAAdnwP/1peV5Kv4hMe4UBKd3hq\nEUMqD9sVH+/VHev5wtj5xgSC7OOpXUCcOdqR1Rqtcr++oRaJJ3RDnar8NChh\nJBxNvCWPk66M3PHlWdyLAzO2HZWvk15tMmgmfiYS/SY78foIoOszDocd0w2l\nFeKZ29uMDqPfGImNzIdwlh4/kUp8jjPm29gOWCBrDgZMls1HTsJ/yC/VG8yp\nBRT3Gdxm6FvJtGWY3ssoN0pF2KdaSBG3k/HrdiBoHq5fdGARg/pw6arGyXtz\nLg0dUpr7je+voET1H1vKi9VZyrgUw810Q/YbYUqXgKw46Gt3d/SUOkh3LQnP\nHhnqJbUbV3hX8lrVYBnVYmdBJgMbYKJkPQJg10BLHlfGk4EQYtzxtLFuQIRW\nLR/BZlKUHB1F6d1rdwQa9M5Mxijn/IOslImgo3xkzT8M5zJU6S5nm2Jl+vcg\nDoXS03T2CG5XgareH5IfkPONI5mIZXPCCzyu74tne14iS4r5YtWoaYaBjGcO\n7wusCe0Rv50ShsNQkmZjv2kPUlu+94VgGTaEISAgtG7curIclJTM1Z9GtCMh\nqJRKu39anEJXmAFOO8dswbOMHxhsr8Cu4tZbUh4EXxNLncJsx5BhPG5WXI+J\n1KolgLYcDDtdcQZk+bHLnxYfqidd8ZQBhb9ZlntcRyqj9XH9C8zO+ICa5qoX\nNh1u\r\n=+QR9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.22c6dcff9.0_1621869531693_0.7543131958569842","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/segmented-button","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f10eaaeed5281d6f31de22dcc1edfae0bd252176","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.fadab3372.0.tgz","fileCount":55,"integrity":"sha512-II8ICRic855tq7NWML2rgY1B6NVrcjiNeqdPIEQ6dYzGt+OiuNY+7RCMpzNDnRXAuCc/JTmzYx9euy/51mGtKw==","signatures":[{"sig":"MEQCIEeQt0uE8WBtdNEEqt7C5xq6/+1w7JJVCmIq9JkEt41JAiBigCeyzOIauvCkSyMUDIID7s0fLtupEcxraPh++m/bHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87nCRA9TVsSAnZWagAAEwUP/i8e+xQg3O1r3OaSByJ7\nAscn5O2jF6pQXwSLWEIYiHIYjlNllkTSf/usNSbGyp7O6mMOaxktNancXm7v\nyBSizreGlmjKPwvs+9Hqv3WqoEEYrT3r/XejbNTzPqzu7whohqtWu9UlJO0R\nOO9OWEC3lONy14hAkqngr43CnUJclaEoyysb4+uAs92D+zl+GKo9QiTYpDHW\nQHpQmJU5nIrO+eDOw9PMrA+rgceE3gJDuyyrgAtD8ZTxywFH2HEKOYzJ5qOR\nhXY1oz0VFGWl6ZdHlPh4Jn0UXUT0Bmnbqp6e7bWcwCOTE3U5WjBm1wDf7Es8\nf/2nV9vCXowh6BQu6Mw4yE8o/MdNy9w6szyGLmtkOS/5WN8G49JVnFxKCSxL\n6hkpbfUDzeo8ngP0rIaD9FUh6tuqMYr0CUe9vaFNJRPkUFpNaoopaXuu9GfX\nQNqueOiSnq+y09otg3T9cyFYJ6ZceAX7K/v/xpcz1QQOQV1OOT6/+BKzjbIR\nb8zwOqtUhloLflZiNCs/eAzfHfSNHi2c1QyS4t/ovI9E9WGUkjUtoiK5W9w9\nJxhHHdX9XpUJvi8g+7FUKC9zOGAeXXwUo70SPjsshT6xn1gF3uSUq6kRETyp\nWwz/XACMjif5PUeFc92VfEEN3g/6S3dpw/GOSHoecHfnXP3PE9/azOMyyl8M\nt4b5\r\n=Pe1O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/touch-target":"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/segmented-button_12.0.0-canary.fadab3372.0_1621872358660_0.7093639815608064","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/segmented-button","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0a92e9715da06c262b8f090ab807d7a1eddeac20","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.caa73aeee.0.tgz","fileCount":55,"integrity":"sha512-+IXMIKhDFmX1Kan1r5jmNtKPFGiJBOtnDj9UuvF85NxEKY43mOygBwpeNN9jSExeDrnX7WGwZObkLwKS5lgxpQ==","signatures":[{"sig":"MEUCIQCVs0lskq7Zu3z+PGlQZQmF9vF0MkBUE7IlOb4go2PsbQIgC5Hhj9H/BB8w9DD7ahrUYN5k6QrHe3LDW1VLbO31440=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZQCRA9TVsSAnZWagAAraYQAItrZLJw//lj3UbBIsz/\ne19ecV6kxWqbQqLw3co+a7/h/zGOah/EslA+2XOnFViZ9snkgpa0mgiH5h2s\n4JFwE7XlHizW9o9iKiKZk3+09vlwi+2+py6E8jP7OfuJ8qCmLNxFJN7dH0mX\n7SJ3417/EvXt99A+6mwnKG2H/eW/yV8MxIt+h/OBxBKEpZ0sNQpUZ4A/5oEh\njAVqPjVU2UWCR3MXdzfv/3dv+pFMdXKg5h9w9CMourSvWzZyhrykRjoqmTMO\n9tm+6TRUp9BHFv8+uZ8E5RgLPcKN0vk9fAfe9qPmb1VxV2XVsfQmEQIrs7Yi\nWsEecp6q9b0EK//ORDaZlBxFYIpAo1ydIWX0E6J5loMYWtPe7S8aWHcwDaXW\nTzPIkS/IAXkJRCNop3E3hi1/LUaSQG/x6U22UAgJqKjsDvwD7U97ju96JrIV\ndTp3/BORLp7P6674jC20mkoWUCtFrfTa1ZpTVUtqnfu3xrzuFQMH6m5Kf7Wo\nk25Wq1vZApRhuHpsmaphl25yU3i4XRaTGfdBTUCeqSqgx5RHI6ZXirsbmiVj\ncsTcwL8FfdCLFoe6wLp0pruSfg9ezdhicUC1zJRkBnXh7X7/03WlftG2Zo9y\ndt2ouJArM7uyomXoWQ4oW/5//vY1iyHHHbmbrqNnKRxOFCpxCaq11E/8a5+8\nzDwr\r\n=KUK7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/touch-target":"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/segmented-button_12.0.0-canary.caa73aeee.0_1621952079723_0.46650819780116204","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db00ad0663cfef77e04581a3775f0214045a405b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":55,"integrity":"sha512-jdr68gCobA7DYQ1Ds4K0430KOeGeSbtgOIngTdWS+7DyTWMV6aVwWq9QYRNhYziI91z0g4vMwjsX2mBI6e41Zw==","signatures":[{"sig":"MEUCIAzK3Mj3X00nvo4PzR8GM0wyYhBEB4HEbCED4cFQtMj0AiEA/C6dGUsAle59odPEz/I9kbBMhSj6CS+4fWh+2QYEWUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+aCRA9TVsSAnZWagAApjoP/RqKjwv8g86XCsaALbYu\nO5ADijeM5mbmI0kLKOarL2QZNrHQJTxwkwtBWP7Eir7M5rCe29VeDsqLVsg6\nY4T5oV53Vc3xH6sQ/YGbFfez6aYVNnYPxW01uldwMq47Wo0CpmQJdCHi+n4/\nJrPGTgJThdVoLgJBp9iu9MPAznXIQ3Z+akBEcizIvfzz/mcVVqsVIws+Gz1l\nw/ppS9P/DBP25iDFkIl4Hwxy+norbzLWWFC+aTapYjDdpfKuqsZATz0S2nwu\nfIj1kLFYGMeVep1HKxFdDqlxmg2v+hVF/C2FEybv0stGOrHtT7nHttwaxkfR\nQRxjC7EkB0aaarLmILmwuw/czO42HU+cvINAno5+rlLUQE5veFKCMPU7ZcjD\nq/poU2N+Mkf0hIBiR61zBIPFSr65XtSyQSh8OLPeAHs1/ZT0Q7Govh6+JH8P\nzLIPORPWtXeEL6i2GLxCUkFlzmTkYcjsOpc2h4y/AQAE3Xy2hd4YibH+Rztf\npnANXdy1WtriEMPsIEFspUyK3e5Qe3GHwDaZF2zxy7r9h62UVYoJdbcKokaP\n791bq9hXgTsVXvn+OGanS7Bkw3u30rVRnmQvA4TL/exVaIWkvJPwZaPHTCxg\nlj5/f8lvqiqrdQR/pSgC/q03XGDNwqm5O2P2T7FxTYREMKIhHvD/7WcbSxEX\nwnRv\r\n=AI9B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ec31ae1ed.0_1621974937964_0.347978154824774","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"80ce07faa540e16d2b7a3b740c3de002f128ebab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8530d3514.0.tgz","fileCount":55,"integrity":"sha512-/IdcZIGz9ZXydLXuemfVBkjul+pRZ8wXzbj+FyJn+K/c6x1kC3Cg0lAcFjkahZaTvECsDeIne9lE3fJ6MAm9WA==","signatures":[{"sig":"MEUCIG0HDwPZWPktgg7wQHbG0Xcklk3d/5Y820eugsGY0tThAiEA+j9wTGcLSNYhv6RIhK4mCNhvT06cYZEw9+rqXtQbb7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MxCRA9TVsSAnZWagAAyzcP/0gThHoBI0Js5Ovnb8PZ\n4ZYtPRm3rke5G6xwlLrfy1pw+xWkQZrbmThbbIHAjFMgYJtO2sUqnCVMDD0G\niFRS21tUwe3RhJFi3O9SBpjb++9r4yhriRxOCUqx4f3o5gutLk8f7KczVar6\nzO/Z6pCqLn5kLE/kgUfUuXICvhDaHE9KhsReDdKnsNX2Xv0KZbWUr5GgDP8Z\nx5y52NXLu6mLrLya40bKz97MYJp1zlIg2YswAhCDWfrzHOiGrWyJlMw5WhJ1\nxyMc5OyLIvwtMwsRQCTDFbs3bZ9rYoFG6KRNsnPqMej0xoGj/o6yFdKMbYPY\nf2JZg0R9etOqoFgTuaYVat9D5/yi9SMyRixMtmv9uOQq5O/yG/yxjzFvd/JP\n3yZi5UsAKpPcUQ01f5fxItPZTYvaIAT/VM1/IzHwwskbdgAQyHjUVBKcUE86\n3ysUxGFxJBGv7wtqwMIAc2qIPrLodv2HzUQgi1lXCDg/YZcoh/r67beQFOVt\nwMPx3s/NAUO1Ff8jEeRUNRQJkjc5LVy85x2xKPzUV9WnUNFoL4YfRVMtJ03Y\nFXuBFbeGf3uvnsHhnuJ4RSj+kog9mxybt6yEzZ6ZCZzStKECeZ+EXnhrzITz\nR5yOQvGJ4ezcBbu23oupG4WThgBgtiOZEPkuRI/sK9bNg73p+ToSAlUC7HSs\n771Y\r\n=4BZc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8530d3514.0_1622131505404_0.21374926632456082","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/segmented-button","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1520a5024dfa6c31463edd929088cc3f984db57d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.00b5899dc.0.tgz","fileCount":55,"integrity":"sha512-iTfF2LTW+SUy6oFBKiXWXthuybb3AKQtFJnl7iuEUHsnEPTYWuiMgR20X63u6EezwVJpmCEmn3enVhCDEn/71A==","signatures":[{"sig":"MEUCIGl10YHz7cEsE3hNBkzOCr43A1Jv5bB1GvyK1y5jpMmHAiEA/uZKQaEvV8xiHx1qkd/HvlCfRSOS3XtRC6RTxwQoudM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtribCRA9TVsSAnZWagAA15oP+QGvChp0uaeMGwkksp89\nSQCZ+nfAyVG4LyN5ijDRWAKon0kZTckigC3pXrAlNNue6NboRrVqn/J2hbeq\nHMShSy+YRTR7wBSfA6zZm8OWZxLWHsbqzvnBwmL9D5JuZ8UBx3g3U0mI9mLJ\nnxbJFez4oHWIZNKr/4GC4H96+3SYsztDimTZjoOM5rYKm874905P4FJoXqq6\nHEO6CM/V0f7RH8Qv5lUZxTJKOsOST0EaMBbmJPkS+X0YAXpAH5TvvRyb2l2n\n1JnltEU9uy+ID/kMIRSnnQTryjBkoFIax0NBqQS17UTrC6IBeibHxiwyo+v6\nHnI+pwKJqi/eQiIHW3Aj4rucKfFh2LFCGvfQK2Dj3nWaDVYUm0yqBTQ0rDXe\nSZ3kVODrBMxa87sY9OOygamkT7uSVMcug2sEoOhiX4nzrm1aH79ybaKFne7r\n4+pw67mtjd9SLC6NJNaCEGEqZ+Q8vAVQfCgPka3bJQ5qhZBhLj4c1lS8GEco\n66MxSI2oWl/EZ62kNzZOEyZeN6N80xy5e/7g4K4m4YEMubSHuQhoCeUuROag\nJFTQRxWvp3s5yHH1WbZ0XBs9l2xfJZ3///LnWx+kIuB3RlZ/iZRtCleId7bb\nTO7HFAOQhJHqMOmNyJ5OEEI6WrTZp+POZC+AnFY4CcMrhLqEEMu6LgMoAmsL\nJB4K\r\n=sRiS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/touch-target":"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/segmented-button_12.0.0-canary.00b5899dc.0_1622587547374_0.18843129704840278","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ab43baea14a89e261b709ff83facef64b6159062","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f1525ea3e.0.tgz","fileCount":55,"integrity":"sha512-6Szd1H2//NHDnv7sLIAcd0KOoFyT4YGr2TVhLV5eIFHerlv9Ok5ocfw7FQ0aDMeL+TT5YYU8FbXP9512PodywQ==","signatures":[{"sig":"MEYCIQCr1oJBRAHHTutRWm4ved9bTdJFKrOHz9zmKlQxSg74aQIhALHUX9xxMHRGiJ3MHecDvs6s2OKRrK060LXKQIM7uMhi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8dCRA9TVsSAnZWagAAidQP/33UZde9YPiRx/OPTF99\nHXq62IiTXz7VOb0Cu7bcYlWTlY4dWTHpnkDlbOpS+3sSNKrBsb/wtm/pNhJe\nkM4PCVdeG3tL8uY5BAI5Wg0a/CIVqP6nKclaN0rj/6nMb/EDBohgIj/hu+yn\nZ492VUV1vYzV/ojYhAhmzeubK3GjQEns/oDWsINiMPRLR3accH04XM3ApSah\nmqzsbZOVkXESpGpUuLUM/7Hy6ofG+tDyM/wHj2vkcnKtzDAplI3cFcJGfo81\nRUDt85okeFu7YiNFEi6wBSUQ4591xQT5V1LeKW1pk9yMkV2IqEb8WY6q5WYc\nBi47U7gFwGr17zKAU5fbh7TgRb2I3PrNGTa6ty1khdMqatNjeOgBMsa2zZvp\nZt8L4RNgvY14Nf8Si2YAUDpNDk8g+HYRfHqAlGQkDaZca0gSXTFi90EVI/mO\nrUNFcPjuWTA2DyYkoKw6xlvvCS4RLr7ghsVY2e6zcJ/P6LtyZUtJIDZcc7bQ\noUuvScYm4fAzS7tFG2n63E0jlKudq6ys6zb7+qc1fgD/RogqDMRwukIt7dub\n5d4vliCFPoknboyHKxybrnjXgh+43R8uIercSgoQ0ywKdFMrrcjcIxRyN9wR\nHAFGCeqjPZrzwIrcPLdFtTrNYAUAHo6jGfoGOZVgdLquhg/A8Zmkun38Jw/I\njSRv\r\n=OrvH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f1525ea3e.0_1622728477036_0.1617245924157431","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/segmented-button","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8f4b6557e33e7620e9767bb690b68ac497c389b2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.464a00286.0.tgz","fileCount":55,"integrity":"sha512-CB3MnsSwVtlLL2mvgSNdrnJsNZ4UTH43BMnMBAuOVjztSQe4VO+S5JZuNrnFTXlAMwUSCK91Wv0xA0Mtu1IfwA==","signatures":[{"sig":"MEQCIBv9xRU59cirt1y8mqa+23z/kUnuA78auz4r4CtNfHAMAiBKOm69oVaA7bmVa1Wwct6NGlFAZa4AOv0x2U1nKWCaSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOs/CRA9TVsSAnZWagAAzQQP/jjrB74rTxzn++o12ih7\nXPgOke1FFczdVsaTZ+v64XvprnHEirYUddxT17HJ9VZKxoyRkzpEWOcbIBfJ\nOqfhakab7duehFmiw4a5FPVXUXNJ6q4amy3CDJDUmfkfvZCDYNsQlNGYtiW3\noyrHmlTHQMn0tZVRsFUEpTAsg6J3ruwpDkJMWiUUIuJzkuOoHRuA5IQLmQYu\n5w7clPEHPbg7x4p2jekb6peZ8AQcE2SmaGvyZqU5M21LjDDDu8FLNAnNBVva\nzasl/9cS8Oj94ixOgKrxw23pfB1VOczg+bOksdk3z3LYGSMZv8Yg1pRCFE0j\nkPgNXAC6GehWmChV3LalUVxx9TEXaUwalqbcKecx16iUY++x3w1zMByJJq86\nFVxFliMLo2WMHGtZvig8YnWG9NTK6V7LsM75qRibZas3WrbBJkNxLkYXlLva\neEUUbo7CmcvZsyO2hybJsiDdfJMbp73/NJ4zO93pW9+dE1XNpBCMdeDIEMtU\nY/JvNmSKE9wverO7q5U1TxAzCOnXb2imIF6QhElDukvmh69unKb9C659jsWh\nW+hmZqUtNp0wQ/IuNvaa7GPKLyTwJR7a2I7SJ8QFzPhHqeKPl8NkEsryX/lE\nIpjv7AdZCc1hoOOt6QIBk8z8/Ak+UR7AwM4EKmzy4pt2ncyamhhqQuijWpJH\nqOZ2\r\n=idpb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/touch-target":"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/segmented-button_12.0.0-canary.464a00286.0_1622731583755_0.016303296085194763","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/segmented-button","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"67eb20ffbd49b54fb748df97f0655781ff68be14","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.474de7878.0.tgz","fileCount":55,"integrity":"sha512-6XNM1Tp9sfZipXm/yFomPi2E0fEdUqvp3jVxbGEfKKhXSq74nqdJbPm0JAmfJmKFNOIS7DzNDRcmjvG9pyagdQ==","signatures":[{"sig":"MEYCIQDzLbzXzXKL46oNR3mrLBODkj6Al0FMi9lxDleEzjaiYAIhAOz6v+WZ5z3fJPJJfVGi7HgHr7xpKdcM0xWo5sTIpXNl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHSCRA9TVsSAnZWagAABOEP/39P1Hg0N6wySq51SrjJ\nb7COdGDBvlC4EV3qwqoc7VGwcvqawiY1VtHNl370fLJh8rSNUZVaEPg6tapr\ndMDIUv59/apqseT6RvCl8y1w56jcCskYqJme1Ndg/HPqBorXVdOdvb73r7W7\ne0QTPJVUz9woTZR+mUrYk4iA9V17erKt19UW29aD7qaW35MD/+FWJo7lj5Hc\ne40jBNntGeoB7X2v754gp39iY7ubH5gyWcMA5nzQV7VGr8AhrBCwWKwJSiCo\nNJ69vC1zlLwfaRRY87LZlLPiCknfWN4VsduV1tIr0JSoxY6nUu0kJpDdilR8\ng+MKtiWYRkJsLcyONcOG0fmvjAvx4Wi5y8omJgw+cILibbkYKQqrAg3N7tq/\nlw6gVyt+8NRJmKkR8NHJCkUqNe+6rHa9LQCQ3KUUFSgbrtsjl1x7EOYSS3Ya\nPLKsm8wYZr4FVmuIBlcoQfWy7xWYueaAF+2U4S6U59SXB1HJQq08AVnwkbAM\nSQEy0Tjc6wMfHhZqjAjx9G7uLnLSPNGGgmKdDkwoKohCj1+QKOdIwwpOewgZ\nFJShi+RL/WWQFYIZgUBBdgpBcBt6XbUju7aQPgw+ZkDY38PQGVW1fR9r3E9s\nrn87Tq3oWwVl4A2c34UcK4wgnH15UcBospQuEVJ3pC9tk6WNl0MLDC3i1Gkg\nT1oo\r\n=Y7n8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/touch-target":"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/segmented-button_12.0.0-canary.474de7878.0_1622733266534_0.8297308148351399","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"606b85d27ac4112dabbd80b7463c8a1e6bbae938","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.b87ebf74d.0.tgz","fileCount":55,"integrity":"sha512-C9hKlVWeQwo2OdQn31kQMTKWtVMvxHr1Cj6DBWY6Y2SMJMtbSZtn71Gx07NyE+EBeeLsiO0dgW2UARGkZadq+g==","signatures":[{"sig":"MEUCIA3p0D/ecvRG4SJb6kmuvsNfIXaRYy9CcCe8oVSIvCsDAiEA5UIL70ZTMjN4i8lcgDRaeqEzxsmn2tlyULLRkCpQp0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRV2CRA9TVsSAnZWagAAdgIP/06XaqGomMPrEfKrC5xn\njkgSwldYm8XVyKj1cAA6FhQ+stAQAQ8mi5yLjHN3iTyS+LV0ZCcVmNXY4ZsQ\nzgdgK8n6RW069Lnc3rHjmvvcJ3E4pNrZ3qUjLk/YBnRWzl6VCgKLbwFzOxQ2\nR9P0RYhc2AaMfNNPyRrLQaeRAdGZmpIxBWKNg8MabHrY4NVDmZbo/eVU46DP\n0a/MQr5E29jFFM82FYf7SMkGfZcfYyJVOSsRfU1A+NROcKYkMkYL9iWy8n1B\nDNDXQNeImIP13bxjmrN1/6LuPB53zeTGgf+KLlsx3FbP3p+k/CEu6fFPRKkq\nLBhQgw0awZHZpF082/Ry4TPQFFR5NCWflg7SP82syjjrtAyYybjPy95YukWE\ncDez0FsU5YHabc6EQakJ1ogq1pChgxm2c/qPvYOJoQEM4kaDOBc7IO9rysiD\nPsJKTbFsAgA4fq3jutWGkF82YZ1QDxhq311hG1Nje0Qeb/uEURW45dL69Q6Q\nXpMm0qVTc8kdlKz3SxeG55TxLxghVruZlpYj9NOANbCs9nH6FY/pVTFqt2B9\nmoenH49bjjX7cAvFQcCt3yu7fPWpePED+FyjphGZ6IE7hHEX4TwRd6Cy7CYI\n6RwDt1pX0VYTEpDbS56OsbL0f8rPieE4JGWI1SnLAWhW9sl6PPQ18mV9uA+6\nnk1E\r\n=mDuf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.b87ebf74d.0_1622742390615_0.48631409514698487","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/segmented-button","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ff6e84fad3d93e011eec18bec6235c0ca9312ad","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.2daa49b35.0.tgz","fileCount":55,"integrity":"sha512-lJyUvjRCJkQnUNqMEKusKZ5HHDSLDfsj03gBQPn8c88tiCRFAef+U/bdSFrIq25bqWLjbHO5gC0b80BfUsAGbQ==","signatures":[{"sig":"MEYCIQCywvSX8erVoYNwi2Jw1mczzw4rHUno7K7C08q9v3x3qwIhANJ35L/ja8PG7YqF7cpp2kTL5BlsMTgjM/1hObYMgv32","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFfCRA9TVsSAnZWagAA/zIP/0hbgqPloNRpwNb68Jsu\nFTPYM3e5sW8UiNwe7CnsV85q5cuHXpP1BwHXiyhECRQGXqiLouRj8qi9s35+\naFfzI0nuT6XQdMAjPJWAmQiJPVp3AzLJKsI2L1R/OBEX/5lGR/PBpy4sgDrJ\ntrzp2S/DCNJxblG6mQrLlbXlOf6NQnUrIK6SBPD4QAaIao8JRKoBqB7HeDjL\nqwYirHIhSWCsLem10nzBmWE2QZr0bgSIhkIIdcPlPybpvu5771OnTvrnCj5c\nfY8Uf5CX+KZSj8ny6VMiMRhq4tVKResOnW/ptgF9qoOSPbAc3VsGz+7XxVNj\njsegLclwRxlobdpRftbRJYr0QMgXZoF+zFseEmsERU67O5kgrylNMnY+Yp4Q\nMNK6xYxR85jb0O7lyXq4qD/sqGsV90gyCH8FAJhYIf7JCp/23G/Z6apsbTiQ\ns9oRqyWm7lAFVGSOvt/2qAS5zWe+mj8dw9a8e/xyLndFQvS7+FpllN3DZAAU\nwtgddkxaQZEF/MZrPOThYL18SvUdULuowj6kcURtMJCTt31E8BLZc6Q7MYaE\nS73bwXkNVJ0Tv4UHBfjRgkr2d9ytcFK0m6rRblCF1rjmdwuKyXqZ+WwsOKmY\nyAR7+PBXGel4LFapE3MKR6N77q4Tf7E4H5dqmFYEkeqw2giW7XK5YFGwZ/Vy\na597\r\n=3Eqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/touch-target":"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/segmented-button_12.0.0-canary.2daa49b35.0_1622823262947_0.49947914356906575","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/segmented-button","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a43f5ba7c550bec51ca94fc301758f89e4fb2101","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.08db3d737.0.tgz","fileCount":55,"integrity":"sha512-BHOpdm82+RN2+St4PuZjHyUgnBEmLPmAnt3uuhbk63WgyV0PZIT3XicLho6TAOcNDraONJVxoTgeqC+DPx5Xxg==","signatures":[{"sig":"MEQCIG2wOyjyRDoOpLN+V1PrQLpOhvaRwA9xljHoWkEb06wJAiACP7XyCdo7nGa5N5Eo5EHEnCD0MuBwY9jxGECqyaCUEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIBCRA9TVsSAnZWagAAUsoP/0oQwZtDnuwiqtQN1i78\n2+XpQ50dNchfSPKvtMsMYWyBgobyC/XMvyvr07d61b/jqEWPyCoKRBVKLsw5\nkriurxhoe4z9EckPLE8tAtKYCVsl0VbfgDuIjuvKOQmDGRRJhkoJTAil1vc3\nOVTLjNkRT0FIj+/TsudNX3sgsgzIYoxLgXusDtyRvEua2nKzyryZqunjBdA4\nX/jVyz+8iqUdrJAy7ZeQ2XnlQGOZDFLG6n7HeOkvwLEo3pUi/7ohy6gma4DT\nTt3NhGhv6gL6umDOBQ2tok1+o0oD7V9fD0rbPjowekh823SZ1ySa3I2D3qW/\n4kuGN6dGA4T7sOUjeHjzn4vFz0KaATvjXDAY6meYi1cjm6f/Vvrs41aiDxDQ\nljdldTixioV8oCqpvJJZrP/9FzocrXXMc3mU+YDrBRoYui/14AH9RJxShy3u\nxcDgUZ+enbCClJWjVP/NKuJwwD0re8je01+XZlQQ+i44rQ8bR+OOzEgW0tYj\ncqjpD1imgbPy/DBJ9xF52roEn2qPQLKK53c6Na35Bc/iSc5CNNC6RCrTYwNA\n0yBqNElaCr3rdtPYTgQqhapmvXcDaLFwZDEyOu3QAl6h81wqqYOZSJ64U4O9\nKygJ7Qu8ehup3kXUwpXJkrI/y4sGVm2srEM/uufTV5AzllfPolaKph9Rnis9\nRGLc\r\n=wvNW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/touch-target":"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/segmented-button_12.0.0-canary.08db3d737.0_1622835713181_0.053821910175533505","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1bb1633cb39dbc5051102efcc3cd13702a8b60b2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5823407a7.0.tgz","fileCount":55,"integrity":"sha512-TrmRhOX+N1kPrSzr5a/HowLbFSparD5pByr5zbGlEXJPsPXoXm9g98tKVHeVVKfzVvLC9m5B2LCIWfjeYAtdGQ==","signatures":[{"sig":"MEYCIQCd+pHpCN4pIaZQGDzOyWy4ch81r0tvzX/tHwKMc8eCZwIhAKUNW2xnSzz3DGLaeEyF0FYpwTlmfQFu0dC4pl5A2TET","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5hCRA9TVsSAnZWagAA1RoP/RqrqioL9/DSFBCz2IQK\nbyRF8k1BWXoE86gOhi5//ICc9D7Jd4ka/DdkpjDiELD5bXgwRVnGif6JjIVZ\nQ9ECSw18RXcPNA36jYFjO/YS5jYc8uDhoNl4pSOPKyN5VIV+1RNZILL2CmIm\n4X8Tgxtawxp2FKhl1ZWslDwKYkmw0g+NfBTkDbwyjBB801vinGwRSb5uyuzK\nw3sAaAF9Px5tVNAIcX7VQCiN9G37hz4qkJ+TQ5lb62T37DWOYyvz56rW3/Hg\nBuBtSJMBcbLObMaFRV6ztPjh79m0Fz2jvgxiLze8/5A7iKCuRftXBysrJ0sk\nVfpjo7ibXM/nNKpsFiL9Fgf189oReQOJ2RKoXS8k4M3inbcaQFJ2L4xT2LxL\nGr2iuNyo116kdb74yxZeZW//H5Bbb99KPJfSc0MyHVaRAqmlVcLjN7LGmKYd\nYt+dlhXGheT/W0XvMdTt5XI5r8GT4fxCayMD61TgHpnz56ymNlQmW+KQzNwL\nprTC9vt7k4xPqTn+F4IdQtYMGieespcJWY0aEKFK9B4WQWV3BBRyTru4aqbV\nW3LimW5e57x8daFsfxRCJas8aMhA8+LUaGI9rIknOVyerEikNmvP9ZmsTW2N\n3FzqGfoSE+DgEN93w/d8ltsYFpaOsTu9fZLt/4OkfE4RV0nuhGe4a3/+ssD3\n9r+U\r\n=NWxx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5823407a7.0_1623113313767_0.1647501428616185","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/segmented-button","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"931d31bd3cc56109e239e4c6dc8404db621ed560","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.23b0c5e22.0.tgz","fileCount":55,"integrity":"sha512-U1Fkw+oRGEUfrGEt6LUOuPSUtH0D1imY2DHPgPxjM4m6UuYQNNn8bS8M460d9SEiKuuBWV55dwKQBhCiG30Rtw==","signatures":[{"sig":"MEQCIHsZxlvjC0fCXyNsQFW3xXzAkQPTqBt0OwaCfLkfNQgEAiAX0qNQGUFsupdsiZAW0w2VaOmf6/b60xw7a+RdJOszrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5k+CRA9TVsSAnZWagAAXeMP/A9Yd6Rm3p/zTWv+lnrW\n/4aubOH7S7IDJE+pye2ykNKSAylSLCOSkwecl59gBGrn7zBADJGG+R7eELa8\nMJaOZ8BUc9b+Apa7asvnj21466Zt0AKu4hqw7sKF2n5aPDW8qTAM0aTt70io\nThCNeHew01UbCfpB7oUsiYPMGuePWnFuHi8Ezmf9k852aFQkHvWbx+uY/qyk\nvMKpWcGQo4ql9RRu/Lv3yYo8PmnbFt1JFfmRSW3luUBi42LNSQfCneioZlTR\nWydNkM/BKLI8tcGnJu2uVnFQSLm6w8yjDavLgbBhU1sLozp09dmY2QPd+Los\nWENOJywuWBnHjM1BI86xQlQJI5BnLn4sXTvzdVfZamv9Hk4i63sGOAe5BU8y\nmmoWCao5g9RZUlg8khYjbpZ6az+WK4ZgpG2RJ88814cPr/imQd7tQlQG3++2\nB8KeMDtI4eeRwMprdeY9hIhJQ/XXRH9HlU0akqluOTGie8uAN9gh3EsULnZH\nPYb1ODGt65XXeKnbkYvcWqHCbnYC0RPM/U+hQ5fKFtErNbYzOpYyUqE1pzXb\nzsICKbeUvvV45vTwvYpK+L+eKEgzIWkv5Yn6Ccf9vA/v8UBwZQLganTi2YQR\n2Z9K1QwUW4cBAMb1JwuYHEXHmj1J7foiJqIRX09aRR9eMKzXgEbEPnO/DSL5\nxpfv\r\n=EjLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/touch-target":"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/segmented-button_12.0.0-canary.23b0c5e22.0_1623169342729_0.7816969976640866","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/segmented-button","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"df6e11f028d4a7bde71faa7f0e10c604022de1a9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.2952c6a76.0.tgz","fileCount":55,"integrity":"sha512-520ZTuEm/Wiq3VuROEo7VqUjPWwVdgSv8XHZe36/HIxCuGUdvjlyunbEBeSdeAY4fX+xqM5/fEI9DpyHyssrpg==","signatures":[{"sig":"MEUCIEdFzKPVoGcSzWlweD9ogLEoaUfVSD4+7kDQbaHXXEENAiEA6fBPEz1pr+QEQTu3gknQ2Phr19XL+b8g9JbVup8EkKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uuCRA9TVsSAnZWagAA710QAJCG6RwAc18XqFd/CNQe\nxz497HFNCF34RbnsZGyOkelv3XBrYfv7STNdgTuRxmWqOolhNRdnOWaF4+7Z\nsxwjFVv77g8eIusaLUDBKHQRppEkfaDy1EGlXLvY1ZZwukmWacryWpbjQ7v3\nHGY99nD5pzMTHvfrBvehmBEETJXLOXD3l7V3iz/RNmamxWGblQRcpq+0nLfc\nXvkulNBvDric6c/o2IT/DNbYW+XGi/TN2ZIUUX8P104jeK0rQ44d5iMyKERy\n3vAjRpEfJEQv5xVSlRU4LooEp5FMoqXqLFi5pa84GhyD3rcYwlcOvkO26V+b\n/kt4Gc0YUmhROTq7qQknjKeiwyTlipr8vfuoXc5aq/VbIfpKUJNf/wURU6B2\ngmcnzpKMrDJWZqiHGAQEmahneI/w8i62mCdj2qiPxMTBwyGy+j3QqXyDOlRJ\nlLKl6N06kE+HeDrT87wu7vAY9UhSAMiVTucMLi4SDHAM+/aP95YKWzZ5DtSu\n44vGSO0gZhoiqObxUtaAxdZoE+p7qPv8jJ9U9+P0k1ntuWcFSTqRxboLaeab\nC/nr01SabHgaflhrDTqwUU1mxDKLBaubKuukDACijpWAmwLdGkqinMhhtpGz\nygk12wjLtNAU58Jq1Izb64QJmMjFFKVl1rtxoXC+oETRjyoGd6DI3aJmaqmU\nmpjs\r\n=7YeM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/touch-target":"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/segmented-button_12.0.0-canary.2952c6a76.0_1623174062680_0.5403524013091383","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"775d945d9c79edf9ec8852b6b892415c6cf4d33e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f12425f88.0.tgz","fileCount":55,"integrity":"sha512-MurJChm/87eVU/KAPnKAR/CEUTbteyQHLLpehJ6h/FNQwdLJRE7Xau1ChzAW8rq8bQXzzeVnx79cMh1xVSWXFw==","signatures":[{"sig":"MEQCICKw409kUu9PCcjfWGtevVr/iwKbDGZPHZKu9dawchUzAiA5VarbZ9xnOc3svbm+Vs2XPKNWG6i5j3zFtIY0YlhG9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWLCRA9TVsSAnZWagAAMVMP/R0bQB8JG34iSEPvgM3M\nHXpI71YSzWEKsS7/qcq+AnoYjzk339m0Ij/QYiOeLIds6qVPXLiTZlndgLTp\neCUY0JLHUW/wILTMPh2Zc+vAKkm+U4VJbFyMilLXusnNY6W2p6zBE10A/A9B\n/BLr/JGLj7TCQ2+pxJYvYcIAoR85o1oVPdomqZ6SQJZ/oIiY0XLhdXAgvDty\nJNc59POUFVGGzXQHZuc2IEhzb4pmrnRu/2sJfCYeHOkW+yEMAos/QYya3Wuj\n6pOCsnE2wKmyZBt5UOScuWvPD7wcU0jvdZ6nXr6lIX13fKW7ROOs/Huk0kP3\nwdage5dVQOCPhTdetu/Fabdzcf5Ok6rWxgEzTPm5f9B6gGX3QfWUnX8iT0DF\n5rmRU68EM6nkmxafrFtEQW6iP6oZV/QYPLHI4M3/+Y20Wuo0epno1cRkNaXG\nSomUblUbJ7ruCtXXTXq9haRez23UPBmS0/epZVlhQnUTy6mWwYO8ZpW27QMG\nhWDzde2stQIlno8OSV08Z4oHqknuYX2CYwIKYCnOxroEP9Vy+kQH4Jkd3XAA\nLLFLQMXg0xWilJ77WuNANKdtIHrprZTpZw2FXHeMpMiQN9cMAsrvfyTfIHTK\nSqe9MZ9quycVWTqvYvcGgyakho/az9uCzP206lR3kCdYOQAp/HhecQ8zqv4D\namG8\r\n=0HyL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f12425f88.0_1623287179205_0.002525075618093897","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e99ea6d1ad55b5d3b01364d13e6b12054c6784be","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e543628c3.0.tgz","fileCount":55,"integrity":"sha512-xbylYjoup7sGY+T0V7IGlxVR+++/pwcRyLFyau5JAqHPGyDX74ScDqAVZpsuAvBYHV1a7UxOiMK5TIDd3DgA/w==","signatures":[{"sig":"MEUCIDdakmY4l36OjgmB5zExT+n+X4Ct0nfSyA3FoKCL7JevAiEAwizQMNUNwF70dsfUkuwJbdkRT2lytU5IUGMLDGaEmyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXJCRA9TVsSAnZWagAAaZcP+wQ/KmISWdml9PdFJoya\noaQb8FEk3EURlfIH3xbNI2Qs7Zv+oeMN6YzVSdgC6I0RSRC50CPc1vGQq6Dp\ny9q36vRqymyt+wY5E49wI1Xa0rhdDHeCRIcFhe9u6XR2h9Z2AYVpSCh0lYUG\nDGbWXTeMGMDKPCE+PWIbMyjUy7nDY6+KUj0R1+N7qlFEGoCYTrdnF2tabOBI\ntzYhq1Ui6Dj/WYuWHYAXxusDq5hfOHdox66a7yginGfgUlyI2C+DqUo/rh8k\nGrpJtvDUZragP3Nt0IiC18Ok0LryJ2dpFNw9giOJy+kwSJJwSCx6PMwZTYnX\nD/4bEQZoEEM+b6Dz9QAURvEFeGZWA+qIjonjv/pFdENG4h/eMDSi60DN0ukv\ng7PfwcHGXsu0Wje5gJTLV2m9rlxH/kMW/XTkrCUsUsjW+lrWygiwoiQvIRum\nGUY4PSuOby5+i0yAqIvnQu+kvD7XamaHSSyzFq8wovKTr3H5T3qF8VS1wx6D\n/3rYZ9Ue0lONF3/a6TShCtUYkwXi2GilIT6nWlCVbCchIKeGUzj68b3x/V6a\nDUUUcLw9NT8TR+wMm7lD/Q542c6Vhc8SZ63AwH6UI1D6Nt6VGPEAWNcIpwi1\nPl+IlsoK1y7+q7kK4CqmLS7CT82XShNj+kLml2l5yWH6rfHl6mjHbdLGhswb\nBgrI\r\n=uk0Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e543628c3.0_1623287241423_0.3411972338962994","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ad6008cc22f37e82ee644e83dabcce30c93fc2a1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e0c346286.0.tgz","fileCount":55,"integrity":"sha512-AtojWfghmidgOl1XbxiVcPFGvV0yWMhgvaw+wlbcqO1qIGMrCtax2D/XxdRgK3x0a5s57pTHjofgBmeeWPFL5A==","signatures":[{"sig":"MEYCIQDBA4KjXymVGbX71m0x/b5qanI2Y4aZHIWMTT+db/6u9wIhAOMopaxBKN63plinTNDspYuyS9cYdLhOrU8FKu41on2X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9yCRA9TVsSAnZWagAAg7MQAJNT8Bp0VWM/Twu90UME\nBDFNcBBnmkKldWZExMihDu2IR9LTsKi0+IBKwGAJoZHatbthRGjkC5KmjUXP\njx4bLKVViroWCkykQ1zVDMFqGENhe7an1LY2ZIQnkZkJpP5XP6pzGxYt0MlE\nPehLQ5F3jen90jb/D33cBei/M9fv2bUcIahTKoxKVPXzFojuQFvcptr1Gr1D\nRtjYbjCprqJDi3+2+58q/IH0U9TutOaptgkpiDPmEjBuupVeXZVA5T3hHTMq\npPZaYpE6PVTqNWQA/9WGa0+EHsSJQ84Ms7rqEE3/FfInoQaT9MccHS7KlucG\n01KO2FqiaehTXKDeiUlg03osH4Tc9YZZw057FtBNmUTulffvXZF6ubbDF7QG\nrVB2A36vTS9rFZF6GZMuIQor8Nw0kX3X3m8/nbpjeXEbWsLrBlCWjLIR+Nsn\nydbIFErxcn73twCPNpW6XSeBI/LcRwi3EkYrDeD1NzRk7Cp2Gwoj6/TMZvad\nZ3RMDdiEcWH6pPg9Ef7kcEh4/wp5qDQ2qPIzu9l0mOU/y/d9Ex9HKi07O8B+\nfYH7TgISfeZamxvdAaewZGY9cKq5tfiCHnLF5czn9U4k7LeoKc+dxjwTUzlJ\nvCOkG6FHuvU+UBLyMqrmyd8V5v2Vz8QYPOuqT344CiBSYHSQk3e/OsF64ESC\n8qri\r\n=IF1E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e0c346286.0_1623342962048_0.5649786416254188","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aba60b11505c1468d221a4a99fc667a790e4c08b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f43af5633.0.tgz","fileCount":55,"integrity":"sha512-nusyyvCdneJ5drWGG/W5VrkIlelzpyj8gxjuU8Vncpnji0pgJ+YiOnMT5OzBqWuZ7xUlhOJpZQKhGj9xZIrTwA==","signatures":[{"sig":"MEYCIQDC9UHjwaH0WBiaq3f4o+a9TYlUXzpPcfd6UTkiTBvvYAIhAKNN3VkVjAYSBlgmZ/iACvdI96S/AodHE2mjaMuE9MJD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneuCRA9TVsSAnZWagAAT2sP/ihpbsNAMuOV/XKxKBqf\nRMSgxNf3rLiwj9CA07uErNiZzkvEvBuJTMUy86PDvK86LhRXPlG8NsHOMwaI\nEXl/PYHA9TZODBiX4Nylg4Wo4x1ccdpGMqikzLMF014Mj+/bSYUeXj1GAC44\nc1C9Y7t1ixZyNRPPVomiEXZupkhml6iLTYy0iFkGVA7s26xo5BO5No698MmP\ngrt2G2F7UWcBmSZQcvFQ/qQYGwi+PA2sYxRsNJpxs0147hZXe+s1jqWG5Scw\nlqa8Ic30o0aH8cjto84NmNqnFOgS8BE4yh5z3pASU0V71LBiUXyVeQ4TW/27\nmqDd3JKuaVOnZHQZ08GgOX4p2efNkzDw+p6NHynCsnRvDOT3OcXeHgzEY03F\n7JUy0MLNrrrsJmR08Z0wQUbulYQCrc9lhVeHXYTRBAKCUw5UyNlzAgLqiEYs\nHCM9BW2toObiScnrGmsFLA7VrpFddfRyqz2V1FqTZBZ8A/Rdcf7njzH1n6is\nRSRwQuP6qhw9Xj9OKQjaRCgljH16emOM6XEm3iyigZKUBQUpgA/2dRMLriRY\nGbucF4gdebIjDaw8Cu/IDcB1LclQXfV13zGfYnXWLks/mq+D1B/mVoeRGvIi\nnGAIbuhWKea4FCtflDRfx3jZHL6B/sbseO0OkY3TFg2zFfewW0qO1ljsMgaM\n8ZYu\r\n=je5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f43af5633.0_1623357358772_0.794804043363516","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"42f0f286a5319d2df3f46ae1ec63a2ee6570f6c3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8415ae585.0.tgz","fileCount":55,"integrity":"sha512-tmK0WzK4rdCLiD24s9lFImgpu0F/eRbzvJwSO8UWKpc4r1ZsehfyjYieDNdsKvMjkcD3iDOPH33o/SeFxW9rMw==","signatures":[{"sig":"MEUCIQCcsdYEbwV0/j4Zyhh+h+zSk//nUNb/FnjSbDGpGhKcOwIgYtpZ4uy/PyHZ8LYQ8h6Fso3/PpKGd+bLIe9Cr8ZzvDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nqCRA9TVsSAnZWagAAC7cQAJ29Vs853NfYBaPeAt08\nZ882whD8a3D/6TWzwgxdiEtmXhIYvQQqgMVZSvyLwLo8/qNQGTOG4rTnE0HL\nD/fNVrGufuCqmojDH7goyPZ+2fiu/SzXym9O6ijMFcnYr+1nJ8b7CeRSpeal\nC49U/btpjG6v4p6GjRbP7qGu3L3q0cKBHuMfd33z2RzqyicTT59Gbj2HhBLZ\n3kTfLpYvtCTHhUtq03LOFTW+TXUFyfFRtyZyJSMJ1AVi9rijl+y2vihE2nIU\nIKNNXxelmfiuwC02PUk8eXTkJ6rcIySeLW3MWAYlN8j3w4WvRHb9GKSb/swi\nr3QMVl9rthO/e7Tz6sLp4gcWx+D5GaDOtqsBlrNaQuPrGlgXtWlvx0giO9gC\nTXIr4Ng9EsIORy6zaKYjBkzUq6q9KcDjTl8eF9cAt7+DWKSzAvwdy0bsE8oA\nBU92Uo+chCd+SknWYzQ9GycIupwaXIxYShR8sbs0wbBxdo3RlWCAIWFH6GHt\n/8im2vqODQlSzkZS+NJs3kf9QPwK7W66MGGLrrw3J1/x9zJjM6uB2nEeZuAz\nn/cJH5xrThI65CTSQT+uJV9aRRyr8dGHNrb+UeC1NUEJfB/J9HZaSBijrT/T\nNML9nbGB/ySnjMpDHfiXSm9Rs2Mw11D30tqmUvhhi/2TuGFWRhmKkLmfaJh+\n7gUl\r\n=5MXE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8415ae585.0_1623427562509_0.5197022173375505","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/segmented-button","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8ec6679acdd0d617e1cf2e9c13297dd295ea8a54","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.598fcccc8.0.tgz","fileCount":55,"integrity":"sha512-rP7xvKdr6a7QwvmZXJEy0Pojp9vqoGDUEc+N5JwPISI9+UVd/6C+9R1P7uxDmEFWYW8ULLPs/Q1xbo/diC45wg==","signatures":[{"sig":"MEUCIFsoJmYHGAaiJZKX1TkkUODp/dsDtftjC9TVQiPEbg8WAiEAqk5Fhe2wrVjH/5elxvxSSQSdW9ebZl00SbCTywtFSIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9m8CRA9TVsSAnZWagAAoOcP/iXfh790kDcJIXdyphkn\nLpzmdgo4DKDzDEuYuDIvrSIwoyJ0F42MdrgVNumXHYwQSJ5dIcw6CqPWg697\niRaVnUu6p1juIXPI5+hnV8g3x4HJsb4LrQGLPuFd9Asy1qagl0yBcS1wJI1S\nK22c8UrHR1NmHmVB5M/sj9LNNmg5lCmM0O3vKjOCsuXYY1l7Qf9/j95iq+sL\n36tvfzU+KRD3myAwy1ECPueE6iJFVBdxE72etGR4QLDPEacqeN6Uw6cHh9YM\nnPIci7nqeDInEHzqxHIuMAyTXJnw2UCh6HwAKIpxJNbOBISvchRIIPuEjqTt\n9jo066rA5mL/g4PKWR6e+BAyN+VQkR4ZOHKAQTqnWcy24E3vwG2Ap21bDG+w\nwfqTcCmdCJFK6AkOctJ9rHdEiiYikPNsl6OLrXz197Yk+C4q7IBz+duXazV6\n1f1ndqoHa5pZ1fR1ccZfZiKRqivjL+ujttXT8KSkgPo1XcbDDWybw5KPyboc\ninEwIRNqYqmnhvPWIyrd1oVI+ibxXCxFxrtLQo1J0vvJwkR/YY1PtTzQ2+Sc\nxdu7LnowEpFLLr50YglZqe7xzrMaR90ReEUdDB7APDw3//scfQafHFAUuW90\npOcyFivUQ3H15MXbfklFiNs/cyojSyRHqalOX954SPoBBLjaGzqCkqrwjLMU\nHBmg\r\n=0gGZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/touch-target":"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/segmented-button_12.0.0-canary.598fcccc8.0_1623447996183_0.514175982265112","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"96a82ee0fdcc1c4fa78b74ee993fc1f74204f736","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5d0605188.0.tgz","fileCount":55,"integrity":"sha512-61ziL6tC8+kpNy3nOaJzJcsW5q5rHJ1SxFDhtlpifwCZkQ2GDOHLG7ckfjOWU/hYD3d3Jyy+ReWAuowW7ZmsRg==","signatures":[{"sig":"MEUCICjI/ZFOx0ImljhJECoUu1wuWpU4pWB8regkeixFIsd+AiEAhi6irOjRP2df8flNlE649nXAP38AwXFvA7ShSCRT2V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RKCRA9TVsSAnZWagAAsGMP/i5YoDsZ88fCAE/hfqGX\nLHfT7PhI8lw6wFlo+57o/kP/i3rzP2Vo+0TNPq89L9EoFf/pZh/WBVMv/n0w\ng0PUXmMTUxzdYDhIVhfHMq0CA67Qo/jiva84q68ZF0Z6dOAL81l+5Oae2Qw1\nVDkQwAeFxIH0zKJEA3f4rxqHmG3tPGPcuvjV+rZvKHo+wEsziwty5WiXMhvB\nFJ3AALvSHAU8w/uZPrIbWmc5u0bqpCHnfp7BXBWwsqPP7pQBxRg1gZ0OrOdG\nuIoJAqgYC5tyeDU0kvJSXPTORnU0FrjS9IPpHIhdIwxeXAI5M6lJj9bL/ApV\nf3jhwv4o+vUAex6WYElZHM9pt9G3KJRUuY7jT8otG9MOP50jRIU9LDQUleI3\npdEKRlYMwd+6RR5eOEVQIrGcgXD/vlFiaFcqnDMtLeiFfPFyBASOyZm2qqYr\nRGqzBYcXT2gi+M5oFZ6RpKy+6PoEuHn9bw4MTJ2pgGTXZBKZxNNuKruMcQJx\nL59TBSe80N+2PuSqiuKPOlqmy9yWGg7ggYGxs1SUxMLQgU+oZMhgA7m+93wq\n+AHRJ7aoZ1D/Vzc22HfMBkVQKMf+ddwxd1WvCj927gzXfVeKKD7DQUdMrf0w\npxvNaFnjm2H+BGTLN4UeH0mFvu43LXSmCIdGHXi31M//RATHqI+d4nvZf55e\nP8Ms\r\n=CdKo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5d0605188.0_1623692362298_0.6687257398655149","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e10bf086329d541e533683d7ae739399aef1eaff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f147a2271.0.tgz","fileCount":55,"integrity":"sha512-tTiaHRE3aWusiMA0y1FuTU1+tKwhBwcs8BjN8Svp3YVPFvr7IvkakZ0XNCW2KUe9Dwb5d5n9srlwAuYgMfo1sw==","signatures":[{"sig":"MEUCIQDOTxO4liIUe/JeXwRBzjdfSMAVEcleqglX8BRRNMEaUwIgd0gT90W1HO0BDzqq46NKzQguZjfk0h1hdizR4YbFQNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6t5CRA9TVsSAnZWagAAvrEP/1cCYlMti+Ri2YBQRDIQ\nmzDQLHpcdcCvi1KSmEEyxvFsVG6v/7UIE00PvvthLa8k0Koz9mCi1JOAHgIU\n8sFb0xpjTeVW/HR8ttSfZgd6AZ0HAMMuDpJEByP6YspJW/SAvv4VJNnS0y3R\nstpaPEdnc9l20HRztJAEhs4XmTkFH1QvEUUdO6BbZ/PYWXcL7itOy0KGI9Io\nmcU9lvV8RGK5Duv18Cyd8y7FJum37cFiapP+3LWGpWwRmvjYHfd0MhVFD29K\nx/4/qr6w0BBMaqbJzHL0PJEyw3d6xVW72UIyrtIkkjkVa+ock+L0aRWCtl0/\nvZknYlVb9ySmN8nAfVj0N3uX8TtkFgSlwKggq8exfLaY+TRFtYFO35OoFpAG\n1f1tdry/B8NuMDc1hGknNR59hHqvH5+6B51FcHAtbnU60wSdh6qpz6+Ot771\nFetm0bxX1m7wV5DJoqu34mfxzIhTRy6Y8/id2pK9BTN2z3dLCLVG3XsPZG1S\ny+puA2g6WgL54J3UKdOeycGMPQ+mBd98LAyDX2SEB3tmqjnFlX3DOpD4UY9I\nm3Qw5L0GQ1JQ3xMRzFW+kyg0bJ/G5MwWOVHjY1azUbrZgTUMNtVWYieJUKu3\nagN3J9EZkSiqyBcKCKWXjQDFm33xgotywbh6QHJDHKnr/r0PCzqqRHzOvT+V\ngg0T\r\n=8HTD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f147a2271.0_1623698297275_0.5679750035213487","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"10a0fcd2c153dd60547b86dd1687d1b762abfb20","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.33579e00b.0.tgz","fileCount":55,"integrity":"sha512-7RWVutSVlf/kHZ1moQN+b4KTM63ESefAqCbdyTcSuXhDKHxqgYv19JLgFkIIf2uvKEKVGw6apHyf8vPVaOHYMA==","signatures":[{"sig":"MEYCIQDI2bEYZDtuRBjE1DDDoZaSjXsOn72tctRWE/1i/NnTZgIhAK78sqcId9vrsbQh7ApOpjXrveA6WGIUTkvdzTAFek3A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KyCRA9TVsSAnZWagAAubgQAIrCa/vHXbIz6lAjJnUu\nhLs3iFqkJ0jWIGRfUS5oZ0uN2Wxx7TcBzdiH1cQYKw46snYFLOQTYGDQLXQ9\nH5l26bHEx69NLnwADSEhYBE6SKFu4tXBCDv4y6/tUF+CrczE045nMHC+dJFR\nLMSjuT9owsuIgCuSmreZNp8tdCRwe4xfEfihGrpmQ+IC6jU1nQWOxxdj+5aE\nxtB4iCFUjVXzKIYerx7PqVJQ2YEEhV+X03FkZkHZwbZW++EIZLWywdZUuPML\n2bNeDXyZyhkNn+JUP8jqJGYMPZGygI3LMBxQfYG4ZzGksSAzuYd4KQK1NGsX\n8/VBBYVbmVfZKcdB6p47ewh3PZjjo2mT5Ud0ZISeC3wIkEaYlX621yYM2M8w\nCf6DH47gyLvBBpflNbJ0fjBEcnobSZpbOHyDhWUxP/wcGJROxC3ckbuqttJC\nvaMtv9E2Cva9njqwZsKQdOo5dquswrC0E/G/iNsM4NIcwat6E8VQjug/mKXk\newiDtOsqnIw3CmIjOi1MCth9MfZDaSxasl2y0lg8s1+6xuUz4fidGPzD1Nuf\nLXxKjZgGwYEkNg6ekRf6z+v5q1fFy3sTMfiB4eH+msdifBfdDYmSauA/toLL\nWSPhTRNsQFn5pLlrMl3V+FOrfOiB18ajtCCayOCglfXzU9OuXaFkjtkrBX6m\nH6lY\r\n=NVfo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.33579e00b.0_1623716530673_0.9385374389115126","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b7374c03cbded5771078d28ddd1bc49f4a31ba70","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a6909c0e6.0.tgz","fileCount":55,"integrity":"sha512-losZpKiQW67G5VpjavyD6A8zElkEc8YNWzGSWl8TYtVNzNNpfpGzP8kG+0AIKaDezMcCIJwW9iaxOayQBf1HsA==","signatures":[{"sig":"MEYCIQDlhjOLNXpte3wUCzNIXsyDnoQ8M6mYjTM0pmwFLS7m+wIhAIZb7Dcf4POGAC657XnpUmVr397ZHBPUeCBYSgNxv4Xe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPG8CRA9TVsSAnZWagAA0JIP/R3hEp8uuLKDt8U4CZtn\nNP0tx/fz6E3A9y8gUDwykVbBE+lWZNGelE44PXJinpSdBhk5SAVSoUwPezDN\ncgiiBffT+8UaWgRWDMaQk7G9otLJJYUiqQh9pfxnYCPkDggiMK8lDWAQMwcQ\n5LyNqCd/NPsb8vPUYoq/7GbRoy8FqPGBXKYmztGJYhYU+dUJKP5U7+pw2Gwf\noSrTbd7vVyZrRoJrk1Ct2PS0LvqUXjyFgLa5unzBqddXouX13EpF5j16XCr6\nU+MsaJVoufQ8HQIKrGtL6w1S9JuyRiohmKSmA2I+wwZ3nxoV5iQ8SQVUEVEq\nnJDLrz0bgKtpZwUPZsm9gpSQRSy2NfjbvLnjeUIAtXy744DwM4Em8q4NAdXw\nJ29/OcPnMm84jzyJfXkdXRb39m0leAp6pD5TMykMUmMVV0ZrimY8s4L0ITsk\no+V2Atgq9k+9yfAhOaUO6KnUhBNLT/m/7HffdgEJyawteDipcJGCi+xmS+mJ\nJnJqF0oETUxCeDsIeEHRwk1iag1+vlFpZB3MW8has7TDaY1/Nmmq2TIHxIzZ\n9ZLrkNRGPFK3Qp/a/0yyF8kymNfwjfz1ocNP66TMktu2Gl7jFfcUexKmged/\nOgbfjj7g77RFFFxk/IKbrvLYP50274uq2D+OS1d0Ot0jaICMKWj1p9PiHc9w\ncrRe\r\n=U/zM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a6909c0e6.0_1623781820270_0.06865756396573075","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cd5f0237691c3b883d5fe46d78be95393ea5d3c5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c18b5925b.0.tgz","fileCount":55,"integrity":"sha512-epfQluHHSRwNUG1wywuZTxSw2ZzOVwNcp/Iq7wWYlT3prQRSrNWy2fAux3H8ijLTZT9KSP/HCBpBQbkY21Ba2g==","signatures":[{"sig":"MEUCIQD2MTVJ/D6l1GXFfNcfu6DzD3QLny65U/xeHHl24v01fgIgafOaVEId9XBGoYJtNY+7jAJnvfeOamoWyYxO8TK0vuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRW1CRA9TVsSAnZWagAAd1sP/3t29uM86i2KRMvcxcnJ\n1UkFv1K+DTJtDOpOKOK4cIU34oSqM5WYnwwtWRXjYYZf4Zx17aXhNsBPpOY7\nKXc1+qIqGk4reQJjDewIOGLlS6fxB2UyUYtDV8MWhyPnqyib5m9BGXTjyANK\nl+4oBFDg45L7/ZHw8szk1Ru0vQli5gyNDEuK+KjuiRLK7b+kQxgbcqEE/kns\nwsOB6xnV2OF95tWX+F3bZKpjCebVsyJL9x70r7tKGcbur4kAbItYPOZg4Pp1\nvZWOnZOXeiHR5V1qoGctVcPr9zdS4zyF6aYLMma7PHQsJiydebOz7v26RYz+\nZBRimEA5mnvO9OLH4iE7viUC2DItUruhk5E0S65o7a7XvhrBwVBBvZSRxV2R\n27yHa+CbUeUXkwve2QCg6Cjv9TO+/tvlmByx723LPXmkvUfRGww7UWy0igOZ\ntAlpHbPVO4vcj+IVCVoMwBA3aoGhXZ0u/dYVAei2ixInlx4LeJ3zGcxCNZzF\neyE3iCHtd/DmbiYVtXmnHE1ismwjHwggkOdSfZOLn3ZFV/+SXJtGviMKWDbe\nGMEgpmwjyKFMvbwSc7lyriDO3KvzHyKKie3e9BKwfx4uhxwmeDtD1NSJbzt9\nqOzqsmc7BXIFcgtXjv4+Y/Dn+XS7Hi9Rsz+vVbzPGcaaknIWpL+AQXwdUDth\n+0iV\r\n=CRZE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c18b5925b.0_1623791028905_0.7706558310709624","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/segmented-button","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"022629a2939d44295f9815dc13681fec78fc8673","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.271fff902.0.tgz","fileCount":55,"integrity":"sha512-OVTu3SVn5totaNy/NGQdIcD6qzStnr+Qv4TXXp4QJzP46P0GXQz4s+KoHm9Fy5zCA9OtehOZP7v8mzO1CO1SQA==","signatures":[{"sig":"MEUCIAxGP5fVGmmBxHBouem/NhEUNe4FmCMF4QzjnvlHQuYbAiEAqHsApmQTyXJ9n8BFwptJ8CkxECFR5wMXoYSJsmDQ49M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7jCRA9TVsSAnZWagAAQgYP/06Q18uFUtxbK13sx+4H\nL6BrmHufxl9S+Pja0PJkjU834KD5OvEAr1ng6dCrRGZdOWxSa3kzx/jwYr5M\nqYt1J8bdGdIoAETv5OibzluaHp4sfLu2VQNg7R7SjOOwxH9iProx1Qg1Hqxa\nn+WqEmKIwmr+U/TxeBoLorx9Kr5ABYkHlPfLlbY0CVfmhcq4vAsYSir+12qC\nsc/kUB47SdPFh6eLl9JC4zgqTCp0dI25NwkLbQfsDZjJieJFI0VJryPjwBKf\nTcxE7QszdXww8R6WyVJQl/rrWgyG1fstW8FwILpPKXwxkBeLiQMuGrOqHN+Q\nejrAyYUfk98nXcnZMSPxTygnGdUDUsHJ33rupIENXWB8RmVzBc0mNtSDi61s\nvG0HbHHx7im6xtL/RzSP9bbtnsXbn70oAtPcKfQgoKRMBEKNqDaeVrZkYb8i\nCQmsERVE52xac0UyjSA+H5p7FDz27hd/pnQxYAigWBa97Qxih9sMwVNRrs0w\nZaWecIkz9qCPfXbEq6QLZtrpev/Uc2UcpRhtrDoFbqcINDV8RFoa6cvjE5uJ\ncVVXblpdflPBb4iGGn/fDk8eU2Je8YUoDezXaxWfMzCXPpPtxRmEXkRwfSDF\njZCIEwEmCPBHkEcR6rO0NlRtj0PADmqrfA6USGcm2+rUcVhEP2uBOT/jRTNy\nz1xr\r\n=He3Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/touch-target":"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/segmented-button_12.0.0-canary.271fff902.0_1623797475347_0.28276273502174853","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5ac140af388da057fa192756eeac7c11245be2b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.7ea2e830d.0.tgz","fileCount":55,"integrity":"sha512-/UDVoQ9hUX39aL454MXO1ib50v7X3vDwUyH6GhMG0qhjsL4eYo7mINP0n21NHNIG10yur3aZZ2nAzRAex02hoQ==","signatures":[{"sig":"MEYCIQChZiLRBjQYHaZ0RJhYT8Y6oAdijhTsjDo7xWCKu66JQgIhANOwBQhFmqCnTDjx6YR1a2MKcwOaoed0KW/lcWv47kto","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9DCRA9TVsSAnZWagAAaOwP/1xkNG1VKjYy/tx3JfYV\nDhEZMDANkzlgRKoPkGmtA7SD+YS3x5Vlyox1x3l6i0i0zkXo7yTKP+y+GfjQ\n2lxKltDoswYFTCINEOldpEefiSBlCIFe/AZkNZMUGTTLZiFZFKVNEaCcmPnL\ntnUVdqQTqto1ZXsJhzYiLNeb8kxK9sG6t3VencS+j89aLxQmDwJxiCG3rdDt\nLI05bEIHty1r9Zwj32i5cph46bGd37VjgOuF49Iu4k+iZADCoJhKug34Fos+\nAZpCQU+au9qG+IMw50w7x0quveTJH2wCafJ7+QV9qFIn/lmzM7MZqqQJSuNG\nAmdc+iosk6CbZ7aHmXuBj6auWz+whr3G31W0Yfa3UbKt1TZ7U9ks2PQLF5pO\noXvqE6LCOsydxdNSEaeW8qFz/HWUzXbci3pTzZG9b73pssrAyqZkq0rZxFng\nAVQjuUrQlkLUfvXBLj93Bmbu4W7Iv5f3evMf6M4mOZNMbRk+y8Xtknprad3M\n9j4xktdLJzJlRRFGIyWdioRw7jSom7RRXhPHj+osHBSOBhKDc0hgVaQNMZ/J\nzZ2llaWfCLdjk7G0hR8WpZzMMvB1/Fk2ECKKuUec/S1BbmSb0Nki11EfWgiW\noYEGay3cB5nyaA9/VOzs4Tjo+xf2TS2XEqJfMWOcK2vFrMRwJZchnv8jvM2n\nwSrs\r\n=eLVO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.7ea2e830d.0_1623797570910_0.003224261186390409","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c576797261e1948904d9a9789d54997067a549c6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":55,"integrity":"sha512-rVjaBBGylyGr6aGRtSfAhvybW/+pN/lleBFmm0vSb3HyWVdHDUQfhfQUIuy8nu0WwhHzj7Dn+tIJO8w9yTsyww==","signatures":[{"sig":"MEUCIFyMeO5lckKoz1Cxlks25+MfejR0cjyd/nn80p81GqkqAiEAzkZdTWKE0ynjo2dWmqMii4j9PwPjC5VyEqQ+5Pv9EAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfXCRA9TVsSAnZWagAAkv0P/iAmykzrmm9m6JR77VP6\nPc9mM5nNIZTJznuIqA63yoDBZdoWm+Nlu27KyvgP+FgMnssH8CoMprxvU5qS\niEqiVSFPZ2X1O0ymqdkp6EP2t4R3RK7KLh3LA7qKZJ2z274BMDkmj5M5YbMN\nlHzxJRv0OOgR48G3lI415l9n5nPv+StqDbsXPBMPVF/iS8FLU6qx49/xIgSQ\nUM5NxVr6CICH9flIhdCGR4dD3+9dLA1djWbEpvcF/LRNLYBhAyMEqK593HCx\nJ7bkhDMtejW/VVJ1GoI7ONpooyBhQ6Y+vqs+0ugCMXQ626123MsrrW/Wwle4\n2gqM/ZXTOoIzdl09gAUNTF271aFQrd3U4agkvdlcIM1L6gdMJbFM5uEcjLGD\njxsS5Hv1Xxg6epgYvK85OUynZVco9fNfdpqWeH+yuNoUj9giTapTRQBgqhmw\n1heVMvglLdjwmvdtUrQJrF/oOCdTbxapG97LXHTOICr4pJtuQPYGdDmuHZY0\n7gMoWUyDi8BqlwlP7ZRtxH9N1cmhY0zeOBH+0nVYfgYW1C5qLaMvssGN7eRI\nbo+HkTz9lTvERIdZ0l9xZy3Tu+rvNuA1AloLRDJ/sTqdpxg7ri8V7nMAN4M2\nQdTrdnNwyl8wJsgh9kkKy3qIGpFkC8RkvWDwA3KcQYfHqVELNg9PIQFh0aPf\npAoE\r\n=Nljx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d96f0a1e0.0_1623877591164_0.671477427961741","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/segmented-button","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"989e4f7a7df3326dde3853989b7c271620ac7803","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.a6183801a.0.tgz","fileCount":55,"integrity":"sha512-vXngvQq/cV6dIzM4NFnhUZE2Ddhh3f36DW7a0lmrEu76iSP3FzSzfZkt4sLrw9cZpoOyhhdOsdbMuhPjV2m9dQ==","signatures":[{"sig":"MEUCIQDhmoDU4eOaecnDR1QUVJDsN8MHoeIvtcJWs1p92GzOpAIgPkSiSSSHj57e5y5635nybwLzq8LvYJ9UVGr2PpXRqQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWyCRA9TVsSAnZWagAAVPYQAJ9EV+Jh7znlJGOySAZX\nPGXDchhKMhZQ5xHh6axMgGqsmTNrl1NH4/pgW01mm9ocguk4N5UuhrJwUQWi\n8ebMVU2gBA8WAXrBgXBGObWdq60H6Trwa0FxrbcnK/13oXxHIChofTmFPwT4\nZSbVqRWkEYFCIhS3YESft2JyfG/vCnJOdmSeo3Dj1G01U+jYP/ebxbt3xPox\nOFKrWz6z0mnawMnOu8y40IJh3DjOOOGCcjMHC1hqN6vChfpB/vzdpYkK/qwc\npwjhN1K/MeQQ2hZNl+CkETjR6BMcLYgbD7OLwr7vtTXc/McWQ2auB1Rk6mKN\ntUlVJP3OvpEUI7slH6qTRlXQ6qZsXkhZDovmx9l/q8nyCWD+0HKnHtJ8QvDj\n9FxMuppTs/pFa9YTUcqMAepGSn2nk4oWOM0EONtTsiw7fhNC29cJILBIAtdV\nGoD1JmtSMOB+JNt3rBzzCQEsVJV3lDmpSME3cBnE8BIy9JVB5ah33oSlK8Ne\n7lCODYInN1duhUbiOMMMBJHCJaToq6PLFviHTuJhrpJLg7YXaIy4Q/JVoKg3\nmijHikIE6YLaJExILiLh3kx4J5i+ZBU4FJ6D7/s0zH3OXcRr9kSS0YvVUULn\ntEsZSPH79HnTyJz9SmMT3KYoo0Vc3ZG7IzvjZKHs7H/n/xvYF164t5qklP2A\nXhUx\r\n=DXdb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/touch-target":"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/segmented-button_12.0.0-canary.a6183801a.0_1623881138376_0.9203360552087527","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/segmented-button","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3511739d5e33d1cd6cbcbb2143f13651cecf1a1f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.940550232.0.tgz","fileCount":55,"integrity":"sha512-mhKbyMB7fRuzVWEt9fvZNRJp86XfpfDHmGx8UGzcZstWAur+6oBDOEIdZlqvEsg198qgCXYtG9oIOh/ZJKfTlg==","signatures":[{"sig":"MEUCIA1rCarckKCvR8XsYrBtFFEqG/Ha0DlPIkKiX8tlPFuMAiEAui5dD4GHKk2u1NrBOgaDYuGgHD83R+XVRvVbrgNKSpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UoCRA9TVsSAnZWagAAvpoP/iWwQ1pelDveIOP17FqX\nY9jQtMlACZ9pqehNjVSP+CZFsRRTlhwqcsZHRuH9DhNXGtIiweEh8ufJXCJI\nSkiLzZAxt8vhjIuhEbrrtIG4MPwuYVaVGypXl2jrxT4ROYTztsQav5kz+EXE\nnWhkjMe15vVeoPG5ZzAIBEpra3K6zMCmOGXllvQ/9czh9XHP3QxrARUW9guh\n0oYWS+yxpe/5ZwJyY8UIGyjDYmrO7hZg0EQ5xsCofmjRUBWPT7zMR7Ub5Ox2\nPtsGF6Iv47vVrqWp83E/TeuVHK/VJH7GDzt9ZJsj+kk0/dvT6J8e/+XlCYUQ\njPnx9WBt9HPxWrrFmleYgaZtZFNTz7x93ZMCnmN4noIk+LxW+J9VrnLYwFgW\nJ97Mb6lHAa23h0aidUluGqJNI1fDDJKNpZTnG4cAIHPgFUmjsb/O/pOTYM5g\nynVHswu3GG72yxWhXmbEK9FIhymTHKkU+JIzphIaPR0QB9Qu9quMXitomoi3\n2VgyKqKqKpcfrr121BQFSRm76BbBXzMWq53FGGrrEo14OcVHg39fiCvcsnIZ\nt51lO0e0uuPYijwHqu9quZ5A9tf5CZfb0MmjMac/GERClXcLscFs5ZKQiL3n\n1j3z5zOLb93BRk0K5L5j5UvEkHwRIK4uXM68jDFdR3xuiEXAlwZWzv0/HwvQ\naYvE\r\n=Hzxx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/touch-target":"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/segmented-button_12.0.0-canary.940550232.0_1623958824325_0.5054298252147369","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/segmented-button","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af568e2cf49fdcb067702521e17812804b530ef6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.f705e8048.0.tgz","fileCount":55,"integrity":"sha512-BH86s+twdQZJiwSMakOz3FNHJ6vtRyeoHdDVaLApNYsDHkdU6jQEWVC3iOeNnMcEdEvCUsKyT3q0rufgKaGQ/Q==","signatures":[{"sig":"MEYCIQCBmZxeOZm32Z+a+q05pazX88TRk0gQo+27AD0Pj3Kn4wIhALjh97DroGHluC3VsCPvXenvn7TzMg05aYdZlU8uruAA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLq4CRA9TVsSAnZWagAA+lsP/2CIonsIIYRqQrjifyAa\nTv1Vs8WJ9By+FbTckg0zd1M5wiQuhg4C9X6BCl6v7DnMctwOF7elurRIQPSB\niwCAGRJAL3MR2p3zqsjLB/4cl59SuM5+cikUwTlk+C1iJj6xYQfCuFVVXjoR\nCOx0S4e3kdnsutTG6L9WUfTQUvEyhJU96dREGcy05FBZU4kBBY6wNJB/X+01\n9q/a5o+A7/EvuIQJaERSaZPsNNCIHJ7l118Dk/QJN3uVmCYaMMrXqcFZfGYe\ne2GRv8RyondbwwwOQNJt2KyT/b/9HznfN6ZcteGqY7ttxOrx1rxiiCPKLcJC\nvMKfl7cp5lRJgVJvTwJl0R7qn/RXYByF3EPTOmyl9t5NkiPnRC6m0oGySdk+\nMkgE1dulsgA7Nea4xssDjIp1XbCJoxyZHyVMdNhrFGumTNZ8gwy+TrpKt27A\nxoMip3ivsGPbsFGCGAEBSLKw6Uayx4aZ2SiBTBU94aknF3qiSOpcRS7ENL/q\nndpsKGJKDLBdnLVAtYsnGZ/nDzXzImiQAjtK1qJVrsqgAr3E7utD2/YNugqy\n2ZCfuRAzha7fSSQS+3WNrZ/qHzcW8RcQrVMgsNI023vsRMZBLzRsqM723tFZ\n4686YWKySO9TI6nK+RUhgEIeSkWIx0NV9ea6MJkA7iIVOqcXPC2rINpc4bue\nAGlG\r\n=TIoQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/touch-target":"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/segmented-button_12.0.0-canary.f705e8048.0_1624029879785_0.35151447486200804","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/segmented-button","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"98f00320492b01d71003cfe3063359b63dae24a5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.08d791f37.0.tgz","fileCount":55,"integrity":"sha512-xZIw11wwdhDpsgM314Sf2YT2xzmBlXfUX7KCv7J09KOh6HK9bWkfIeEkBzfE5OnN8eDR0rbqP6+UOttcwJIUuQ==","signatures":[{"sig":"MEQCIAUEaMfq/+jpveCV+NBbMyR5nzXqO1vlcsgkRuvLHPAUAiARnfPWA7SfgShVeCIB/jb+J+P4LMpLBDFlEQxfq/Kpjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwaCRA9TVsSAnZWagAAokIP/1N1n4RL4MR/i6AOeSR3\n6/cFNWojef7cj8MQMkiEkQ0hfBb7aHBO/IFMmEFg4XiyuGALLWWNbT6LNsr4\ntaiVnHha+ifO10mzpsMudSjWbyRPKx+pEWZA5rrVUBt0axnn8VwQKELlzzb0\nCQjA6CrfdYnn7D6QZMBlLGePrY5GNcIfPLJDZkBRMN4CCCvvsl7ymPhYkDN3\nT5ZHwnr13wNd/idLsK8LXfNsu9X1U8LvGhJn2r7sh86kLABb5ZTRXCHD44mu\njfhc1g8xFvE4FFr0PBvI5o0Ca3tDPhrx5vU1Z2XIOwaBpSZAFStmNXQYvGuT\ne6tE0YMiB606SbRwajXMJW4jZ7jSLpHDk57WPePSxq98TEGLkx8w2t2JVDRm\npPyx4stMjskt8ZIU7KBW1fQwjPa+Zs/lf0ukqzhyCTqO7qCQ5iFWKh0sxVEK\nxDumuMQSKA4C5TB3g14kTv9371XGqZbMqusN6hAAfsVmb43Q0aLcQg+ogVq8\nSCbavbpU9/8vZsZpHrWE1CFC4Rs9Z5Fo7D1Bbf4/mMWXGp64l23QYzRiTXg1\n5IMBGNhhdsd8K7OXCEPgEFWRzhtV5u9vt7l63UquIwAxkG4qoldMKEYCFSc0\n+Dgw3eIeNcyqPIRfIVaDve5yYC0NZu06bj4Y7jT2Yj519/VQmp4DKELekBs2\nazeF\r\n=dD5M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/touch-target":"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/segmented-button_12.0.0-canary.08d791f37.0_1624050714263_0.3067057872221981","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"781c0d1909228a028c1e67be3e50646f90d21a66","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e38d7440f.0.tgz","fileCount":55,"integrity":"sha512-381mtwOq4QWA0X+0NdoM3VVCaW07ccd6qc/2KlZ+4ym4a761lH374n/VovnJBrmNWeNJgw9a6DGPdHZlHuHG7w==","signatures":[{"sig":"MEUCIFPaggG1971tCUuv9U6AXaHQY2IrIUUiigS9vjqeSr5nAiEA4/RQnB/ODa+AaI2X63twaM71/ZSohQ/QY5lEkiOCi+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8WCRA9TVsSAnZWagAAynkP/2dXlA0Ygwjkhi5EVwvo\nowptV3qJd+7UfJB3eyCYq+215UZq+c8yxGLhYSi3wtY45hqjgj2rfagcBD9y\n/8AOhnTs8Thfi/pS1QUoxqdxumcRubvehTPPvmJrYK+k0xaliHtHXkAnbk2I\nP6FXvVQr7zd392/JQM0yyTLCCd6CghNZPUk+icFTxj7ctQVK1cixDJeaNHd+\nn2jsH9iVC6ScdOf0J5DXNJeGddqtaT/lhH5CoJ3b6JEFte/7nqfl+mT0uiTb\nRLwbCn7SGh/P6vFf6YL0tF2SkTzyGGyVwmwGu0+xtf16OE7U+NYYAm5Y5tE/\ngBK+01PODp2hMD6+pj9P7hJnZ+u+RlJ5ZPS2xWkdA4krSdHspltoDnGLvLMm\nfKVrm7hgTTJU5P17TpD82U1qNUsyHkaZw1wRTpkn5OrXkyQtu5eoYjxxBRRV\nOp5Q7r+PycdtnzyE4dky/M6Y7jI3fskkB0QodhL06hLIOps/A49Vb5Y5Ogqg\nIl5nKMhwD6gzzIDvvoDqwl5CflVejrSl2fZOvwF9DGe7aKBce2NhSAXRVdR5\nYY9dYcOKLPREraQH+/TbZ+yYGnnj7vN7SsVthEiFA520nd4LEpN1dKZH9olb\nNV0FgWo9/beRFym9d1lEjKSnRBQjVhCEemqzN6aRcP+pl5F3661xXCNWM++J\n59rz\r\n=Ce2p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e38d7440f.0_1624297237689_0.40775009326755707","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"496df1ae9d6d89372a9b10b2f9ddd42caaf36ed0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.75900a5a9.0.tgz","fileCount":55,"integrity":"sha512-9R3QTv/xccYqRv2zQDWiM6lBRcSE5Guni65/iBpZficaK2RePas/pAlYJwI82huywHrBiLYStO9nsFcjv8hs4A==","signatures":[{"sig":"MEYCIQDD1k8KKGCePIg3e6uz/gLKPNZkfH0h8lgNIAM6eefFaQIhAPdeSCdyt8dh9zkReED6Lgta09AVp2ObEnPqk/2mPZqj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxYCRA9TVsSAnZWagAAf/8P/ji5DNUkbUio2+eSyDKe\nj7i37r5zy/RWnEl/nT9iI/wc7LKO6GEXWWTbsbABwi0acN7UT1JMIuTLCiIG\njCSyXEPDR72X5kEsyvRKhBh9BWcgBW0mAIJC43j6Pk5/cTeB853+FBBEwNjx\nMh7X2QZUM47+eyCj9StXWC/oWb6kcJemQbDMb9PizBgpHW9DHkSgRHciZ4+9\nR1iyAJ+UyCMC+JqGjD4TKfWmapx+b9vLNcY4Zei4/0v41ZoVfsqY0G8Z9tgR\nxf7OL9q4/Ns19xqbR8UjPAENDFRp5ULQuo09+BHkba9+kwXRYEWeCVH1xpZw\n1Nsd5osCtUu9cUAaN4YVy+Ge+Y7CnJgIoTYhUldauipbyhRHiCys9CQTfxTr\n+Mp1sMxtihkYknzqt78f5pCig2rApKup1NptnOEveYDLhp0wI/lB3ceKcKhK\n8xHlzm948ObsyHgygdb7k+2lBcdujudNUXNX1rBW0sEBKZsjW3zG4IMKW3cJ\nWAwcL2zl+8k87MiI/FfVO2MF5mdac7bUj9QKG0xYZGsVTNaF1GLkmg32E2KK\n0liY+OAAMdSnrIrc5lYfjJDBJMJorclOVIytaMhLHqdK9HHofP91a0aE1ASz\nmWhGMUILEk1Rhq/OJhCDtkw+52LROel2SNpZQ2qjTbsFmhPIyZoFQQHfHmvE\nl7kM\r\n=qV4E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.75900a5a9.0_1624300631562_0.38138269045831485","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3053c1e8c8d68a9de495a21a566b82266b8ae1f9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.33e6f50e9.0.tgz","fileCount":55,"integrity":"sha512-acEKfSyVdI9HEYQPcJ6k0/i/sd+AiVwg5zy9Uojve4JPsPA0yuA9P/vqYF2uQAVdFCbHQnDMcRjq41OWEcEPkw==","signatures":[{"sig":"MEUCIHeNLOjvbf5WgbXlvHHyqLFiVWEoh/ugVyJbSpALptsLAiEAz8GmMhomcoINoIVGfD5+NsKYAo1937dUDVAxbiCuIPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxeCRA9TVsSAnZWagAAI7UQAKAk00YT4QwZ87h1tj/q\nCj1+ykUl9GhjGVH/W0bdZhb62wfa1aGS5QfEPsEapNAGF/xwDtAA3pF6nVjc\nuIy4zSgnr0CoHlsN8cv3xHgDe0b4UFV3LeYH/8mBk5Dr/vjMHK5xWc4siPYj\n3tuH6FHS8jna7qVWkzdCElr/nwHOC3gh+qBXfogRPg+OnyQHLWjBHqnetx+U\nPxFP26RLXXXFyukMyuq6PqdObbjyc6usakpY/zm87NjXGOJqHnfI6VZYLsVd\ntVN1a9GOw6dTjV5EAnoGlmSZntvvmXbhaGlHLvyFNwcMY9sEaS+6cFq9CcqJ\nkteu1UJfyF9zQSn/hZggZTmzSQnE9vMiBjSkwuxOdBv5ruBFQdWPLCD5aLWA\n7OSaCQQzcmm6QevOwQtvLm1WXg+oJMwqSgkqREB3tIZ8L4CFL/HMWNNs6cgZ\nWgmYLv/voJd/bZdXfXWVHSb7c/Y1j5QpteLFYoUd2wOQo85K22Ytf8pt9H+E\nsfOJvwhE6XpeyBDFKhBUsEaDYn+6FjX8kyMAfY3r9ZVd6tbK+S24N8ul6VdR\nHS2a7GQ8KbJvLz/2MbIhxcdoJzq/9KO9yUBFZ8zY/kBcDQ6QBeH8M/K+hnzU\nCJtg9/BnAyVijB2dYPWtoS4Qz5UqwP1+il9DZIupkgIvG0yQ8zCUTRj85gJ2\nttCn\r\n=XXyz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.33e6f50e9.0_1624407134448_0.5362559140731264","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ea7ef182821fa1b78bfdd187ae0a405e91449ca4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8c685301d.0.tgz","fileCount":55,"integrity":"sha512-iWW4YXo0qsHWTxcJWvq4JkJNGV6xkdmvTFsMF88kXvzJXUkC9bVeTRkQYaoPE9x2tOkO94WZQMqEbXcTYqesVA==","signatures":[{"sig":"MEUCIEIrul1J27KLNbNt8ew4LdXqOz5Qc5I/sk8tuOXAgqGaAiEApj0VNrZVbzvU6BaIhGlKJcER/bIcsXwRhvMEhE7GefI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xvCRA9TVsSAnZWagAAXO0P/iAeCmGGbYVBeqm4fV9R\nagCXgC9EV8qvHn9PHQe7JJwSQW19zbC3vxIv3y3Yvb6pEg1NxQy7kQPtDYSB\nipq9uYcWl2h/pmHG4GJKITEfyQvEurPttZ2BETN1AbH2SvFg5OM3vZwnRYkl\neXjnAzz9/1+yVokAdZuN+/Rg0LlL420g7dGnAl5rYI/RX5cVanZqJI7YbgG6\n0vyGZzOHHULoPSKrWAHHQVttYYdFdOMN8fWV7TsDbQshUPlKCa35l4OsCT+C\n2pii3etzNTVAYxnHLuJUUpJyg3EOB+gNSZNphIEF08Mh50HSC4neGLX0RkuH\nKVBnroNz0AAkCoCNkt9KqVT0+u9GLK4+YwouE0CUrbrIb/DT+O5rDunNWcha\nE5DTWRhJAMYBrh/EuFEE1sxQyTJTS+4v2AkWhgaK8OHpvOHsXJupBSotBrEk\nM5Aoztl/x6+UGH5gfncftGoFbMwWgw3CafzUsODns2/TnQ8FY3TU2DSDmSpW\nNSys9GA94OVzbAoKnUk8B25KZVt2EhopM21Lu3nmr8DVaY/DP94YapXqigcs\nbuN8/ChVq1QuPOvrPw8OklAGann9QPMsHuW/fo/fWhgwC1suFUNRl1mij0So\n/oNUNqPstd2G7hE6yVW1KM+VXc1sg4CAS5nHz4BKgbSUDtNt7eRS4R124yJq\nipDv\r\n=ELb0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8c685301d.0_1624472687040_0.6979878519560625","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/segmented-button","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5dab300f836b27ea619e7d92e3212e996f218fb8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.8c7d994ae.0.tgz","fileCount":55,"integrity":"sha512-HwV6W+K3j0Rcnenzps9VlB2bwYQM2e/aXXI9s1hviWW5va8J6zoe9/HdK64JggiSVKaQ/3/7o3sBaOCO9h5caA==","signatures":[{"sig":"MEUCICkPbJ6dyO4GsNEOmsrFM516h3rZ6HbQ76egqrdOHy86AiEAtWakC8ByiS59IDEE1x6Jt2hDkSaOwt9U6byUt4Lwms4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04smCRA9TVsSAnZWagAAFuMP/0cj/volS/6w5JPVJGkS\nc5uespWZgF/70v44YX2OyCgNadXNQanEDLGNpXlMzHw4BwWhio43kNWOBZGm\nC1f0eetxwV2SqMcW5PAkhdwDBb+VQJUa8mrVzNfMA8E9RJtN4xKpdgzuxWtn\nv1/VRJGJzJTBv4MXxmkIkekqebeUZOYEm30uPwBVqEJeCa4bDpGlZaYISQiD\nEr20Yj5MLh3SWJUMf4nUeEuTEK8MpT1eyUiCM3ydkXeYZc2Dy+I01jwT/RGP\nkGZNqcux3xbPb5ZYp0bVFoNTNDuGHybQXmGq6XHjl6xQ1I1D0p11Nv5t4xB2\nE1USKartbGYodPTUJQY1WpQDwMA2AJcUj3Rcwb0xRjtlG+53OFS0avWs/kGA\nrA38CVBbHhQG1sMfytpbbCnB5aEEakCu3Bz2VtFx2HM++3RA2wPDrvTJGavO\nthi7flDwfn3l7/uGDLUGFkVgTqQ1ZeZLDKAXEGdLy4EBdJcVQVcg4v/X8qnl\ndSV+IhsFpZztoPQiU5WxQPeL0R+Hu/TIiC+EYr74PLVMX0tVMbsnfTCDwEQK\nrboNnA8000aY8dz/hNL9YEqheAz7jD3jzO1suvaFGf8rycgOooLiPSC+u6ax\nFiEY7Nb0KxoT6JWRGxEYA3RnmAP21xwmAZCdPi9kGU+M5SHqlUfGrA2KNTMb\nSc5u\r\n=oFCy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/touch-target":"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/segmented-button_12.0.0-canary.8c7d994ae.0_1624476454437_0.8848980194177707","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2d14fe57db05fc253ade1859233ee2677019b27f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":55,"integrity":"sha512-B8ww96coRLhm7p1XN38VLHbIagHZOAViZ3RSuDaTf/ZBqOTweofllOTQS9uiNbMelC1c2Jc/f6Srnyj29MIeLw==","signatures":[{"sig":"MEUCIQDvUS06JkjMLhg8Ngw0F2ok59MV+fPZapu5mBso9Ha6qAIgcodPCf0MhOsv1iaUJWEetOpwmtcqTxlUCrW5I4XrfMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+JCRA9TVsSAnZWagAAYWcP/j+SOwTczqqBecTg3DSz\nPki044z8DqK+x5oSU/LszvQ1xk93xbjqj4mfQNqzqdH+0ZI1j3/VpY3pV2xo\ndLzHrEtwemSyVAff1QWRP5JuGieJljfUyWRLm0pg4sItffhHjtKSO6QC/Zmk\nYMACe+YLN8yJ4THu9ceBDS5rPSOMzKpyLOK8PTFW5RGpjRj7Km/YrUgveMW5\nPy19stIDQOZ/+uIxlhzbpPysrHjPx+CJ8Lexdo7nkC/K0AtVnTL5uMMYXYEu\nHabYOUal+XaSQwTZQLVM0B4KZBQzlnz2h4lUNbmRfotX+grp1jxoxr2SZdJd\ng5jF2QPLgOHep0Uv7SefEBCdu3SCUa8JegF5kVAp85syt3l22Lr7bjx+qHqb\noOJk1K1w9LaIs7ZlfBcJ6iHlF2LYpfKRwpWWjk7I+EtI6IDMFjQKTceDxKLt\n3X0F4wHqo0nCnVCvAvVM0r9Pj6j3+rY4Aq0Us8IuaSbqfA+JZCi55kK/BE8+\nS/ugeb3AsShhMnD0shmSC7UaZ0TsTBlYF+auycXkM4ZRG4f24+SDqSgxuk0I\nu8IrE6KJfvL2WaIyjD1POXLij4XsYGiZFiMBWu+Q6MhUP5bIBT9QzAa4ai33\nH5laWkW1X0+ylJCdrd+mDVYh4by9rMBY9W81kmLvh97pkbUjgfJDF2dWApGN\nt/mf\r\n=E50Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4ccd39bdd.0_1624551304788_0.06475358744703996","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/segmented-button","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"903972af7dffacd66a0d7722baad1db40dbf214b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.17553e9f8.0.tgz","fileCount":55,"integrity":"sha512-cRVHzep3JSx/pHk1cWkMhDa3VgVgOprB2YG2COy66BTVZuOgwLicnUJnSXdEx1WV6asPc8eKR6gHsHeVf9ZWQg==","signatures":[{"sig":"MEQCID/wcmlNiqeXtcIleSDaLVGCzG7f4ZWxmEcsLNc3MPneAiBocJqhwLoiFXoEuc9EB+qjF+50mqr9PYbZbGvaenm2/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lK7CRA9TVsSAnZWagAAix8QAIyTBlhO+AAJ8KtYkrUI\nBQJYuFRwGrSFi1+ECxT04Fqwi9YZVe8M0NLY8gVpYuoNINxzpw638LIV9aHM\nOrwi7fEltzV66VMy1vWHUxbxQBEteGzqE7gKT8/+hQGzVs9gtOhF5zy/aWl7\nosyXGHCI9nnHN7+QHfJINzcmFHafWlBfHhud6TVQH0kQp5O0iIvdkBy8hyIK\nxtWjfgtgcO/Qkl++BIWnqAdVKOT9GJ3nBxkxIdNvCyYu4uNRljJCCyj3DNxT\n+3d1cAH369DZb0/4x+Dy8PRjQK/k6dlFDG0FsB+Sn+UWVTkErGSKrfVgp/4f\nXaThpDH+g5iDpZRABpe4GiIcrm0HEZC3xoIvLNWesfLHKsOzKH7KQKX42dUn\n/afLcm7ZrKw5Ag86alUhOoB7F8lDdpKJRc2PnBIzo0EAP+lJz42FPAijwdiP\nQ8OSudOBCLZc+WxjP1NSctVCuQTgkYEkweHu/zW1Gt0+T0cKiUJaZkNqRgx3\nWGgq/+UAY8v5S/L9/7q6EbxLZi+pmZkvcTx1wVwIBfWd2NP4zxctiPEZ3uRa\naJ9BK+7G57eVlSpmhaCdfI21b+VK0U5Pvasp4HkeWZX2hjRWBFYC3mkhsSkX\nOZzGPSs7eO+VR5iclFPFZYJxxdSOHXNzz9FPimo9SzoHcgIUN+kskKq4eapd\nOPft\r\n=eUU4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/touch-target":"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/segmented-button_12.0.0-canary.17553e9f8.0_1624920763357_0.695934858402671","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2959e688e33c09e2dafd3da99d61bd19864c9b7d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4c80072fd.0.tgz","fileCount":55,"integrity":"sha512-Iy/2FJLHINiLV1WiCWBnWqS11lvnNzYghqIf1AWTf2Ti0nl6IeNRKt9QsX8xyPe5kktctzYavPzE0kO3AnOULg==","signatures":[{"sig":"MEYCIQD/6gh3FbVkeWG6MHpSrM75h0zYod3GsEMvjWNaxHJdKQIhAPw8h3IZsj/IGRTHSCOavgNUBsi3wrf0HteIwbWXb5hA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22k/CRA9TVsSAnZWagAAGu0P+gK2ukuH3q55F0Dw2dU6\nDLcJkMs+ID0d0MIXx/cgAcqcQH5ss7CfJu237VKQkOEb3H84AOUWdBmxMJNp\nm64DBIb/QtumV1DT03gkkt9yV8byQRJS/N87EvCxlwQnpTiID5MTf1kUAN7P\nYw/lSmpLZnJ7kkFrS/OWSoeLzvlkH6u+MjltD6YC3RjCG2YpOGooAeaGLYYz\n32zN8XiQkY5BqqHOFmbLzSwrGEZVw088kOiKNZh7Ue3QCJmHOuVn5TMRY96I\nSUAslnu3c961R7nwQZEAPnXI0YnHejFCeXc1Ln3Xsvs+VaGlXAYjHz7Ps397\nKZ+lM6iKUetB2ssCUS0AQATSYZ9lgEqMBFeHWrTMDLogXoJX1yzH4wOKyBdv\n5g8EAslv83VvWw9QKrQzJs3R9SOONdNQ2S02LPuJreQYq1zSHPiJkOdiEWF9\ntn6CAOmTBHFM15kM5KS0QvwL6CnDewva7yw9VME2VcwqLZikfmE+CQZa1wDp\nyZ6ax20cMPTQCKUtnDjgrE9mwvhCgW79yNDJfkM3DcniqZC9ijFbtwKlrrnW\nP9z0OmtOg76o8RU5zWZfGsMYkihx7HY3YJPmBzv5vdIj1YWO6PQjKcDyDoF7\nMLGgxep7r9Ytj7WNZ3fYieaMhx3psY53QgZI8pgZ3X1TiAzBxcKvh3J0mY+j\n7v3e\r\n=OlTC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4c80072fd.0_1624992062611_0.8582814444645954","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/segmented-button","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ce8609f31b05a2ed8f39a980ddde83b8aec56b5c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.796811db7.0.tgz","fileCount":55,"integrity":"sha512-pQTKnN9ByKSxVpvWwqv+dehP2p+Jr+/+utUtKNwLc02Ey75FXSwcdSXNV7igANnWl/z9x4twm3ebi/X/oQENmQ==","signatures":[{"sig":"MEYCIQCrqD4htfFRrsTg7sSiZhfBj2jRySFHBD9M9cYBJ1kCUwIhAN0sYNJ8RsiuvI9qOCkdduDSk0ITri7N5cBvTPvjR2d3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZYCRA9TVsSAnZWagAANfEP/3otzNt4SqeLVsSJw5bs\n9xccSwhk0e4K1CFW7P7L3k0Gul+aTIxOpJPhMvSpfT/xPlUEoU4ap6Ih0tzU\nPHhFDsRmV6+hJa1RH6vRrAWJL0PuG61lgljyqGDFKwAzkdlYWwvC6fVryG6R\nEyPD+6tlHaxSz4THZe8f4jxU2kDOuCxJbjtRBWteLYuu/7LkZLUWJvZVFN6t\nN3Zn9H1woQOARkW8cRmwig3JdXtHwJcBtrt0Cbax6Ed4+YhUehvkGI2rvxBa\nhQ5hNlh+XEhogRf8sbAYH5VaBbNSidVwMkzeT5ZMAwUWd8cNVsjtaI6pUALS\nB2adZkh/Izlsy0HaD8/0IyDitUmlqh2/BpiqxKWFtqYBy8SOcuIqhGjQ6odJ\nI5OJ+WEXmYbdxvraeYqR9QJC7bovLt6dd2naK9s1k5OcPDirDLb88jGuG5B3\nTzl4559XzFvOTXPBOlf7XVYAm8C3olf89P94T92Kr0OR/xruXcMyLtGo4B+A\ns6u5b6rkNCqunROvLGOeYH5BojMepv+OZp1pb2E87/6RnPua8NGL4qycXm8u\n1p4VPFiUuJFC7aRkMwj/6uirv9633/7PbvRlM7R49KwOCzG0wTgH0RhIQCAe\nheRaTFxpuvS7R9bOaP5PbZmPVygCNumsUcuGHhfYO/77sQ13KRcd6y5x/KDi\nOwZo\r\n=jpVS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/touch-target":"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/segmented-button_12.0.0-canary.796811db7.0_1625097815625_0.10837480952125711","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/segmented-button","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2ea155b203bdc9a0f90ab048ed9e3e2e97882212","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.70e1efdca.0.tgz","fileCount":55,"integrity":"sha512-tENyMS0pO5prAiah07XqKNzbKfanOl2rZERfhH3m39uqe/kclqXl9Rp8roKFjjveh3wuXJsm6vOkKImjzMYEfQ==","signatures":[{"sig":"MEQCICkHAlmgxwUiRtRIaf1cRR0PgBaPQPwHRjThfJexJu10AiB8Hj2HgcdjRbo7xf3ICDdXRNysSUjinfi6whmDn6d5JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYmCRA9TVsSAnZWagAAqAwP/RtTDgE5LCcfFrZyDrHr\nNF4DkAFPcPRWKJHQ9oZHNMJJa5/RNLw8Lq9Ue11R/MShJawvp1cx6cv2q5ix\nGpStOAMVRWWoZUo9ZE214UnY+gybBtEqiCKZZyPlg8D72T23fHmvi8MBb50M\nlQZitxyTDv+lQRg993Q9CrVw0fzPaUOFvFhDAerjOXGKwGkcFqacJtmpLcvx\nnXeeb5PSfzXZBenuyH6WeqksMcHkOaimT48IKvwIDOpXf0tk+UnlpdNvQrAH\n4Cg02BUfP10PYMCohLEs8iB7X+08X40OHCcK7VkeEbPubHFwMYsIn29pf0uo\nmUG7lH9U1P11W4QNRMh2SikdbB14hIVp2swdcZ7rfURrbJtbRBChkqIpHodZ\nkJ6S+7WFWFwOZMLmYaUyJHoh0OxbSoMLjkB6fC9HHjbR+WRsDltX3Sv/11SO\nKA/jAaA5XpYIYPQFRmKN502PQfriTTsfK1GkeUiAIvk9k6gVXXE6I/sje040\n+JAAOozUodgiioRPx+WKSt1eOjYFtpoIJagamOQ5xrB90D9w0z9OHu3AcaR5\nVJYFx8OMg9GekwIthEbbfEiD8XizdO6Y+9j5EO9S/3euFnZGKjXB6Hwymm4o\nCi0aFKRjwkEx1Ha7ax2i6iHTdvvNxob0hLh/TckBY7xgWDZisGkM79epenf7\n0eSy\r\n=PCTF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/touch-target":"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/segmented-button_12.0.0-canary.70e1efdca.0_1625159206382_0.7293138950693308","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/segmented-button","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e312d5e8998ed62ada2a79b6063fd62e41273b5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.435866d32.0.tgz","fileCount":55,"integrity":"sha512-nI4f/IBMnZeoCA3IxifiEiXchPo55+F2bvqRrpwnRb5PchcD4UmfhWK/cvWuTI/uqDuQMYh0hSjor6JYB2HbZg==","signatures":[{"sig":"MEQCIE8btyDP8KMJ49H+uZyKYKBrix7qlv5P/T5wnBjCUqvmAiA8VarZNTvO/BErWHJeB+IahJKIP7IQUKvcF8J+goXsGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kmCRA9TVsSAnZWagAA6jEP/jmnc2OwxKoiXXbuaJMr\nAFZJBHg/4j2PsznuPXG0rgWJ1Yj9A2Z3Pj6W8EImi11QJYEJMrJNFZ5pL3xb\nmsrg6f/R5ZrL3+u3gSyNUYC2LvUDy0kXpa1BNtCm8n4btLJJ9MZMWFF7QJIO\nunG8Rcup1wcTDDN36TeEFDYKSKQXGSRPEmOs2GTEU7bOUf1JnJA3PJV7/OUV\n89/tmgIUiO50yUwpkwJg/I5u3S3uP17Wqq/jEI1XJk4pW8poLt6lnScjco1C\nmmoob7/I6Yjv4t1cms6zgJKjWPEcfHgJZD7kUVTNzE9BxgonEnu7y2ABLtKh\nSycTlpFnvwYB+aJjHbQUttVsVBG9T4qMQsVENAk7a1SUzbPdntYlsJ+muy1b\nBERVRMmdphuZFtjeJNVSszpHIVpd/6wskWM83igKzWk8P3rG6O0dIyUhUzng\nnAlWXkps9ei72cMlC8Uj+YDBjGbw2pytndXCh2MB9RRTqRB+FIe8a1yCLVqq\nv9WWoGXjUCD202PjU9+ezIq82Po9gEGJ8A/xqN6P8PqM3GuNdONmtY01+QcF\nuJCd2JZCqfvmTFOSy2xOb9cIr5ILt9GXqpQFzfum8IAtAsnM9nRC9ED8CMMD\nSjOROodiunFf9sg4E1TuCJGVy9XTy+dul5cFaMabJDLRH0ArCNA+elzSsDcU\nwfcG\r\n=cmme\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/touch-target":"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/segmented-button_12.0.0-canary.435866d32.0_1625250086383_0.828356625168144","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b67bf5f0d08a1b993048f444d49215e41ff9ed7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":55,"integrity":"sha512-WFD7Wl1VCIsCvEVnrQ2XHNwJWp8K0XTKhBHNWwY2KmbyeCInbYv5w1kQQKKcyEJd8F7AFK8CJ8/+0nd6eGSGrA==","signatures":[{"sig":"MEYCIQC34cxsqS7uX6mnfN1NF9LK5sfyAKVmploZ3514AdivPwIhAKkEWaol/kHXl50LlzpNQaAJc9r42IrChBU/Y/iA1WmB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36iPCRA9TVsSAnZWagAAqQUQAJ2gMeAkiogfzLxhxwXA\ng51jXhi8ByBmLQ0GJp4eRJtckj6t6s+tUQ8+6D/QN8VVkalCMl8VVhgSBqS+\nGc6z1ky9XYnrdfQBxRxW3z/ipddemykcR9JbVbWDepDIk8IY8FMAPsllqDMV\nzf/NxojRllKyWY2mniOCJRgBeMXI9vCdB3d39pvrqgrNyslkfmsr5sejN285\nAJPywjNTHBC8K+NdkM0C0UhTiSI8DRzcCu/QLOSM/xFY+uUq39ezUfdG8Mgs\ng97Qctd9DDquBv9vS4r0u4wX1uZe+yPJnVnu57GRzohjtX8ffnJGjHeoTtsu\nExNX+Mod1vcr7h88N97SgAe/vl5CY7HUTRsHFha9vmaXNZNkLeAB51K14k3c\nztObTZLY4sxKQ+qV3oTWS9LrrnC2cjTPSRLRev7LWulB/+E9JzzpBDf6ogOp\nYfmo0gRFeY6UJFTvtSKqj7+s+QZWgNzsYXrHm4a1kUs6zvm+Ln1YnEoGXR1N\nEEpMcUSvRERRrtStsyIVo8i3Jwo25BmjhuRfN1dloIgX6chfnMNL9bqMJOvr\n8tltzDiFMpjZB9BL/zi2VAX0DLphOHBprHmNUre7mn8pWeRNFrm8TnX3q0WP\nHzwjXa1FqZRGldtWm8mFvduimVmhE5gtkeGb1Mg4F6jPwM35Qc5kJgaARUCZ\nBhOy\r\n=gImn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d0f9f3f2e.0_1625270414542_0.9697877664060688","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/segmented-button","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9ed1daeedad66776d456c8130ab52c79cf328154","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.adeac0549.0.tgz","fileCount":55,"integrity":"sha512-n6uerljr/kBCRwdqkud0O+RmtXgV0Sek7uALrrsR1H9yu3i0MOQkmQzgZ0Ns6i+HgYNrmARTNvk7l2FYuVBTbA==","signatures":[{"sig":"MEQCIB4wRGIQs5PSGJMijZMqdQFWEblE0j3ww6/g64eDkCJKAiA8O6JMQEXOXO641eFq0rB+7LnxJTA51mDw+ohZ2VFrGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUnCRA9TVsSAnZWagAAwJIP/1wN1zCrgXQfzAtRoumR\nHTmU3dniOkZ44Kippnc7UuDNHbg2o9tp8+VStwSQXhcGOtixqxkZtT2HA06s\nDSr12al/FHv4cCDS/y1GDU9ZxDykeiYICeGdEAN3+Gi26PXlADUAlwL7sIBi\nAd37NSVSnz5WzGe8sI6b6rP8+Vwght+3Lg3OqBLYY85GO1MkTPeAElTMPLFw\n2TbdIEmkT7q4l6btXBqSo8BEO2jwWzij4pLHEqWNVvb/GQv6emgu4uPktYP2\nITyA8IfGfx106+eZeNArcGdjmRhX5HrGsV2GMurxOrjJIT55adwuf3BoEnk2\nVTPn7cmQP//3CpUsxvuZJA67S9AXCyB5h09rcrSi0gu/sRdh6woKzuOcw1EQ\nroWR9GK5KZhAL3IKL6xTu0q56LwMzXoLOdsnYaa8EugIAX6y7UrGoE4/FF9V\nKPMIOTUbZIvBzIEXK+ktwBM2iPZbCD1lHE45BfBd6wLRUZl9L4DTV8lgvbJF\nrDTiydeGwFrpNbS2ql4oSqbYRcH1hwxLDKC9GN076yFLpTBuEOlU3wj95k0r\nac0I/Csw1SYK8/HHz+oPzK/LfdSclowveKW1ohP2eXB549Qer6eebtxjta9o\n8PHLvpa2BWm5BQR76QbqicDqbL6mJNU2Ylv5+yplc2Zva/VqXvCHaZt32bXR\nI6j+\r\n=JQBh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/touch-target":"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/segmented-button_12.0.0-canary.adeac0549.0_1625756967549_0.3997347124237314","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/segmented-button","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ab39e87155c35dc11d4ffd1f8a4307454d8694cc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.068fd5028.0.tgz","fileCount":55,"integrity":"sha512-r0GPqcG9SoQrQzn1G0sOoRXsqHRP9EzfDJY3NMIQd/75XKUOqxySnFwA7LhWceTSwZWoZFn5xCAUaYPTOh3STQ==","signatures":[{"sig":"MEYCIQCGrpPRQgfjtdamvpt4m9hn7wljI122hCOFw9rxChiTGwIhAPZ2w8ve0laYfxpt7DDj7vi0g6H3gcNO7jVwgqM4z1uV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wZCRA9TVsSAnZWagAAve4P/2Ziqtxw4LunpxRD5J5H\nvs5LPb1FgC/NSX2bNUoA5hLA8kKPwBN8j9zD1glTTyeradBADCZXx7q4YLKV\nQX6SgPGn/jhqMmEIqEdCrQEKIStOLOuEhQWNeLC9g0dgxS4C35trrqkdsDUA\nsjZRDjwVvdNvIxCtl9bKNNOjMgnMqYUDrk62+bZO2gg4KNbwpd7pM7GN0Sg7\nrXdP/Lf9CUJqnnbMp7KJcnZkkEg0rqr4m/Gfl8uLvS/JPUy8393cigDrdkGu\nidRYbQSB6HhTmd/g+6qxuofhP3W0iFnnlmUoJTIqR3px0KvQbwYBFlMmPc2m\n6ZL9kBwd4ZhrpY6daF9eNHOq87sSAYBMFNGY91KcC0lQ7IfobeR+hdRhSUum\nz8CEVgBT5QX/yAinC090svPKiVpPumvv0gZGsSnwag9D0k2HojH1/SgUbhvF\n/PiFvjHAkpFiBDEnZF7wObo2qpRVPf/L+xUmup5+YO4vfKwhnws1S9PrJFb0\nLu5bxzA/ahf+JzwGyVTjNyd3FNEtfLmnLOUDSivlsKUqOPFzR2+7pNSpd4B9\n43xVDz5xB1eVf0+6BU6obT1MTf/AInJ0+GpbUnqp2cN+4if9fBmkiaDrri9m\nJpWA+XwFC44PDhkKW4agxYlBjDJorh60eI0BY8lSBmWM7dGE9CCxyiBW+V5v\n/OTG\r\n=j63J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/touch-target":"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/segmented-button_12.0.0-canary.068fd5028.0_1625771032984_0.14887381304362024","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6dc7cd1b3c9d13e9a203e8bef0df1518eb77b5fe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5dfec7a14.0.tgz","fileCount":55,"integrity":"sha512-dGDCTm03mQsjAunSyUQJZ/SeNQBdSDBHKJPh/vdlgqn3Q59AKtqHWM6+udE/XUmF/QtOxL+xJfynUbNHylU8UQ==","signatures":[{"sig":"MEYCIQC6OntkE7+cVQpEnqE0uWJGPK03DxEcOEDOmKuMpNJAtgIhANRuPKHfzs3Mi7ZQHFFhLGXPeZQHXARkiO+fjVZ65hCh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBICRA9TVsSAnZWagAAdmkP/10JmxvdfIAO2ztL9M1q\nF7AEPEBReL4rSnNFHMHL8OIyAYrpnSr2p+jjFeDz+evkY3/qoJSPFdYDMvJF\n2lbdslZuPDCPBGoGpXM+MLfo5zbXROYJhq8TilOuAJBEc1DMnatx6+O1PQ4e\nHpQHTNBbes+y9XeflXbMK6oiTUrOU8k7+/KLtO9nG+9ApRUU/BQokQM6kcT9\nF0KYcHMYDoL409QfMynND9cadhVim0YPOAw2JTcZB5QFP5piiUAEH/j/TlAN\nDlgdXEzwUyJy7uXNxrnG1HPv65ATEHFI8O7dryvfNAP13nXtCmBSPCYqvo0g\n3NdEEaYekIa6sxHR6znuocem0fh5j57jbxigmbpff0xE+x0l0bYezrOxbmHx\nb8aEW7LuIlQ+fXSn6NgtHr5YuA5AmH08PHxPMMvKC1zjYc8d4iebsXrg1Hlz\nNshb+KsBFf9LRZx7G2gDzYb5HOHQ57388onzI/GdV9u5Dh10RYm+wgHpjyEy\nYKNNAKV/DmIfhWVQP0cRczVRxG0Jbs7yENhMzYT3NHSnpCDR5zRXgmUyphb5\nvviim2MssVJqf8p7ys7/6riiigMnUb7mNn7SyQ5K2ISFIGa7wF3JrFSXTVjs\nVXh7XD6jKC5aTOIS4UXoY0GVgB+vtZT4g9dpP/sFoEB6Ll3uBBGSdBcvl+TR\npPWC\r\n=ZTiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5dfec7a14.0_1626120263638_0.34692834463731304","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/segmented-button","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"27dbe6b3d40f7ad5888e53276121c3585047cd8d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.07a73750c.0.tgz","fileCount":55,"integrity":"sha512-+NYgy5kJQNh/OPlyasdxlWR3znfsj8CUs+V1ALQQI+Pg6Ynzrxrwc8H+5lUnC9TAXMHt9cZkjmlrRljCjcPkow==","signatures":[{"sig":"MEUCIDTUPnQuw7T+wocl9gbxPQRTTBXRIU+d0hIZNdISz3WAAiEAipmQkfY8ca8F97otWvhVsYpK91JH/ZPdkAvLvrU4D1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVFCRA9TVsSAnZWagAA14cP+wQA4hvvppOFHnWrfa4g\nafIk14Vnhxzs/fLDHkC08e5iDJ62gaZGAJzYIK8V3ztqpvwvvwG4VP2lyMMU\nr3ExbPWWvdLw5g9Dz1BYNWuHJW/OUK1Dw7BD4OmTwW2JgA49vtp7buMOwcn5\nwtGoGidcse0XOyC/k9wU2V04CDZZtf8BfKjvOTpjz1M6EvDQxyf9dNF20tmw\n56T8wNgRiq02JOD1LI9MAr+W31D+nSDAhEleE5dUNLAYleegE3uzLrv/WHDy\n8gA8pCsJAtMm3dWq0jBNmBPICYOMJuiGJZ9ZTTyvolC6GzrIroLsT9Gp07BP\nR3SOBBg1f4gSYAKkStM2psD9qbJZio8cnOgwXhM1FQ2l7Cbe1oj0rPa003Wj\nlPDC7rRYNY2KrK9R5w5n8Uu6qdx7YtDvStDI3YIpwuXZw9vDBW1cbwO357m5\nwLj3HWZdvy8UMhmre/ru46oQ24JiFWTff5FmjV8o15ZWscgh0uE/fKUpOYMo\nWvm/MLp7SGEDw9oUnUjWVNUtLMIMbTwoJfnRzruMgxpPwoh0fS3WynxvDCUC\nxXOuhE7ij8PujMzp5pefIZyR4GT6Dy1548Q3nhJ7E88FRqmd8G4yRBk+zaOA\nlnNSl6I6/FRGSewqLyo+zjxVw/F3tIfqS6E0dDrc89WzJpD6UF0GmY9uUkjt\nV/ma\r\n=xHlC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/touch-target":"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/segmented-button_12.0.0-canary.07a73750c.0_1626121540655_0.8883356278543826","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/segmented-button","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e63c90e8022a7d2dd689bd6b555d6a889c8e557a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":55,"integrity":"sha512-agpfA4n9MDXSi1wFVdP9bVFhbDAu1m9s+O7uyCqJecCYXgpa30LCL4SjZV7ZA7Mt80uctRVhPQXSbZFdzMjeJQ==","signatures":[{"sig":"MEQCIGdAaUrUG+OgrI9RWoa3FqEmQR3r5jkWTqPH3/mbQqZFAiBLD6zaESdSu45fVuUd3LFKJP+KsGxo8e9Hn2cHU3OWPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGkCRA9TVsSAnZWagAAfuAP+QHWN4SIyAa5c+RySQwy\n0oiuDYxS+DhqN+gUiJN+9uTD5krT+N4TCotYIEfHVo/vvKWt28tG5VcHj6q8\nx0OZ08v4sz+fMQcsQHzcwaW3cR/faryUFba6fDs8NlHfQIS7q6F61Du/tiYg\n6hArYdkIHb4z0SjKVFR9XcXRasekz4ldOTAv5jw49IdbKFySEgGcnWnNbr4O\nts2N1y0okptU3uH/gNq/HOjaiR81Enm8pHPUfOuHJ65kbEMbAE/N5Cw2FUSg\nVbJktId6ye4NXz0NvCoyTvavMYd01c1LcuVuNCSTYxS3AF9WJ9DVA4FskDee\no52p8RZjS56Nr9FvNxUpLsNyYhLNzon2pXiA+Lm3NlbzmtmWRpRe11UkfMBK\nDnOQRwY6SlanZbpLy//O0Zw6WIAPOcXym0cUIClOKm3NvMldmXHXYCm+7Fg9\nPn1v7B1HirmygWT8UKn9Th8//Y1BC2Yt5cga3wp0v8iawlrDy2yxfJKUDcm2\nENR5A7svfxc/k4vyDpqPBuV7dnxSGGVTwoISOkki9Zkfi7FIsIjQabrZ7aPN\nsT12R58dddueQCuCHgLiYfZg9/rql588OC+bgR2dTrafVD+WZBtlMmD68NNu\nlyM0z0UQX/xhfzUyebmtsSLZyeuOzBMixbni1TBUZsCirztmWHbs5JL7XYPs\nHgmC\r\n=Lygc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/touch-target":"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/segmented-button_12.0.0-canary.3e4c6dca1.0_1626141092384_0.7078808165063892","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f18d1fc15ba03c0946cd30af2d2931d7df3cf14c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ea77795b1.0.tgz","fileCount":55,"integrity":"sha512-u2Ei+JKswmGKwEAgurid22fZ+FAQsopYIXGHNORusFZt8tSw2LdTO7IrSVzrp5m4ES/LZNXRNyRmGA/RVuRSZg==","signatures":[{"sig":"MEUCIQDyer7PS+teKv5L7zDMVigsJMQSlyr9iafn6X+w7sk42QIgA/4movoVIIX1HL0S78B/QHuBDWBAB7+JfIO5c95KjUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYPCRA9TVsSAnZWagAApz4P/iKXwX5xhkL9NLoEOo7Q\nPt3G61/a4o3v32n+mgcbFyQ5ZwZHfi4OMimyyTe8w8zUYq3xThIQPAYIIZ1E\n5mDRx3V8KtyEKh/ty3rqyGV/lUnDRnQYWBPNtClZEAgRiPODjjFtIc90Qjmh\n/VNUE182hpKXs1IR72BFrMO2XbfsHHiJ78PNiXJhhA2aFlpqqWGQvCJVwjS2\nrzeH2x9CFYKSZgAPlzyZmW4pmhSUserIRLHnhY/N/v2ko7W0si1TwpajoRtT\npWToJnfm5Glkn/kMPqcsNo09Md3MkSeF2Qh7diq6iPjGjkGW3U/Zj2Amd8PP\nHKmgy7PEBYj+4E1nWzhlfnYXbS+d0HF1PjIBH0Re81NN1CRJVea+M2lfkS4I\n1YLfNVQrnVW2wcsrQd6gFC80xCOsthmoMrKBBpeK/8NaQZDN/rNZRB+GnSxi\nQrdGM000bxaB9TAwcxD0LN7VkeHElseGkQ5QSymUtHGbI7EFIL1nszb/lyG7\nsaSQ5JbYHM+4onrUOm4Uij5hPSIzP18K30RxYEoKiL8006YqI9LvsgWSVbVi\n95hFfWUO/o2XrhsmaII5Yp2cYE/D1U60Sslq54ppT+HW8Nplzx+Zdl6U8ENB\nsobvLT3CHLBEYz5BeP7MQfjtAeutrd94ADm1oKAQnW8HDVHM1SkcvvCjaLLP\n0vHH\r\n=dpsg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ea77795b1.0_1626191374393_0.39162464688801446","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/segmented-button","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"80fb842d4b136ea1f1af690d2bd245095e779418","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.15a179fad.0.tgz","fileCount":55,"integrity":"sha512-QY0ArlG2t1NtWUhyI4+sMwrvDN1t+eYtGjk1u9dK0BrQVBjbB/MX4szZwBRo12h4B7ctWxzVVZFIAbS/rOXdgw==","signatures":[{"sig":"MEUCIAsreDmTpxdwd2kyIUf3UXRv0y2vrynu+KJUengsUdiYAiEAqnNX5IDdQjt8gtxcXBQ2cu5bu9x8XRnaPddOwW62QHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbjCRA9TVsSAnZWagAA7QwP/RilrkzS4e75/kLw+4Az\n2V1E6l/wEkgrcApYvL1vLdPVic+f/rOww58WhNSp7i52EMLtgJiJjN8dHuyt\npVBl94EVRVez/RL1kG3BySY67K1GTfWlt2oKa+9XQtQ3e5MUYv4uS57cRwlw\nHiQhM+anKCuU7FG3liASZzJNrdyOJ18t1YXt4TKoYu7VYfg2V9G7chv5nNut\nCsJgKclxCvbDo5F9LvuPvaERs7aORdLvEY71maD4h29ZaYn6ibqBPSRSoiQm\nIvLBoTHCGJDNfhncntE8IjfzzRCaDlbY7tWmV8R7TnmKsWGwDyXLjYQaxVTB\nyBV7NYSpwPNuP329CZo3+os2yA8QScFyGRqIjeCI/Xrjoz9JmqU55kq7ywCi\nLiA/g7IHROPNkC/Q1M/DWk6o0HYmm5L3erDzg6mqiUISwk9T9JCh7IBG+2Ex\ngmAniH2+BGiyivOLfzESTKA0iRpjM8IN3AmpnLzniU/Pa4e9f0hb+d9Am2p5\nY0hKPyYfnDyxGR8H64GG9UYwDbwDZPQ8bHZ9iwxifr1H44MZus+/PnCNYYpJ\nCDHl625qdAuXQWjSYJG9Sw7f7VEIGLDb5pTRKxApEDCkuZY87uu2zgWAPmnp\nkRjj0h/9BNJupxGVpmEjO2GclvoCnQBi9vDX7TKL/EUzXT7QQ6EBnaHV11d/\nwKCu\r\n=rBuq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/touch-target":"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/segmented-button_12.0.0-canary.15a179fad.0_1626199779477_0.16249899974952942","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"88d0c057a422ba69e9aacbf04c76c151c4b707be","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.c73142a1b.0.tgz","fileCount":55,"integrity":"sha512-YK3a/5rvwN2pTcxsLOr/I1XOPua6ZHCXYExa4pZLcaT/zxAhw8EW/vbZopjE931cK2sRmMfPNkHoJa1UOeSSsQ==","signatures":[{"sig":"MEYCIQDCTp+PnOF8H+jbBr0IyUphyN1DtwWKizKpGa/irXD1LAIhALREVEdLkwXf3DriQX96QeUk7RLix6sCy3VG+Lne8tgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8KCRA9TVsSAnZWagAArk8P/iJ48mUPIN0wH7nGzkps\nEFkJs2BxKfarr4SIwQPgEvbqu7chAlWhFlFjT7wXP4eunzkNoSq6TUaEkeA3\nkEbc0jzMAFwSm4YNH/rAdAM4GxeTyZjHj4OdbhshsyJU3yhRj7QSAtm13xYy\n9mXdtUILhrmzslNZ9Eqr0HDlpbImIHehQaWlXZPEuWW31pfGuAsiKeiyKRag\narp/LAKSzFi/NwcXYQD2/YI2uGB1rgjsOM0w3Zh/33sTLlHr9Tt/sgDWJYfB\neHDQ9tuBWEWjnYJ5qpCw+aqM/hSX2qiDKVv+5/daPAv1++L3HF6xcp82AqCF\nr07z0ohdQBwgU5raatSeVBqFzcnwRO86h1Mbbq61V19r70uGBWwdBi6hVBBE\nURigkFvYOV6nrnuYlZY7IDFNm9ctbFdozV69P3HhleynafC76qRqS+00EyhI\n8DNBjEL3pDYYU/FMCy8WUJBGG4rCD53KYzY7tRzetLtvrNX/ZV9cbCgdynC5\neGl8lp6XCbt7+n6diHDN8tftony7GvPH2yD18pfqS7K1v6+pzVTjfnrAOwSr\n9C8QtRUpv3z5up/L5lGkidb+t5h9YLq26thDVpn41FqjSNcTpOAsNMDKGSQq\nUNre63TbMF7C7Op+sps5xO+Vo0pjSp2GLGdqk4q/A2HsNoHklB/FmOYAdood\nQm12\r\n=/N9j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.c73142a1b.0_1626201866462_0.7268081144399554","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9154f422a220686af13be1c9cc05c2d7586bafb2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d923db73a.0.tgz","fileCount":55,"integrity":"sha512-sgj//UowubiM/NN0QudhQ/iEcQDmUocNNb48MoaOcojYmMo/ZnEEl8K5DvYgrHP+SrnKv39ASVkH2b+Yq9hUig==","signatures":[{"sig":"MEUCIQDamf6D9zLG8I2ZAhVJgvUJLuJnzbloOa3jYFgswd9sogIgOcDW3NSCDvkakLxLlVTcy0/u7aHOPIfXUn2xuYynYSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1xCRA9TVsSAnZWagAAMcgP/AtHotoKwN5sTl/GmB2R\nnEzNoiA/Z5R4hpEPXwWoFIYIiS2p36HHwa/JosT76IguNO7HYUEpbfteofJU\nBTi7UXxLoX/ae/d3ySPce8XZn47GE3+ZZv/3FodN446TaqrJySEO8W3U7TL2\n0H8OnhYqLucwIlkvSCfuyFHjifsicEfndaK5pTRxfRX6Eqhc4FDObFq5ewnF\nlGt6/wFsAhA7cKg4yE2ACL/UNYyLZx0NLy2LO7kCUwiBXEIUvYRC/rWHIt9T\nv8Kanlgus486iEe+PbNCGR7ZJm2rydBuR+R7J6EXER+rUIow0tbFF62Qh2Df\nrAhRjSRfj/tlJ48+W4aiOt6pSdD7G4aKMnM48WtJxbVHgQiw9519PPyQYvms\nav8bCH9v0lMas3WGB693Ie3XPxoq853p2EOsWZghuXKGVbjEyB/2/fKLPqrT\nnvK1v95VJEzE2T00Ogmb1qQJB0SgZVxWLJfxzVmpIDGYqXn3b0R6v/b8FXiU\nHVx8eTXpwoaYA6vmYYjLEgVE9q26Mn8bOZlnZWHqDY+ew3EFxcGeZLMdAlIs\n6/ItcbVYkuR+bMa/19NOPlhY0XCXFkHPKdaIgGxm3ZmzDAXw3MDw8q1kD9Vr\nzxj7c1rTGgNoJ4+3goo+WzWFDoorbBMzAWhSI5JaSBkKWi3/gqTUZqOhxvaG\nzanw\r\n=FADb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d923db73a.0_1626209648854_0.9012331310103558","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/segmented-button","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"48fd5664353611df7a3d3b23fd7211a87a53ab64","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.22d29cbb4.0.tgz","fileCount":55,"integrity":"sha512-ukr/e6zGdETLwpvXxM4kc0lgh2SQzXV6Nuvk/ATL3vE992n/HwTg6CqyuTkLT8ezFutjfaD5gLJv/0dJd3OO7A==","signatures":[{"sig":"MEUCIQCNtSGs/8xY2QiYeoLY5+n7gEbKUlnGYUKjHnNTTxk6pQIgcsOhv7bwhjP3glnV/fb5+c6aFyUqZMt0XOWp6iCoVgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjFCRA9TVsSAnZWagAAEJ8QAItrXi6qWI08PFRvAXSn\n61PYSlP10tbK8qz5I03AWyoWWEGmMO99+hHfGRkSZ+8VwoGWvw1hnnHZFJ3N\nMo1Rr66VBWRCN3oC8F8NY7F2RgKEQvu/vyYcbOK1kVc6Fu0dpEDsboP596Eo\nps5cfRpY+YWyPGvPvggfuy3GZY5VP07YXo7qnT/bCNgZkHJNwHz+/LnVfmfO\ni/qayjicSSltTXHY26ceHRt+HE4aSTuARFjf0UaNJJ+EwM1zFQZAIcfuYNYX\n1c+jWSZ5pNLUqkCaxVTWS0M2mHm/zI2ajZysycIoA+KR9c6fB+7hueMeBDGh\n2Vt1V35peMlK3S0IEHoeQDjbJlUHFmUhbAOSwBwsVMwxJlq1Bvzyn053GxT5\nj31+Gniy6a+kBZHgnPq41OCn/77J2gL4GihVCivz7jRVskbxJydjsNt/Vs13\n/Dz464aU6hv9gZ8pOdrdLz9q4NynZRAe0knChgA5gsEKEgtN5+7XfgmpAvgb\nwFSswR7YM8qNkCkpEDyLW+aw3Ba21rY1iCmYfTVEFDfHesdSsrV7bpRpnH6t\na26S9lODpVPj7MMWQDyHmkAGh48uklzJ4QCuxdU+2rrbDVH1+BhJKKAsqTNJ\n57C04eeGSvS8+ig71q71jif2P51tBmFK0zPeuVkq0LPmgUTksKM+ANvlFHPz\nYdaJ\r\n=S3F8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/touch-target":"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/segmented-button_12.0.0-canary.22d29cbb4.0_1626216645203_0.42932468466672646","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/segmented-button","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"452269ad8dd75a0c965491e681b2e159e8b2fea4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.2749604bc.0.tgz","fileCount":55,"integrity":"sha512-rQyMAXtczaWCgieNXNulP8nwiINFips9Ys82h7DDeG24kEj9lHEpikDvcROdEQW3ux4jE/00a2n/0UgQrpAlDA==","signatures":[{"sig":"MEUCIA91NcWsNkwK0lN00nlPql+ceO0limGl690NSMC47/RuAiEA6hz6xvpvY/m0yvBS//nvxm6t5+SgPffNShnTLaaPMok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9QCRA9TVsSAnZWagAA7UkP/jc41sOtzgrEDrsPcWye\n9yMNccbtC5vssUqPXwk+vpHEWGhrM1EnY5tV3xmoDTckwtcxpr5E4NnqKKNQ\nbe8e+eX0TzHRzgrHnyKzQpPR7IAioB7T0ghVgri+otDE9BesPYQrIPaN3QPn\n7OHM2/LyYn+1tquKdS+1X9vTZHstK6o1ox3OWjlNoQlCZBYsSpFCbMB+QkF1\n06LZ2XAZJjMzr/z5o2TOJ6xLCjA4MtdBBAJIZ9yzENkla/rpa1i5DFLE8p9y\nnBgFjpcpZkOYwgFp7IiLZA9U7dpyZFYl+40ZQXWnf0rpiQOHicEo4R10jn96\n+Azs4vdevZoax8oytKPf+SuHWUDMasqTYthE4H+zD+g/LjYIbM1bPSTbiRvy\n4Iq1MCH/xn1nm7h2euY2a+I9oHyOvov/UB2SZLs1adEhQIoTgKZob7o1k8er\n7Oni4Ti+TbxNE+rWQXHkk6TyNMQNCvX4/cETX1aHbVdIpAyc21I69eT19JW+\nGhndrMEAr/np3VQQWoCdX8ZumGKibXRa9SPBxrPY9WGrJ0wUt8CeqVE3f7da\nWUPmXfF4XRsSwL4esNKcRELOBsrfki9tMTTD0qZXKVkLpnwsfB6bfsdyNh8Y\n+jTcF2gC+JGYHd9nIK9ujVgw5ZdO6lC2g6PZCJp+j6C/k+ZMs69lzWWhlIea\ngTcd\r\n=D5Fw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/touch-target":"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/segmented-button_12.0.0-canary.2749604bc.0_1626279759700_0.04153158856447581","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"54b41f6bab01fe737847e9c85c19819cde966c00","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.e1703bed9.0.tgz","fileCount":55,"integrity":"sha512-vmoTCkTtSIOsPt5bo/wrSdLjqIPfMmKjIUMv59N7Js/zqviReCxuwuJNvfwmXpbWwYVISfCtmKLDJqJUCrnk9Q==","signatures":[{"sig":"MEQCIEq3m2nxMkUbp0rY9KpztwYtahRQ7EgeABOS5DWP+2DPAiA36CvcYs/AYKfs1aG33LOMCc9zwMOeAxqvvX4Alsn34g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71ujCRA9TVsSAnZWagAAJLEP/jbj3tDnWAbxNTok6bWp\nGtZ6IEup+omtVUwEkM2z+K/xBQMLu3amAcH+MJIekeHXuwNDGHHDGYUvkh61\nIQLf/u9EpbkpEpIILAeL9CgSeeB64jk4Lti7mnlieYpTSTCHoDd8lJ/fTWjk\nnkJpGsKx1yEuC/2yRAQTDU+XrSAzkwfxOZv1O4z8rzMfks7fPLDhwkKAtjQY\nsyNC5g6zYiFRAaOksHIU4CtzmYcbXt9CB6X+NNoJQY9vEqL0N3ynpBo7I3y9\nL5hRWUO3S6Y6d2t1kADHrtwsctvYlqWHFuYIAaZA+4BJA5Dp03IPlZMn7NfW\nAcfS8jktGJd0GGe4OZKy7gVP1DrpzBZeJdK7keF18iznoP86LSPX1tqMhMwi\nhnMyzWnkJoVhdVAyVbjA/myrPtcmA8vn5LhVTHUk33+ABEsbK9oO7Hfj3Yrg\ncnvPPBDveoN3o1E52qQjquAN+j6MGjsBaDnWzh4vs6dMZzF3yoE0Fn2vA91X\nR1WC2nVv5ywUIkaUkYNzaizSwu0kjUd0zQGLF0FaNY4cpIfJAPsL/8gPOVjl\nbX5C0kWHas+fNtnQEyuaj0dVy1L5+dQjkv21bex3wuzFNQkYaBu81MWVSsQw\nhwumEly8fcBIdr/9cIiQ2IQ8U1eLtA38DC/e+jKj1X0IJ2RpNSnndafH/Zhi\n1NWT\r\n=7OMx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.e1703bed9.0_1626299299080_0.6395647913386351","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/segmented-button","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a39a238f292e1f97be196534ba6c4b0a3edf6a95","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.de48eff0d.0.tgz","fileCount":55,"integrity":"sha512-v5clSP4xxLS2sWkHwRXncub122sJdcI5VC6urALp0VhhtfwggKsHX7nTQbXHn37hHICO0jLVKkAH2yyTFBIXTg==","signatures":[{"sig":"MEYCIQDVG4SuxdXshE//2kyTHACzFrDJVSsyd3rIy4IPoWwYuwIhAIQcH0mfwK8TCtBury4T/LfjtI142C7w7GfIBBimtw9h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GuFCRA9TVsSAnZWagAAvZMQAIWt4KOMa1ZC8iU6dJWW\nZgygLVDsmEiV8qvk5+ZQzjROzQ8CQdhwLl4KJHsdHtJ5pDIOcriip3AZ9ncI\n0O2MvrQpdeVl5d6iYj7L18vjzdXuUxz8AssTQ+ET2gy8HBFVnIs3hV9NdWLc\nlwXdV/eTCEQq9ghpL8+OlNTBQfdrxq9VNXl9GmiLc/5seKC0ZFADZCTlwLms\n0gJJvracq42LePbLOGCqA71cROdPIwMjYfL9Z70UmTpct52++ZQUMfrNwZdl\nfTbjhRmWw5aUJtwKBhh7tjG4hWyO5igIgky0M4zlxRZzL4Mt8xWMnN9+ob//\nQI5pvYiRDla2IUDFFqy/+moPxpzzPGK6H1hXmhVsdJqfsk2BBLOUZC0kDaI6\nCngNx9CKqgm3opfFHAjZh7Vcvv0Bafhrt56Uq67HyfHx8Saal6AHTstZhMZQ\nDU3Mq2bVkBeXODUx/mgdD6lh2PuYNCMDk4WP7BtT6cK5fwV2xRN40FDNkJLv\nzKohgeBrautEjcAHHAToa+UOX9eoxXL0ostGde8tx0SJcZJ4fYjzPq1k2kOu\nGXhBdxcZqpwWX7/b8NGLtzCaUdup1oAFbznWohVV/wlW+Bz9r+gY6nVotg4W\ny6EmyPc+qHnGO3bHxpsLVYr5HD3Aouh9pug4bCx/AlwGibTBe5j8nc0h3aH2\nbqjI\r\n=eN0O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/touch-target":"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/segmented-button_12.0.0-canary.de48eff0d.0_1626368901065_0.9806219930712456","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af680615ac8b7217b07ecd010128633993deb929","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4f060adc5.0.tgz","fileCount":55,"integrity":"sha512-tefZn9w24awq844+RT2rbYj3PnURt1nzc9PdoUj+Xj9b+/fvbkQ+2QG88x8X2RcgODDBrm/Zd4EJAp7pJXMLvg==","signatures":[{"sig":"MEUCIFsltrQt61WWSH0MOnI36XWQp3VXcWC/y5fa06pDeC1fAiEAvyZEKqFkJjH2woCRriAYzBlCIzG9N2nwFLlC4oyS+cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrhCRA9TVsSAnZWagAAWfUP/3NUTNzX0taAstclOo4L\nCMg6HoINv8jbNorMWw5Bz82UGfQhY4zW6XSCYcraRooLzKyVT/4kp5XXrYrm\n518qs+Ac/+zPKDP9UQoSESW2SJP43wKgs2/SwRiRs/QGM5IcoCu8ijxrh7+X\nKm4CcboUPo4B1sXatsyz8JJPkUTvefRHRUUjKwBTHsfjSnZbfYJAVCsobyi9\njdbPjblo4Z62o2WW9D8phgpQe0jWEGb/YvfZ3GzsFOo1tkRlW07hsVuQ4FZE\nTQYtJsgva9dIljjxA9AVXq/silJIEWcFlr5sZT4Ps3XheQryc16+zk8UzuBY\nzZ2KHex6h2yIx2Eu0uPWB0UwuYccBB5aBBblu/BhiTfAFbZot6TAKu7axyzO\nDM7t4dyNUIMPmhAp3WJPY3LomMwVrJkUy1trdiOL77KPhhkh7lH/BwvhzZjv\n+TeT21y3FAw8WoRSvl6U62K4GvDzojS5svKLVmDF/It56otZZhS7BvLLVxZz\nIw6r4E4+YJk/cQp4rzQN9EUvbzXb921g6ic59ku0XxvuKWHjkp09x5G7w/ys\n49SwKts7X6TD2gJSyDeKKtw3+LAHRiSSvTUV92dCIDjd+7lH6T12tl+l2Wmv\ncLm+1UjHr7HiRwOpdPp+LEBWpn6mmJ25cUAYBPZvyKn4Zo9bC6p0hOi//Iyi\nUg1A\r\n=cjHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4f060adc5.0_1626376929226_0.11156044771520213","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/segmented-button","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b90be6a67381ef1bf266c9df10fe2e33ef606ed5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.bd25779b2.0.tgz","fileCount":55,"integrity":"sha512-9+MAHPNC7wYTPr0UpHRB4/cGBJtWs1W23tYfOlsPxvuhGsB3CkshdXgHkiyybBhpKJDSIcohcSHiyzakbeOhqw==","signatures":[{"sig":"MEQCIENwYG1rJJr36IoBOeIdn703AXGU3/Yo8MtmpzecOrf2AiBoMQ4hf2B52o0qJfQTuW52PvBv1XbZNQsfcL0roK6P/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J24CRA9TVsSAnZWagAAhkcP/AkRLEr+WlkHja/Zs/QA\nA3joair8pQhdJBtXO7QuzqA5DKJoCBd0siykOoG0lnHy1Ui+UoJQ3hW2hOCd\nAlHn/86WYw3UjReYK6XHAoC2WLIJzbDBHNRxCrGyayVmYzN2b+EIBe9/rJz5\nznLYkbLEgTHeNrSq2YYgdizmLWEqBWBp315QySTKCv6F81Z76QgCeQKaIdW8\nUPrjyNVijDheRg6GG/1J7daPvgr+BXJmMZkGjA/5FzN7kWML7Eg8S4iHquNM\nQu6x5F2sLEUiUhm1sUVzI8iMNueYvtJbJl5uMXOZsB5OVUBgnOCt+Ge1vP4T\nUZ/7IAzFjrXsh1VlFeGu7FiG9vyV4r5I5YQYGm0of/aQoN81afYNrl1DRol5\ndu5+kNzeeIWE3BAEcJHw67HBsCUAW/ykdG+mJwuwmO9N+d9F2l3LlpfVb92z\nGM6khVNDFseaQjyWdHPyXUyTdsgBtYz3jGtmxHQPjfQ/8O31Y7F58cG4/NSO\nIm77eClJzV9azOOz3OhqqyePK5TDPEbvl8CGL+V8OGJUK7L7/aZ26RTD5r9Q\nU/UwEzTN26pS0XIsxsy7LOxY4Gmigh5R4fqey/+AQJr2BJ2jNxCPPvEReRDo\nKld3A4t+9wkB7MfAXcmd9+acVFNN/fjqphZc0FM1IGWmHYWGHxmHF85kr4cA\nR47d\r\n=DFW8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/touch-target":"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/segmented-button_12.0.0-canary.bd25779b2.0_1626381752217_0.5214423361272547","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/segmented-button","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"704832e2e991c9fd66e2b8cdf6945a0581e182e2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.9f68a932e.0.tgz","fileCount":55,"integrity":"sha512-uI2CnGyFq+ZSPDbgOvRaYnlOPC6N4gDFd55UTuEQ6NeZLbVMhxapUcwPyZGdRTAjLjdwKDaQ+Fe9rshe/AbLwA==","signatures":[{"sig":"MEUCIGgSEWSyygUvk4EXmc2S+ZwKvmggIFD2nXDBCGGkev3SAiEAyEla9DiOJXNk6Hw1Ue0TJRlgd0TO1wP6v3l/4lBUhFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGcCRA9TVsSAnZWagAAdEgQAKPEYedrnePKFiGtkv1Y\nQJdE9SC1vNZ5E65a/Lq76FZOkOURAYHVD0NxLqGvaYeesqxfsp88pd+HtpDr\niAiw+eeZbQbsof+hWGNAkCpsUEzw1Dif7hDLejwI180Ix7bRXTQYr8hjF3ky\nSBXBbtqXHr1UuHFDO/c4wdjhdZTQ6/4TuxmkFVVXyJgYTSNvIb4Th8Tvjjcg\nd5YKxRn3Rg+WpMaUSVuMYfuWdXh5VkdiSHojfPtbOvUTqFJwmgm7JiI9z0CF\nzDGB1yFpqpsZSFyHwEYphpRzMZ8CQOKE13jnFO+DHec+J8TP9jbrxSrqkk1O\nXW0/RnSpCdX71IC5Lj7kpXYn6dfaI+Bgk8BmvRgq9E01CTB5ezAR0sgBecML\nJO9bhUSFfEA6krrQdYo9ZlT1NLlcffH0Ka3aJ2HgQ6vPyN9AALenEcy7+W1A\nBa8ctMl4U2fzWalOo331xDphpDLK8Hv/rncgKJwHOA9fJ4CL7PxfhYjVOR0z\n9roDlBNvKQYNZM0I/dwr1gM7Uc3w3J6mLbZjRONYibeDQeZD4lMrR+5Bhg1M\n4OEo5a6+ESbJmSB3kMi4NYIgKPyw25AHBmX9Zrk8hNo/MDcuL0TgQD4LdRP5\n+QG7eBIKlxBcfZG5KSlwPZDJbvghyaxOycord3vH9P4DPqnMD43U6uiufd/5\nEz21\r\n=+JfE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/touch-target":"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/segmented-button_12.0.0-canary.9f68a932e.0_1626386843944_0.9041746687181709","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"23acb4aaa377edfe27ba6a972298852acb1780f5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":55,"integrity":"sha512-d0MkX02kxBBulLVekAc89p+L8MYsGpzHMR6nc5fyZEVcy5dTyx5t0csx0oK9bLIOPfzWpI6pmvMWh7ieOGiNRA==","signatures":[{"sig":"MEUCIAZPFXT1k0hzrRK8S13pxQDVOvX6g4IKYi/ikQmE85TFAiEAjsNA4piXr5dQTpivaCOL1awZpWKrvW0ZffJQ/XHqyAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6GCRA9TVsSAnZWagAAdkQP/2BBvqRE6uccYssB+fA7\njNnx2sZn0KoT3vr39/6IbpMijDgsHfVRVm5b/wuMajyOOgQ3WXnHIlcd6sgp\nxmOOi0Gily03V6ieLl1i6z25zIVRShy6+0XesrDvQ/nan19qNGta51E29vuo\nl5CVczxAn+BdYXYQD98/4d3OQMPa+tigL0PVydmpaBsfBY4GfEYqt6JN9yBd\nplJy3ji85WVDvO32c2U7i2Y46gqmQnJu9dJw/2pLoMZD8lagehTl7jy9fcaG\nzekLekdcOuIAOGqUyK7Qo/T6Di8ovrOKpA4IP1EfI8ZCAVxpWJLK3Wka4xhc\n8qxC9wKnpHAfD8u696XNNjbRdxDevqsMDmBzOErMbZ7KxikPFSxfAVttwkGa\nKe1d7LTGfQWuWomTgDXXnLWumqiPkBvKVjjuN+ejguO65K2yIwDOdAtebO09\nwbHPM4vTMJkZUXTC73sFoLfNU94waZrsLIbpeyUiKy7ICoaUjEId2hRA9s9C\nrgjPpDMbxkAVhwsmfXI6g3tgSf562olAN5JezsvmSEBCj0Lg0vcC5XX5edHk\n2+N9z3bSMPkSzpOZKWaoYs0EYCDNmmx2XXb1AokZUaIuTBZwxbOFMRY1h2bu\nNsI7xPI8eFGRhM2WNGLjMguRpGi+LW4IoEP/ikIUxaqEOsyvwz1VVQ43theB\nMsDi\r\n=LQX+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4eecdeaf0.0_1626447494757_0.8011469122437969","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/segmented-button","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"919dc90a6e7c98b0115ce3636500c2720f4cf904","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.7239684d4.0.tgz","fileCount":55,"integrity":"sha512-muF+F3N9VLzsuWxf+uTNyBsMaJVgoIX8XPs6B7lpeMk+eO1zxQvsVh2kCCUjpH3hWXakjk2uZoHDF7NG0yXa6w==","signatures":[{"sig":"MEYCIQD5FLknwFyro7JWt0SZ3Dy2tAWKrFsZyWIX2PLRI8PJygIhAL05m/CyflB2yYRvlkqLsUl1gKQsTBekaGMXs78F9JH+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azZCRA9TVsSAnZWagAA5IQP/1IvA4feBbpCgNotDz06\n9XfXsmnSieWX1kIuX1hWAohsFOk2mQ8GI1N8fE34V+hW+1VBFuX5MhHOHmgc\nBsqbjRCAzf5MzL9C1hcBjZ4qhAZ2/ThVZlFid9vdv2ZOYhtVtU1uTXhAxGHS\nUmdirIyKRlu2Z+TjVQC2PjeTUej75GHX50ZztKpjPikACvDjtY2rANHG4vaO\nsiO70dw0T7WxJO4uXt53i1bnUEANeyJy21Rvp0NDWk5c8IYk997aM2rOVHqq\nzBPo2kKzhNeU7QB1MIWYO0BktLi+kHhybqDWtkvdCJluuDW1eqb4QkVPlVMR\nNKwStbyba4nwWpMtR4/5IyARuTUy2Bf4zB09JCbj2BwkXXbSddWd438u2hk0\nRX3Ir9hPot9H8k1tH51hDDFCsjSQEMmjMW7fhlM+B5KG+1dRTaRiKG/9DPm5\nfEbeWp6ogfUAh0aK6ERQ/J2Hnz8DlT9fXGrNa4R8A6gIxFG0iiV2iUAO4xa4\nR3zzsEEXUn+jSEo+1z651xOoiVZ5gbXSmylgChN5r0QIaEpJifP+buJLAc3U\nOIUYl/M0CpxpOmCmsfB9+4XxOw1UtT4pVrfIWqZsZhUzUJmLuVbodRzkqfiO\ncGhBiQmJkKS8h/U2ZPk9dH9eAcVRtT7IatIhZ2+AYAP1rRW0WwF3hO8qsrUw\nd8pJ\r\n=gbG3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/touch-target":"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/segmented-button_12.0.0-canary.7239684d4.0_1626451161173_0.06747623000452396","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/segmented-button","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1ca59824daad72067c4d2cea09277bfa7dba4610","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":55,"integrity":"sha512-QzxFBNrNfYWqw3Ha+2ZsQjoFGvVz7WZwnGR7VV+z7hCfXJclZ2cMje8R9nGmI2/zNhTT10mLDNUBN0jeb3Yy3Q==","signatures":[{"sig":"MEYCIQD2Yq0rqipSYyL2c/RWIxcQbe/rtL6mzL4SQigbEyF+sQIhAKNVDVepr+eiFlJMBJQtq2hT2IVS7fSnLhjbjS7FukMk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBYCRA9TVsSAnZWagAAC0IQAJUob2k0MGHqrjENIu78\nYowFzrOCzF9EQ1i1htINZxpfxje1A81a+tcynSYXO/P0IYpbXZgvgSjBkKc+\nN2gAo/fVIkqkskkEwpjxTiKQnVow8/qI4zmF/hBabezKbBW/6tF8YM9mLe6H\nJSaQMCwk9Fvfk6Web1ZrII00BZEnSwwcu2dP7C+jHcysgc57WEso/MchnDVr\nJQ+fvOrxkzJrAY2R1YFmRgRmPO/2pTLqrhPFE8K/Upt2TNFe05Su0xCO7JJA\nhuGhIRtjFBGN9lmlOpc2cANOAA90rGQhOAlRt3wp/mYCEAOZ6FUY2tHx+BlA\nwc8glzdoUzBew5sTpMDEX4ESS0TLV+IXTtUeQipMTNAVw2kxB+j8FSA6JAo3\nb1bE64mw1GwrdIN+jjKl3rm4GT0P5LtdGp5KErmOsBbdJ2WyuB49iPYLlSa7\nXIlEoiaTsjZGbFrsQ2tgDA1gSWrds/Y7ZRd2mchXdS8F3q8ZwTgUH7qydNXq\nFjj6GJor2AYUBFn7lAvCSFHwM4LC9sAQkhjjdEe+Kwakfmf6Iyrjwf1wOaPI\nhx+qe99ZTyd7TJjp1BSav0PFjuR6sL6HD6GXVV14TAmBRl6wshRJ/2HuoXhd\nuNljZzm29mY/hxxFpEXmXgn2cS7CTxc+98CywBe5Dkxt1rCQtHuJ6Ck3lysx\nnte6\r\n=jJw+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/touch-target":"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/segmented-button_12.0.0-canary.d5f1f7c72.0_1626452056550_0.8114632694958535","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/segmented-button","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4863d8ff385c919b570be75efe346bff3b232cbb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.4d95812f9.0.tgz","fileCount":55,"integrity":"sha512-xVi+Smf73q3zlxBACvoPkUtbwoOco5L6fGZqsrPIzOqMhocRSNYUdYzOz0tGslTj7xw7U7rGIk7rOIin6I872g==","signatures":[{"sig":"MEUCIQD+NZvh5nK6rqWSgaKwvhd9Qw/Cd6+XT+eMclOTdDyX+QIgcCsJ2nJXLS/SNmAQ4CwoNQm+Q274G+AbriBKf9bZ5dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFaCRA9TVsSAnZWagAAS/QP/3O7nYeDVyEXcRn36YX7\nwOZEQcr4BelLjmxkRDZR4g71///l9c3dGGPazhGiCf+t46RTt8uzFljpn2yP\n/v31LNYVr3IVET5z5pbqimwSjTa89lL3ZNPxX99c2MwP3a8I9a3toTK/LXOF\nx00584KAYfy8ZvNvYQCSYoFPnJgmeUnTdru+KbCpThF8W4ww6sSNAtesRAsb\nr8tvUlncoJ5ONwvLuOOP1MGJnGmAuGgyEdkziDJjCsjQUihks4Bc/fFUF7vb\nsI3XXEbZV1N0Mk2kF7i1RLhiMD4h7t/CLobVe9GT3XpT8fHkDdZhernB2jKl\nmASLmtdSSp79TnWSjHE1qkYLInYwO4dJx7gLxz/X9V2AR09cXeaG8xZ59Sun\n2LFP7DOunwTiry7PZetpMI3z5d8111xkNlU/VZAVgQ9aN88DZunzl6NXQTRz\n8d6Oi/fiIwidk6s/4Y4HbutQb6fp5LE7369XNIqHS+VrB/OuRkxze/O8evEB\nTnpXwdg2whAoriP+Bl29vYjcsgBQomg7HCbWBp6yQ6v4jAn4w/PNgCXGGCo1\nxPNOFweVCswKa5tcFWXSvOBykmj9AaI0IXRqz0mSFTQAhoXiTVR816iK+yVM\n5kWdaKUXNIxahc2a0p4mJRq+PjtwYNA+JMlzXvECzqRbuGGlxCs+6q+d4+tO\nq2aG\r\n=bvqp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/touch-target":"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/segmented-button_12.0.0-canary.4d95812f9.0_1626464602341_0.595550823191473","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/segmented-button","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1fc419db71d3830c3d72c59c0c413fcb3ab99aef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.38d1846cc.0.tgz","fileCount":55,"integrity":"sha512-1qAqCwhWhBSFnoGv7KNf5iysIk2wJO/Gv41Kpr1GPQLSh8ViU+CDoWp1hxutgq9PLKLCIHlyAhUVessRtMctdA==","signatures":[{"sig":"MEUCIQDupJ5gSJw7OcvpjclGPp94Z4bi80+KQmnPtQ8sVsOWHAIgHLSZgYUvCT2BIwekF3OTz+LZOcxYNMB0wvROO6SXVbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ceHCRA9TVsSAnZWagAADygP/iLQmp13qqBTI31ZLfPY\nk/NLje3v9RrXMaWdtlC5G2WJ8TXXKwrJhA/UiGsRcWLVGAXwh1qpbZ6Ap6Sz\ncZSSvzTJT7hRnpv09Q180Xpto/FXfKvRnisfGZcuhZhaO6YQ6HJtr70aNpgH\ncuOFbU0QGzeAipfwQH9IoQg6D4s1WyqCklMawOpdPfmuoQOvnWv/Da/+Ibp1\n0n8XXKCJSlOIGv/0v1BpPSYDNmJjgzGwT5Ky0MfAjw7TeDZjAbPQIBddkQ1G\nRoiwNDlAhkzHmmZ2ZA0mPgmZ2Z8PzyLB5PmGf0cGa1on9punpJ61uwQn4hBu\nJWC1cSJlv9LCRUtbWaZFdBHukzeviBrlxZkPCm4eWjBkyvWnkQviYAIsstJF\nKeU0Y4l2fG6yC+JpSxbjcmy/GTz+kNCuChQNfWKtAbvhYlT0jScBAzvC3P0r\nNyZqv3SZtMTG03uoi2tbNXJGy6pRhhNnYDCJpg0+6B18tIQiKq+UUAa34MSq\nXL0qosKFde8Ld7y+G7wMHrklsLbsN7lGZAyekCaF9PrADwXg8+wlZtQSE550\nerGXHkeixqcGYGniOzWVI+vV3SO2J1DGZXdo5GHI1oSJqBdj+Vf5iNMHiul9\nj5nBJXieixgszGHqFYwcs1SmE5VbpDmUoCXwxrM2gu2gi/XisnBVDDpt3v5Q\nG9gL\r\n=PlHx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/touch-target":"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/segmented-button_12.0.0-canary.38d1846cc.0_1626720135163_0.48193863141675686","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/segmented-button","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f79b286c76531a24dc0dcd1bc779d3059841a9e1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.3f691eccf.0.tgz","fileCount":55,"integrity":"sha512-6jdetnQfLB7hLbRfLW3TRG+Tt0voHWS38Nu3pS4FCeU+6vcrtgylY3UkuraRUeCHVA6mL5BjmhE8AHDAPyn05w==","signatures":[{"sig":"MEUCIBmB5mbTHtzFewnIwo6HOZnbeJjYchi06x08Pzt3zQ8qAiEAwpY+/zBniDLCMsuVvzZiUUFaSc0vHvjZ2c6T1zjuo5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUcCRA9TVsSAnZWagAArjYQAJV2S61eLUVjvb6Khnpy\nWNEkyg3qVeyWcRJBY6UygEDs4ZyMLFdx1BZe+AvUjOPi+aXnjoDNlZHX2+Em\nLO3gDwZk0Ni+25/8fOwzccQOirz9ickHn/oJxjd8stBgah5Dn9HsOUoJgdVP\nkseSLu2hADlEEgIse/eyO+D1LEGfju6P5hHrckr04SHech1f2gk6S7pMSIWR\nIAVcAdU8i7UNw/qDVofb7b3UVrpiAw3dhH6oS6xXxeC45CNMaNM99z7l3eeJ\nOJCh7jW9E66197r0lVfgFdk+XPBKQZ+q2NRz5JcNA9Ja8Tdv0wZyvjbmQelG\nh/6jbbPLoaNdlWcsr0XY4tVxHwdNSxfdavh0d/T7ZO4y+LKl99Nn5jvNZCRq\nIHuB3PIWWBzjSLWOe9Y6NjD6yZPKas75G0CrTo2hO55qdYQYbiVIu5504UyQ\nzyo7HJNxjM48sh1KPJMT2RwBcz4+WInoNawIrEFGvXyUd5zaAhUyEBv2f9FP\nubx9UvJDfyF2jhBgNzRdnH/IRbFRPpafnIAzfvF/KAasEammjBgq/qP1EOnl\n8MVBpJ7DIQGDLLGsGshkhbXtl9jiNBBsRcWbFVpERO9E+hUs1/x6ZfosImZU\n/QNinlo2LBkBEd7dS3fGwt9jWxaSbkB0SHDofawVzeXFlkCiT+vRHzIsi309\n4IdA\r\n=Ss20\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/touch-target":"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/segmented-button_12.0.0-canary.3f691eccf.0_1626797340675_0.2565443479625531","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b359de63a5906494ebe70da1cf3f9f5222a828e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":55,"integrity":"sha512-dgVbABShOsSMFUW4mkCbsrfwtjo/YLFZtTXqYRNMC2a+xxqJ82/mww8sMqBR7Uoap5jejyVbN3LnnjOdiRf5kg==","signatures":[{"sig":"MEUCIH/ucnqvKI6yQpmZ1pC5D4SKUoG5WdLn8F7shZ0mqCbXAiEAr3ZjqfMQ00gz8IlzN3hjgdLw+gXCFPowvhruj4o6tyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBeCRA9TVsSAnZWagAA9sUP+gJVP2MgJnViomq7+I1x\n++2f5WU5QFZLwhCLjbPK5vmc1gBZoaWFCEbLNbiwTzmEOQadzc7VwTiiR0m+\nmPaRF7/lFFpyw8piAEAt0CKUqDvgNLyBB1k/GSf39t5swKVHt/g8y58tsbDo\ngPoYNDnRPz4zVQEOtBAfq3ic+SxIXTDAdtlrzis0ux2IJ0uqeVBvT+2NHAae\nJPcPEFHk8sdr9+yJqEa6DEEdrfsSCMBMWX0XDgX/DWZOOE9WDsCUiyCTJ13I\navKhvr37xoox5WvXfUS8gr4btWn3iKDZWXF+wfhe678oJg87xq/vxcaWJKKo\nDNdIoJcVz59/WqsGsDNlRZmDLoLf3Kaq6Ah6M9biBgu6pzBIiQWAvsblW4Bo\nOoAZEcKxgQnF3EhTKocffuYuHEQt+8Idk1uWUEb6XklKr16R9IkYlXaN02NE\nLplXIIN5tO/nL6al2ebZkBfVc8FL43hUxkXk/x39Tu1Eej2xp4ofuPuM75Ap\nsa/cOqZP7kInKD6uWRcSJee9fJablaqRUVk/W6MFC20kxYkdhw8P7ILSMHPH\n4HtaGaEJohB+P4+AuZq0nc+EzYxQJCqeHXsb5Ymg4OA7zVStGYAWerj4viyC\n5TvAgkOhsJw/1bcCF4S69lgTIvDTkCb3W0CgiTNSRZ26wIMKeY1084xJnqOV\nzQn/\r\n=XVAc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ebb5c73bb.0_1626800222466_0.11218623057580057","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/segmented-button","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"27b74dfc4e80238758b5af163043738041f5ad0d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-nightly.778a0e8a.0.tgz","fileCount":55,"integrity":"sha512-BD0+cOr3dtC2F4nkA5AYqgClDVPdr3S+Y1FpXx+4kvSvpreKDHO5eZBuBdA8+6AGtdzf8Nmv+G9rCP6vK0KE6w==","signatures":[{"sig":"MEUCIQDzHub/IFT1RG5jJBaq875pEstSGVuzSEyF71dKB6JhiwIgZyUALD/pFxIjcbecM7QqoDCd6V4BS2ex3htByZLU6MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqlCRA9TVsSAnZWagAA4ZEQAJK6VAonzlLpyl1ULWqf\n1G2opS6nuHiH/KMTYczBIKfngUhFz1oURLGo/wHiDDfLtMg1ckSg5zPtk2zb\na8x5L92YPqXSsQ7KwGnVVB7X+xh3kWyqNe1NACQ/kPaHOvcuI1JIM7foQRJM\nMXP+it0Tv2ziaB5jgbIjn0Zc9KSmQh66MRZBadAGd2/VbQCT3KELDI7zLpr1\ndF0uhHYYHQ9QqEnNoGTGsaLAVX0Wu5gEsphnsPKzXp0BiFxw1u+jEgS2pVfR\nuC+BZluqdUidWZRjBws8duJoxi98HOOiDNACyyYWKeVbxwDHeZQp6AqkMDXv\n94hPsYkhyGuZGFjU22ZpARWberXGt88DIoJ/vKgdHSGcSyz992qhzKIOeXXY\nI2m0QTmuYJYiRWe7oMCxFF3jjDEBg4LIRvxSSPVwfwVn78N1SINixS72Ps55\nmyep2xcNZgQRdNkzhJV9HE954+26AOjaybGuqIPyh1vJX3GlB8KLdlhoqpDD\nnkFkFaJbJd4iWLMpufDHP7fnkIquLsT1stKxSxJVZYDZUkeDk1FTntC1UBCB\nVni2rr23Z2CjPCZ/yX5HuNsqUnfcgvhZMh9Tk28eT+/gctDrepeGM6NR77HV\nZWb3JBxUlfEDQ3ljYcXKaosNMqK0A1m/EVLsezPTh7s5zF+HV4x61tU+LB9R\nslD1\r\n=e1Ch\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/touch-target":"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/segmented-button_12.0.0-nightly.778a0e8a.0_1626815140980_0.25780558675904874","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/segmented-button","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"db2fbf4d5f40ee9a39dc6cfea469152232d35232","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.791311bba.0.tgz","fileCount":55,"integrity":"sha512-u/9yguA+IZwBsfJSujY8651lijU8aHxt1f+wTbJyoWGQXUZg0lJx0kC4G+q+0VyLoN08tyHfBVy2zHviSlI44Q==","signatures":[{"sig":"MEUCIC+LzABrNXMzMNnE8jUU+jjrbsmTihKYbWC5PXsteYSJAiEA2YyO1BUGxAROrbL4bc/jCjvd2JYZkgui1xoyy+9aQGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kyCRA9TVsSAnZWagAAffMP/RF8MoAE7TR8kgUWVODw\nO25Kdvpshv1a5cdMu8w49TuFUn5vekKj+79DdoeRarRb1Ena1L1VCjPVR4x6\ndHR0x3o8UF7YzK9P9hWbYCqrRz0kRj/b7ZEzR0T4Phz0oEWndO/oVvQnXmTk\nVXnPXayUW0MOsO9jjrKT/KpVIG9i7/AvpcUsjv806WdIzrp6ZF6z7Z29BPX0\nKWoPywL/hOsRs4ed36C2dgJ+46p+/zER5chlWPGPgwo567aWUJKHJLQn3sVn\ne0mZ4Kx8gfselfqqJsiCDv7mApe3rHXqUq9MR4066oTnKcoaWOgN71JbLWh+\nmozRe4tdcCZk8aVpeTTFfAqEuAybj17+3dS0D5FJdBDOccLnL8Rw1WFpvWOI\n4xKSzZxRguwLkDVPxKarA7RfZOOxY/DIy7UyqCEF3ll/NaZD8ycpdTn5rv51\nTxFXmRcYAZVVUg3EbMmzs4Qdjo9ICabVQido51NZnB5/2zhdlw96GG2mj1kB\nXtTR/7KYgftjE/eCKQe00o0w+eMGFAfNVjtZ9QvfLEFGzAuKGtXcFXRXJTZH\noVC2AxdZO4xIyOlpZvP43EHBX95h5XIUqKBnm+IOOdKQkd570tD7cV3k+e7j\ntAMRUPSCAJ283K1o1YYbEsTXKKCVHQqwrFFlP2mI8aYruHO/R4bsjXktrj0d\ncJ80\r\n=+kgp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/touch-target":"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/segmented-button_12.0.0-canary.791311bba.0_1626818866814_0.5548120984128873","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/segmented-button","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"84593eaeb5d152b09fc27ec4a567e9a224290e71","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":55,"integrity":"sha512-R13ZvZzBkCUvjJ2M47Ek2Vp9dZTweaf6CBNsYigMgDMtCYRt+Z7wDZrbghpAdYfuM4+9gqdbaW18k9CWJLFEfA==","signatures":[{"sig":"MEUCID2zOm/fdWSKfCWwLtj0tRLzteHhwaf/tOUYgsHg0Q+6AiEAzl7y1GVNGDY0PA2vRFBD3m+rxICZQAe77FQJmLjw/K4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7qCRA9TVsSAnZWagAA17kQAJwLHi0blPk7a3TRpapi\nNm63ur8zjgv0xIxWK5E7g8G1VazCSsPG6XGn4yj1aRPD0j4mVti6SWsgCzcd\nlhn6yhLJZ4xAukrQ4XptdHe4g/dEHrEOZxy1t+CTt3BW4HiTvRtpj1LDWLcS\nGIsBhX5xCpmX7aeClL6jHAV1M7FIJX+JBwQTajrLtfmUANs8IGWOPyj6N3jF\nED1z/qTs0WUScLpfGThu++bS8mwurJlwogs4X2RJ+SHuCDuAIf+5vCaNVqaQ\noHBotEDPZq1/libTzJToAXt5hdTs06VOnKDUBIdeIYR+ECTFuPOI/QyoGtwB\nMUdM3QR3eaAYIZbSuw1um7N5RKFT55DHrJ8kDMkOPDxJUPWKEfBBzDKyaZnO\nfb6T2kStQkPSydvSXQtenGoDTT8hXNbQvtl+AK5axxmHv0FiOK30ZrAw/BzN\n9pMDbcCR8I6+/bPspLvUY1VIFAEjrZhBBfB5udH4xr0SaiLBfhx/+e1Wxyq2\nJMMG3tUt67RulBIPKYys7shiwMULyMsh0O0DcY0HODRbG9GbD0pFI7vAg84x\nhCeLD71NJUn12i6Mh6sQhVkyLsws/TZguuLIcgbGpEN7N3R15XAkLAfSd0FW\nygaGqh36SlfR+ctFtZYddBybYmtqeSnJs6LzCyNuw8nfmCz9/Ooz5n+NhJCo\nbH+G\r\n=JnOK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/touch-target":"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/segmented-button_12.0.0-canary.85e9a6ac3.0_1626881769676_0.22275943876960835","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/segmented-button","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d311b8b89358765d42f453f883177339eb33b46a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.6b0442278.0.tgz","fileCount":55,"integrity":"sha512-fUe4Zx4pEancj7QOFXThjc5RbKtnqJQSzi6zc9Fc53N+Zm6HDHri/9jL4vCti2goWhaH9PA7eL9pv76aFQVGuA==","signatures":[{"sig":"MEUCIFcpq3sX2jWBU6gvy3xoB1Wjn7Lod8Wu4/u+6YO5V3sUAiEAlVc3JbyawVOv6EWqAeVW5OnZVv0bZ9bDijtLBe8iq+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxeCRA9TVsSAnZWagAA2dUP/2NFyDpS8OmqNNr9gk0x\nt6lbDyGUM/JE/b7bZlaFdfsp4tf5t5lHHBBLxNZke3CQMwQ7sJ/KsDvrdBUj\nk/DJj93pDORWvnbfW3+rnkjYnxxth19zUw+SINqoUrDNHaO3ViyusGjCLsgb\nktcEShJ2SW2+Krk0lYd4AhozUFeOHeneU7QAYRh61kJiDJNwPB3e2w3DqN+l\nbNPIWmLNSnZgRaCYRk+awc4HXCFb7QTRT1hSY9Rr9E5EVTtLzRcDsMsMVYNN\nJ/jkBgqCUUcRs89vi8DCJqE5ErC/55bNTP3auqLXgh5DaSSqLJoNeaX+km/h\ngwm1u6qFb19G9KYGJast7ZONITgeOrnN0TiEyQpK0RMtNulDEDP5OpQesM9n\nCKdIvMHQhLaEYLYvqdxOxsKcqIS2kr/8JavHLNPLgDqALt5ErYoNiQ09AU4D\nylPOrkVXKHsb9XQ+A2HEtl2j7uLjl//yh8j6+3Idi11F4BWoO/QQyUUd9xn7\nHdAoio45iPH0UghQEgyJgNdQL9RKIKoFFLCI9+y3gEWkz/n3mca8TmhiDSpL\n7HJ0jy3Kfw6MGySYVnDx7pwnLklHA2TRRs0nFpLLOmzBXRzw4T5C23+QBdih\n8CcFeICz72BrYoIasFvxwsRlq9BnvVh3zHiWJnl/lwbKp/4wpZn6KjFc3R0i\nOG3S\r\n=xkpc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/touch-target":"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/segmented-button_12.0.0-canary.6b0442278.0_1626893406790_0.7082398661407703","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/segmented-button","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"acc7047fa1303df8aab1cf100f296d1c2c2bd899","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.5f00e454a.0.tgz","fileCount":55,"integrity":"sha512-OL9xDmUJSypub/jP70PH7AdQTVHec3HIDr0riwvzdFEU32L12J2oqROJNyfv3KP63dGRhaGFwjTO9kd+g8eRHQ==","signatures":[{"sig":"MEUCIGJ+gdwN01mmp+Mt/OxHK/iOfnmSV7Ew5LrhLFcedj4sAiEA4+PI94PrjiHFad8XzN6IYLAhvy+RIapqUnxTDHnQxmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWeCRA9TVsSAnZWagAAzMIQAJr4lvn1ZOeeKREHpTdu\nVCCI3rqzoSIG90XWTgVN2e2KNQ95i5QrHhdsB71dhy8vW004RSdce4pk5hMb\n8A1MA9M15/ITHE3AAPhOxXM9m82ghJlP39j3452cwr28PmzRR882J8Rj1Fm8\n5WvvX9UFv3yOBcrgzPO214q1XOTX4lXf/KUi3w/dhK0JfetKV1CXXBfGEpIC\nQ62yGxDZuQHUitQWuqFxEiRK474+wXBJihDJ8yQKi4jZa4nOeN0ccfaYlAXl\nreJ22FT5Y1ULjf3g5r7jfo7wgxdlBGKTDAAurIDF22QmJkXLs5sYSZSX+Jvz\nWRBQLQlcsmsyLHoNguQ3+/Y55517Yo0qLtlnxuyOUwxT2oyIiQ8cgI7pUvhT\nmHkAIiSg4rHyeP7FZDUkZM00yo7j/KypF03pGMHwZIMHQGIEKA1rEw6YmAQe\nyZCWjySWpWuE03Rk7l0NiDzXFy+O6ciWVcHr3IUJ+MYdGn7xYKMoAoltAwVP\nNtQDS+pbpus7kkTpPYKMSegDoU46AnFCuCePr0ooGi4qFctMwgjYkRJKRLvZ\nfYPgzyG0mmUHzU7CTuxtjuFTjaXfcbqz6gjlzJkUaIX1yJR7zqzMQg4va9nU\n/esjLl90h7W7t1stsuMF3owtPbBAEWfCSxS5SWSJityVzfVAvMdB8iLRa7Ss\nMpT4\r\n=SGPJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/touch-target":"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/segmented-button_12.0.0-canary.5f00e454a.0_1626973598472_0.9244127810293401","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/segmented-button","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cbb1e875add57b25c5ace905a02776b1fd781b7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.90e08fc6b.0.tgz","fileCount":55,"integrity":"sha512-4Ln9ZPGeLMh6Ac5WuyNl88tilkg668EY7FPksXL6EpUsiOCT1O+3NuUIdGLktQ7JjcvLO2/QLYjRK5nowekkXA==","signatures":[{"sig":"MEYCIQDLAY/V63/gZ3CAd2DCtirRG+0lMyTPDJjNJYhiESkcNAIhAKDmuIe9SmRpWr15gjhFqJAqyzXGFIGSqqH7ySm/s9Uh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gF5CRA9TVsSAnZWagAAuhcQAImnq6SQYdqpgD4jy8Da\nUx+O+9GbDjRLeRwTdNl4v3eN5QbqTwfhwByAW320mM1JkZnZu1LbmGqvG0CL\ngAahOIX8Bu88t0QDdkinrb+F2gfFAq2neZAN0cXYwbxEC8GUrCQJcaRlZVyi\nJf7NIhZJ1U3UJAuP7ZAaWW1cX5tixDXedSuoOC2WMHztaO3wrwJRiUKtiuBO\nZCrYkmItKJFRA8qOjNQYeDa6LkY0KMVPM6D+0v+pd4LA6UfVAxVeC/QpIAdc\nQLeF9pH1daW+JWdzMY20yahq87fJOCVveytVkWPjT07AbXxcmKdEYYJmmESk\nvPoy4wzfnf62Vo0ZfGvKLnzhcK4MaDjVwt3xguc2quxz1RnHcre/KsHubGVx\nc/MiYrjlsl1aSFZCsSPLw25DuOMSdmOayQ3eJeOW9h/7gojU/JCCRjmIab8t\n+51ZJK0SRHhvHkQ3k5WVZkpaiwKf3zlxVTJ7IdkLp4/SRhHqP2dK09gE9I03\n3kN2lymQl9Nu6U2zokf7auoP0qKhTTjYp3QMydM5IB0CMyspCOjNzLx1J+7H\nrXv8fu/kwRlslZl2hMKoWyPunAtbGY5oNymwSstPkxy6ZLWsBdTrYHTnOKvy\nKnIQYpMWTrPSGW1ZalnG8fGJ5hxlMgbQKwZjvt639ka6fSbEwvW0mG6wjvbh\nHA5+\r\n=jJqv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/touch-target":"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/segmented-button_12.0.0-canary.90e08fc6b.0_1626997112883_0.002557277831769289","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/segmented-button","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75ea2a5be1e942b39e97fe7e69c576a7e3de0b85","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":55,"integrity":"sha512-t2m5U/7uFUHMgVU6GRH9GwpxeQG8C7aFYNu+J4bleUBN0AhCz/TXeV3DZGdqxQrdkOBJsfk7y86WTcnpbl7WUg==","signatures":[{"sig":"MEUCIQDthDyJPiSSZS9pMFUPY6kbZwLSBJN5Yx/jn7w3ivL5SwIgX7+of6LBMcDuO62D4QC1UQaxovBvSX0EUBetDJrXnnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+waOCRA9TVsSAnZWagAA7ncP/0QMPai0HbIdAcVnT349\n0NzoWCnWLCq9w93UFqhVFWdnB4smKIOMPz+MCcPfLq+uG8urWXDDW1Dd2OE8\n8Bu7eR5Sn2ZTTcGBGhwymrAumd0gNFQaT8GuRRFYNlJFPFz4ughrvXe4bRQx\naiG1QMIOO7NsFhlXxLgcMxT1nZfmQ+2tS/SvtmWPBWtTjr2WPpF4QtYR72OU\n4/Uv9L+rZQdoiFAKZcAkVuDTHkmHXsJElbzURDBJxwZKMABPxJGurbiwiFPG\neGsIVzTkOFIFh9y7czf6QRTexMP3j6+0Xebvs8sS8Gqj++gQRoqMC3VpJOBV\nDxTjuJLtUQX6BkQtNNwM87JTx+t8yYL82XtJ/lDZSUsAynTAj8EQDz32C8DS\nYZ5D9OSzdVR6aXFHpleLNILPvcaMqaGc9SnD7RSC0QFov2Nzl4atETD8qjux\ngkeYa2ttZQIQcRapQrfuXqhY5J3gBkdUsC3xG+VQt0Gg8JS5XTIxN6PdZrou\ntbU5mRftzno0/OMrg7uTMdUpp2f6Tb8DOjWYQetqZJib8gCo6XTTGErFurYC\nnXkYbdOsfqUm3QusiDx5HvTT5F9QnFqMgAlBYRHfLezujALUJopYR+leJx4M\n+U53PKAIPWak7qSGv8ULuXK6yDR5tNLtvv0Y6m3gogO4fe1G5WRuSiRg67ny\nySCh\r\n=pXKL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/touch-target":"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/segmented-button_12.0.0-canary.cf5b9eb86.0_1627063950094_0.7663553453532361","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/segmented-button","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"434c7bdceb54b9748f0eb0b644a43b66439c998d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.3f36ac75c.0.tgz","fileCount":55,"integrity":"sha512-VPAJxKJm9s34tklsaNKINwqN836JnXFdxSjPRU1st/CReuaf2Ze2Cz/iGPmjPSgav7cGiwOmLVheZqlTYltw+A==","signatures":[{"sig":"MEQCIApHyXcCglcIT2Z3+aVRSUqmBE5z+Ig65b0bDnPW0VEIAiBejDSuWibHfeR82WfYaKxTR77sYc/OZnDYBUIT/6faTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ws7CRA9TVsSAnZWagAABT8P/A2che4EUMJn/DWQSLdR\nO5PU+x5ieKPQOoj96ndylsHzwzfcQ1YT6LqddPi9DEYD8cBztdEff765bmyC\nc1TbbV0+aKLOCGpMhMU1fOCx0oD5aj9kTSVkBQrgXU0X/pbgTcNOeBmpnU3K\nIXVCYErA/WZrWOynw8xn5v8asSvMR61mOlzy8K2aSZxikUjjk9IDbbJZeFoG\nz2NQc/XPMxSXu3P1yW+3p4hkQISioN09bHVpUZIj3Gx6UfZaVFXMlMwMjsHz\nbWLR2coo/vwzpcWmBCwmeEJ1nOvlRvkghfq/CqYTpAPD3Rnro4mIZeCzOKSA\nae98Qu9qj80Tn5cecnLKb/urSCXWXEiIFlRsYBs+l9Zf7S9XYnGdzurq/K4N\nHd+jeTWomYdGoJpMGe4hNbtRmPpNBzmegM8yiESPFYKdBpnl38AtiabeR3Iy\niybteqOIQ9HGj4ohVQ3JqtXvkbhX9iq41vqtvBwyZh+u9le3LrDk2QzaGrHZ\nZIvoQz0T11D0AqoQvueJT49TJQAGtymsFRMUS1HWQyRjwHIvU5iNmGlZKao1\ne2/oqDLuUpX1kjdMU5MW050QrAnub3SVTvZwV1t5pjwWR4oqnVL2BfjtZZ0C\nGOVwWxz9REPGqaSx+6bVYBuyhhnTcFBNPyCfSnkMuypP38aY7AX8G74P1X1R\n0W1I\r\n=2CEj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/touch-target":"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/segmented-button_12.0.0-canary.3f36ac75c.0_1627065147302_0.32912220778625967","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/segmented-button","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e04d152438946760aaf87b89c2efa9135d9dbbd2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.ea1e1b850.0.tgz","fileCount":55,"integrity":"sha512-xMAWjFXbbxbGpwuQZyEw2gPUQ2yXbea+2AQjMUS9l4u3FU4OEIUgxR55cOHjthlNIud5si/aX2EBkrtgP/r7nA==","signatures":[{"sig":"MEUCIQD/kIJIoQe6kdePX031m13HbjMe93XsMYmiyNAf+vACQQIgZQxHE9HxXjunSwqO8Jg2RvHaUG2dt9ecKL3umgAvwb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5hCRA9TVsSAnZWagAABPgP/A3vQZCfprD/hN3vsnOL\n7IofbykLUGbwwMIPkPWPA4vQ2LgRRCxGZfHiVnKsZw51Frm8pcg1H0BFsUX2\nk0OrIcz94bQX+KYpcYO2w8bLeyXUjhAPgZyrv98FCfSMF8i6RRqNv4akcJSr\n0gX35j0oMsW6NqGnHKmb+x6kRDoWwl9Q2ViYJ/7VwWTuBgHalX1s7ccByTrE\nrkdSpgrqg/4ggGPEPoIHCE7hvhMAdVok+Q/0Ib+jGqaPpCSY//MIKXdGaUv3\nB6ejVLdF7pSgSaZAaflTvI74uIpUR/4xcXQaa8GUi0oAMvpCPePlFc+xwpbV\npQxeY4KXW11CR0EUmUjxKQxbf2db28OfcagW62/VBIDd5z0Frq3R/rOH8Sec\nULh3z4N8A8jLW+joV8L2b7xqZH1DMit94YPuxdWLYEpcxweuAIq5fjaZ5ERi\ngi112UJ6NHde77aMNaI1XZyIx2A/Z5V0rgPdsBnGlYO1bm+9bN1FtXAFUg8b\ntdJg/4CxYlnAP0gcp0Jgbo8vBBXM8Xfr+/ERmIXMVZa7kZpw2zhl2IEKj+H5\nFsf/JKCvF6ZTJ3RRvJcIoB/6c/pV5SwNFeId2cqj82sOpF2wj5grjYEuwdV/\nlrQvxXKJ47QmRpCqiAxRctBnRiRVBmcXoRfC0pytKbzXJmb/xqLVFBOWXmC/\nzN+0\r\n=TaNH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/touch-target":"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/segmented-button_12.0.0-canary.ea1e1b850.0_1627160161189_0.4426806482018797","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/segmented-button","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e6c312ee01ca7a3cde65b57c83efb07580e1ca1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0-canary.22f390c43.0.tgz","fileCount":55,"integrity":"sha512-BysWZldAHte5WXYlVODYy378H+fJOAo8X4NZyHJezHB61gB0qEtFUNmagCJzt+OUxoM4lR81v5VL4tCgdkaRGw==","signatures":[{"sig":"MEYCIQDMPV2u6JR32CsUr/ht69R+vz4i1fWYRd7UGtwopZaWQgIhAP9iNS1MXxqwk8La+znMfrLJfksHFTUnidGyVWPy7djo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFe4CRA9TVsSAnZWagAAAxgP/0p2Hc4BC/1C6V6lorrI\nzEuRkEy2hMXsfHk+QUOL1YPjlljQGqXVM1CM1irP7RZtwyAp2nqjdRgu9fuK\nqHV+4DV4oT9uNvfDXRRkUBFPqjjDMN66udCFV5K1+n23DjDh/8ebF7v25IkN\nR+JrO5jmdZfnWoSZaMP7TGSDMvD6hRPRThA1+uHloQ4bC/mmyizdkZjt/uFq\nFnn0gkYxRx8GbsbXkuZTFgh4pgmqKqrfscMSWGYS9jloHZfBN0R4hlKsfZQg\nF44hAOqYe1F2oq34/fQF2YqR1lZDDCAlkoP+wwuXf/9GLhxsmSzc0VbC+27r\n/epfIL9L3h91Uh4b6/1z811o47lAdRWUmmRuQWj09K5VZ7zx84cNP5FXU7VY\nqGw6SZm3I3bvAzeFwMRcZsvLvpC6qFxCtkNW0PKyeNVUtv2Jj0Wbbukvl5Dn\nblgWFFFENjLvVHevMB7J7IGrM/thth8zAdJ3zRN8RSglg3xxkm7f5AmO/l49\n2awFo8nQtQv2bh+p8WPnELH2XLBN/8VS88hEkV+T+eDKQNN2N8mFdLAg7RaF\n/5HEEwd6E8vt3tIT+Tj9dTvPk+wBS1MTkIKnsBSTmVg8ll9S1yHidm6N97Oz\nwiYnrqzQQx8N7SmY1NMTQe9/zsa9QgrXwF0TBaUt1F2cZ7UAVVHu5vn0FtEv\nxXr6\r\n=HyKF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/touch-target":"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/segmented-button_12.0.0-canary.22f390c43.0_1627412408396_0.03366180460126933","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/segmented-button","version":"12.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2cf56d048e6b54fd92de630127d4cab7cbcdd89","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-12.0.0.tgz","fileCount":54,"integrity":"sha512-2Rlpvr/zPyGEo/C9yp/Fh66PXt7rb57spEyNXKv02h0ls1CAZOZFa8b2hfDMujMQqObUoXDGlBlaoO19bq0lMA==","signatures":[{"sig":"MEYCIQDaX8DvWNZzGRgLPvdUkIRVfljhyTW56A/jacAYGTDOVgIhAO6h62YDCtMdUrF9gwnjPjrCVA8P4XpVdQgC2CyrLBCA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNtCRA9TVsSAnZWagAAJsQQAIOyRVF8zrLDBcIN+aIc\nBvOR26jqf8rsYY0MyDFKgpkZuJXtOt8S4t4oL4g6kvrx3O5+Q66gIz6m5QNG\ng45X8DCHTDLHvvhaAZGY7XMFbsExT5+EJvZ8r5FJy2LjsuHdvpz85eDANkGQ\n3E0IMY6OaKBk+Y9ofw+bDz/v1kYPwxi/kBNdHqnZTAGz3/8U8nqwIF5UjUzE\nQ8UlOm1SH6pqegQpS/KB0kK6tlvEaKomawUHDsFPhE1C9+OxYzM54RB0Qn/e\nIs8ikrohW5pgtgfV8lFJXYIiOUSqIq6m39UVLnxAyDAJHrNKMcrBH/4HMGvw\nKEUYoOUvzud5ffMV62/DyGsXfxhep0rbwrB5mb3a7n2mnR09gpOkaw5syC/m\nEA8Zd94hq/r2gDIMoVS15DrWKaNpdZ0KKFGBRXAnXNLCQ5RUqTU1jnekHSET\nUSQakgoE+W3ZiyJRt2YTtwkSAtpX0Wn3GGxylVJzF3jNxARCJKlbW0ex3Jjv\ndi5knNla+ogJONNgXz+Vs5poJ7WjcIf3iB48DNpq/ovTviKXHpxFw/Y82zPm\ntm0htTyTl/XBbVOdN8LRxa/UIru2T46nav/SW2TFrp7cTBotFLjF2VdLcjnD\nCT74n+2wp7a6onGtnFXWIc3wkM+iTDD+1fb4cnsB+Fi71ZNj1Vpd97/wpU3V\nE/gm\r\n=q2G5\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/touch-target":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_12.0.0_1627415405426_0.5316037432902845","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/segmented-button","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f2891ab459d7a177a2733e01331dff61a045abcd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.ae85f7eba.0.tgz","fileCount":55,"integrity":"sha512-2VicBHlGwCNuy1mVjvZo3pzBa+goFAYyrmJeyZ9v2m6z8c6x9heGhZAxERoj9W8bf+z3aY/qEt2VW1pLh+W0Hw==","signatures":[{"sig":"MEUCIQCTI4v2bsza1+ZJUyaBPkA9Tgo8TVI67mlu7/h6Ouk+hQIgGFybdV8EqwKoCtCOvT30tH1xlzCBLiNbP01xEuPlWDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPSCRA9TVsSAnZWagAA/24P/0ZVh6tR1ru+wH/5yzcZ\nZNyOIX2SzKqjPBsqO0DzAFhf5XmGfFmcyK9LgZNSZpkWIm5OLmBXaZj5ukRc\nfDEIsm8JR798VeIn0Up18o6Vki179HJDqMh+vRh9r4eGnsm/uqs+uH51SNZO\nGyhLzId8KVgdJHvRTLQnvQ9A19rSx4dK/Cs/vxZ1jpbAuzc1PrzXa9zSZBYD\nNjOU8wYVlEze+C2e4/h72yqTaBgOjVrEt8WqqXBv8AT67+00OsiK/ben8Uoz\ney1Fzz8YI927o9Xv5ObbDfPOSz6BB7ZU4Z7IirvW1lz7k4IjLppdt7YVzP19\np0x1vdePvpWNEjBP12VRLzYZ3hjmOnX7R+fHhUXSGccCsxpEfGQGhrSnDu2u\nRQAllp4k0NWjUcmYPiZEWXB7Elria2Tyhe8tesvAypXCs4dS9dTmnqQ+WAqx\nbLZx1fwZcaZ+tKllnwV8FHchwGVBAWxfHMuqV1a9r4ZKSEkTz6xmS3X68VK5\nmx7UfrBqxzE/t6Kc3puygAvmaqIM81tC5HVjznxXc8lYOk1ipq3zzBGWoKUJ\n6uiCST9jQaYJYpmasu3iL4o5YWgC71sJROwLSJvoPyDwsFW3YdsNYSYcyRF8\nTbKVrjm2Uto/Bin2b8dtEs/rxzZrojyXkrck2OIeUaBtpwwToSpI+zErLaj8\n6IXn\r\n=R5tb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/touch-target":"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/segmented-button_13.0.0-canary.ae85f7eba.0_1627415505961_0.8114386807460625","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/segmented-button","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"70762fd37c3bb24e22dc7f5d37cbf09eec8a8be0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.5981207f7.0.tgz","fileCount":55,"integrity":"sha512-d1+uM4ieZQ1iTanaBdR5M8AMYTQ6pmZbHF0uDoQRgjhGf8rSMgrgEGieqLM9NaNeqZMxvwdiXltTclCGcOWNVA==","signatures":[{"sig":"MEYCIQD/LCiR5H4wPYiqueDt1DdO9o68ulxbXkzFBb9pcgne+QIhAPfKymCTPZ0axymAj6s5ZYwri6cKubqEpXbvTyPAUuli","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRACRA9TVsSAnZWagAAdOgP/jDFKlyhdeMay1NOuD3y\nQYVaqC2BfMjVlfA1AfQ4ABVUIZojCnLQV21qjs6NZvFmJGoQylLXb6T82I+K\nsGYf/JiIewLYqSW55FZBcWI9UM36wxV0A3IEXT4rYB5Tc0OT4w1I2UvjsvoM\ntln6sWDC/7tOqI4Qy8APE+yEMlXs1RgvMsu365S/5zyBgdulJ6eZc7FYaeX4\n87du4qnPLhJVpz7aTjqw6G8njqr8kZ6AMB9d12VbO/RdPfkKBDO9x2B8935w\nPsCH0gvEUGIdfX4MLMEfQvazq9ShU095vz3n0sC+w3GtKb/+E/i04at+bqIw\nU59whgDsd5AwnW6yr8I/nVZjHR0yB8PmDmpP0pL+/UFVvYiaY3Emqs/AKxqE\nz1/NkPrXkfF9ccNunzNXmnPNFRNo01foFXEbsyy8TJ2f5paKv0gi6UsppBI6\nyPqeeag80dGJRMnhnNGaY6TjsSg9qV7PS9lSA0FluF6RdbaSZr52na7D9rdD\nNh+gKMwUXtV95FWpsDhbr1kZr65EqpX5ZIbaK26DdJMzDOI2SlbhGq+4LNeu\nSLxMVRANDjRZncUYv/JcUQLKFLPRQNeFY1FUhClBCa8ibeckqbK04VGmWpbS\nMbzJf8f4UjeIASyhL21nZGmah3YLh9qLILQfTJ7fauRd7WZdqX3Pa39X4hC0\nzRqC\r\n=NNd3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/touch-target":"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/segmented-button_13.0.0-canary.5981207f7.0_1627427904558_0.3252156337470886","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/segmented-button","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"88d61a0ac792386383428d9c3aa4f0565e5bfd1e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.83bdd0222.0.tgz","fileCount":55,"integrity":"sha512-ws34UEHNQi31w/WGFrg1mzbwisMOLiFlNsuOu/Z2N05gZ9zes/gfTuplNrvbgPjuY5Aiu7mIV+I758LBaMtVlQ==","signatures":[{"sig":"MEQCIGv3mWRedR42g7Ljj2GbCxP8QK+wrLXPNKvL7AhcT039AiBc/vFVS41qwzpQrPNZJcydw26NreMZHlu1JpPegXNmCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMsCRA9TVsSAnZWagAA96IQAJnwwecGzmrBGlBMrGUD\nBi5GIWR4R1bSKTrtz/+pOY5NZ3DrjNiDkiAvNaFuXwCoAtXCl29DBFPgUkej\n1kk/u/cfTtrZmurSORO//7CcC1wURfYqNA5MnGeTFTmRDiHVIzh4FEd1bGde\n/El1gHJe4pz+1Hp7bUVxhUrLfMIEH49MX/qLZpG8RjwRx+spS/0dtLe/6SpL\notBDEsLXe4XIribJhNoBWHwIsx+ylYaBsAcdqP2Lkk4pGgMzY0/hWgR7puXi\nBXSISi5jiKLBUp8WzgkZdr4tKavJ52/O4tthraFBifQJO8cbLXOtOtJKihHi\nrxUqlOi2V9unTjvrOzHvo64YIcDcmOWvoGDf0eJz6o7LbW37W4ipziPmsrtc\n6/vOaKfWO1zZFNAEuTwYyys2aodhaGtat+G4B8d+td2AgekaNld85ijlw+bS\nDONmlpd78OOd7KdHOvX0LRI+MT5CV2UO5OL3oElFbgNSVrZyLV5FTpRDNeIF\nAD8yOWbgljWt8JbBweCl+iB7WzeFDhLMnvkW3uBPV7EZkchow91IXsL0CvXG\nN5CRnpzI3je2jMpwnladONe0s5VkNnfKomOzWSUUGzHMBGGYE3jrpgshlxcp\n5h5CSd6ELskmEQa7q1Dl9AQRwZGIPFX1dhe9iTdn+FejgeX9OVeYooG667u/\nD1EY\r\n=Sp1t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/touch-target":"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/segmented-button_13.0.0-canary.83bdd0222.0_1627493164447_0.9457920364340022","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a3697f1b8fd28bab58437d16e9f13d51fde43481","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.28656298a.0.tgz","fileCount":55,"integrity":"sha512-3vCEmZmvX2ZGY5z0B0ueWMuIP843PsIs7YT0oF8rLoaNYNB1D3DYKJ0bldU2em1AVn/7sjZGKAt5WtTFXHyXhA==","signatures":[{"sig":"MEQCIFtSkUe1nkM3vGnsZqRs5D0QsFQe7lSmgKU3hNrXhcQdAiBGOK0fY2pd5scko0Pwj0S44OgrFnzLVoM/X0YbTHmagg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+/CRA9TVsSAnZWagAA1y8P/0bbjYvbZRQll6LfblkO\n0TZwRFj9z0wRpOCAtvm4pOBLXOfnrMRvx7wLY9iJZ5XVDWPFe2qBnLnP1m11\ntxtYk5PGxA5lIQ7/izRk2QBhZ95Kq0Tv19UXw3GJt6RJza9xA3RvI7V/V4Ey\nQoHcPaKJ10hQOrdN+qwFmSvfoIxy3TIf8IsPJxh6NB2OdyChYSZdyQf4sSo9\nJ2jAHu5GVL+FUdV+Il107tIJVF+efgiDdkib1WY0zAfP2t3YC7439RDeBGg3\nfGg/hSujWQTOoqTIYSIumG0boL4uLLfiuU4M2TkM6lkGnV/3jKFHYMKnPw/V\nVI3YmKoM032lZj7V3iCYJAmnbDo0cSbUSWhpubVabXmxfZMUivFVI/6+3KXl\ng17Q3cUuUJVBF/cX+bpkFQGyQnhHbDu7vDGfGAgxtYlcqzm/VmQFChzKe7ZD\naUzdOdsoUK8MOxE8n38quAnnnK6AR3JPSqwnChVbF9Om78a8UTmfMGSu8WVp\n30obufXRlcrRCcrMQDTBMUplYAhr2dPITIeqE8bRH0UvA7X15+pUKaLRPmmY\nI95d8S4fUxpf6Zz94+hFK/tOlh1dKfC1NpYQSlWVuFHX8x2NhtsUVmrDrjNy\nLocLW9h4hVDYtmB82PeA/msmt2EQfkkp91+3GPfK7K+sQxVOEPa8Q1fyAnyr\nlCYf\r\n=Pin4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.28656298a.0_1627582399127_0.2203539644489123","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/segmented-button","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"de77a7bc31e98039add896d14c1a61a08042a73e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.9e797daaf.0.tgz","fileCount":55,"integrity":"sha512-E4QQ0nhLUEbtsepPNM3znC4oJS+3HDIH9GC6uc7NteCfwXO86bx9kLFwCuIBeyv+6ZPFH6c2LdsQUFPGmTg0Cg==","signatures":[{"sig":"MEQCICwg/2+Jl58xSF7W2S9LYM2ygK2BP9ZtTTGtRRWRownyAiA7giL79Qkrq5225YSvJjIqjqftJpe63cBKmI+TshD5SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":591394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvT2CRA9TVsSAnZWagAAKNAP/3+s16jAoLT7ZJwVI4bL\ntE3I1XaWp5AvVS2AaHUWkLN9QMZUrdeoO63GCJRlhQRzyJqaKtyNJyPpQWle\n3W2Y3QUwLfwitAO0G0WzQK3pQ8YjHQR5F92d5PLhdMXZp4qhaC/Hr5DpDEVO\npDuybHzZ9UHa6WuHkS+zA7hjDTPfmu0bmwYw0BLMWV7N85uSDwVkryxOLc4Z\n9LweOGTK8cS7PGg8SmGLImB6vi4mNQ3f+qwO7EEDTrWkkpROYjp+o8boSld0\nXfqwd2+vAHwYdrY6OBwZ5T21p0SnU0uFI1NvgIostRADNnfnF3RL6GpRZqsB\nbaJdK4/h7GMhYe5WjuqaAqDqsNXHSmdUmgDd0pP9MhgM6mqJwR+4475r0b2x\nVShk2xMcxOd/KXtHdSNVBNSi3wlVfmLpKLOvowf3wIatHZCjL4G0XQqHK2sF\nrQZaQ4sjeykf2+HcfjWycpu8Qg0KfBkIsJc/d64AYKyWFmL85MfEX9MnDB6Y\nc1FxNJTXQkzAVnD+KJj7c+hRJuZp2rYLt70N8R320wMiz8eIbA3Fu8eDq7Mt\nmDS3VGTwtMlWMIQ1qzNinv8xnunAUe2rkW8gyz0lB04alpGK9YUr9ghT8eu4\nf1gEIKIjT9ajL6oIopNQ7gJQCv0l2SOUNYLMRaCyRj2wk3VD3bsel4vfppP6\nZYXZ\r\n=+THH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/touch-target":"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/segmented-button_13.0.0-canary.9e797daaf.0_1627583734610_0.5497881163728822","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/segmented-button","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7034a27d688f788ac6abeb5165a2217b8b9cc0c0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":55,"integrity":"sha512-x6iq+gNvKmWSQuYq7aebKDfaqN0q87/twWSWeWwk1OV6oxkq1CXJkIizhHhcDZBmI9fsma+gIJOOcmW2oUCzHg==","signatures":[{"sig":"MEUCIDR2Mju0IifFPbIbQBcE7SGDS04tW5JeRAcWNrgB1zMIAiEAh4An3b7md43gCZ9zy14FIUph64SwmdS2AHzmj5mPtlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1tCRA9TVsSAnZWagAAoScP/1Fu3h2Q1AR1HWVubpIt\ntRBwo4uXxh2uegKfyyzIylmGmNWXatzH55juwLwkf1Q2oh9EdtdeZPvoJnZv\nHPmCSjmob3QelAm4Ecu5cck+ETkjAwiNnkMRAKQ+UyZELJ/jmsXPwxE5MKfQ\nVYk0Mq+0FLMtlY/7CBGEYbNCRj3KOBfR96IM4e+mwRxm21iqAcKVieSGo7sw\nlSiLb/8Td+kY/cu2PTtJM/PIFyKyMRYOrVdI4LBoAVD1BuB3hzGeDScRLbI5\naiaX0SZP/q5mO/+e8QFDPd4ng/EwB6i8Ehh7zKSNKZcfje6J7u7FjGAxDgZN\nZmf8kfTHYlPY3lbc5avoGZaun9ckejlPhnsyKWYAKK/yXi9S4kzrCdgz7ECr\n/eKkIE80DL3PspF1Eavmt0hc8zf5k+voXIKROgaQL9t9PVhAGWvyPrcpYaFz\nAif7/KfYx+4O1kjI+YHt0/JB4ou/RVmCAazZb2s5LnT5Fhm0jGJt5IxnW/bk\nafpSDbD3y8QLNu5C7Ac6MWlosHDuCIItd7oHKhX3h7x7Ff2rf8cEh9vn++GX\nsL8rF50eQDbLWJpn4rDsMWlj1cXlDsfwqTMGHAp0JNhY++tmAACs5d0z2RlS\n+cQI55EjEVTQ3FBuOt02ca90CXJM2JQNk5xgQYleI1gxgaZbbzx8JeYH0J/F\nCNRb\r\n=Jno8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/touch-target":"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/segmented-button_13.0.0-canary.adb9f1ad8.0_1627671917226_0.2572704837887534","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/segmented-button","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ca11a3ba778fdcb629ca87e437ff408d841cd93c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.cc5377458.0.tgz","fileCount":55,"integrity":"sha512-soFtbZHznAOTddHIf/8EzaHS+qUNwvW1vWiEPmBrpYhqKmb7jsQLQmsWJ1okYpFThDD/ULXQQm7lJo62v04chg==","signatures":[{"sig":"MEQCICG22t3AN+90FSAHdeOfy4V4QhERSG7B+jgdvh4gqq8IAiByh37Fn40Nl+uMs7E8Io4hHCaBz9XXFJGd4zN72UXDRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAxCRA9TVsSAnZWagAAmYgP/iRApyrxYzXiEf5vVw22\nG3ck3Uj6QP+UPtgQtmLwudxZkokB0LYJOlR6UMkHmq+tWos4ociT8SyOPxfU\nPh3bmsHX25Gx9/ysvx4tCm5NkxSqmcYqh+eT19pvrLWvzsLAGeVGoWKlJjF7\nYn8gbFlSCsf2jnzKMo14qwnK4kD4laSq0b9qj0VA5jsZsPNXLYzfsFAW54qk\nDDteu4xmB4EDyGTVrTu5JhLpsx/oqBtpVqPG0dLqnrprk5pEi/7q+YK9q9Lu\nrgiKozTlBv14daWbNJKnPm7rAelEfxVSCCBMvxXsPEja09PXuMx357VTR2t+\nrdrrHQo3lqfNr9+apz9q59RdFXvt29A+PWjEt75eHTVMW3vBd4Is1B3zDB4e\nDct4M79LSwLFjHeczGwIrH1qrpY0CT04nXR773En9+F2A4r4LyNeSUM/HftA\nfZencylW2IP0XfDLRzMGgnp6p8MOsnsps/YjG0n9+ygFagyLY7kKk4hDxIsp\nxn2qFLp4QQchVtnjEky7DCvLaOM/n/IRdDnaNqGK5W7CpFqe//cyDgiOxlwk\nJOoAtbC9gXrgt2MqcHXCeKiDAUE5JMI1fRbqoCLqcoc1tAxNzwCBKc/1oxCp\n6UngFvwLuVlz2q1kKSRAt3LolBWF87xxw2aO8zI/D3+2EGN9ipmQJVArEIjY\nF0HM\r\n=+lBF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/touch-target":"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/segmented-button_13.0.0-canary.cc5377458.0_1627680817569_0.2374453860222887","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/segmented-button","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6c760d96339b1c88b3dc766de7d7ebd0e8b01958","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.a395972cf.0.tgz","fileCount":55,"integrity":"sha512-dkxnyjC+91cOPPqylTOIih2sGc5K5/1FXhtGSm332ZM7vkCf6yQ7VEchOfTAyL0mayzTFIvSPrinlt1riSkBSQ==","signatures":[{"sig":"MEQCIFSFLwBAeCigJ1FfloObP11RhnzMXg9KPxLc9MdEt+qEAiBkAavCXAA8asad+aoRef71JEsyrSrn/TPu1I8mGNyi8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPWCRA9TVsSAnZWagAAD7YP/jGaJiHsu1r8yW/Ufx4Z\ntytQo3MlOr/0Yq+JhKkHTo6u2+ULed9kZmQZ98XJwtTMb+ncQCI/ykStxm9W\ntm/Le7R2rAmdPcrr9zciKG/gWFpfzAHjsdCR57gOc5e25/xtzjbBPqU4GS5J\nBW5YsX63TU2yVJRNNSx654wJ46x57O0NNjE7UX2Po9HRC8+VCx4Y55MHABQu\nrip9aaXE689iyxxW0NfzDM6ld58JAz9F9Z57bWS9lrF5h0q9YcWjwoB7njG4\nm2R7Jr+Y2wAVBz4v2Fe2ntk09Hb33kMcZLWS63yk6JleuCjBQH6aChLiXvTt\nbZi/LsBXQBWV3UHfAFfzW1M/CqldqKUE1qJnhoOnOMni/iIbG+AnazyzGjRZ\nRBxLvXGw+7OD7DasHJ682/dc9KY/NZLUSW8PVm4XCP174tLhl6aUR4z5g86o\nvHelG0kvYGtiaW1ASAMsT5CRfnGIngRWZ8zC3o+a++4Q7B2EeB3KJomyjy3m\n1VT2BxqhfS10z9RvecTpocJ4pIlwXOrvK5/x/VrV30SC1TC8ST2QakcOm0xV\n2CaY4E4T0BCzDW8U+djG4mPpcHcIzA9esFOF4PfsUjyWBcfIUiggz+WD/Hdx\nTh4VwEFCKB9qqXvBLeV/J3kYxxAhKFNO1eKTdzjEsEYi0+rZyXcksGf9ignN\nHPZo\r\n=d8zJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/touch-target":"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/segmented-button_13.0.0-canary.a395972cf.0_1628025814723_0.5260876087549393","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/segmented-button","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"87c23eafb4f09f4bdd4f704a5dd433320b5f8aa3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.7c96e6b98.0.tgz","fileCount":55,"integrity":"sha512-OJNkUV3aLCEiC1uLvbJQ2SQl5uOMSAYAJdu/Lvr9Ki3pXwSuTGDzhonrZ9cMNQC57nwCmSMidsuTi7dtkV5yVg==","signatures":[{"sig":"MEYCIQC4a8FijF5d3UZ/PvAkNhSJNslHbT/mHUT4pukSv3fY5gIhALrPRrZ2RM1uVipqw1J0eRjuMOCL7iT68Va7xotLyI6h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+wCRA9TVsSAnZWagAAcgMP/2HdoF0DCBRfs9Rc/0jb\nktCllatYEmvQpELweMkgRoU5tvwDvOpkNqcnC0ZHy/IxO9hElE6H5zBcuOT9\neqLPhXKoOMht1J6fg4ELutIZrVrETiNq6rJknjWtZgusblMnnsapikao7paM\nXv6P2mZgSOqjchKDNpeAia7rxTmU11/JnQcKgdkDmDQTCu38tU5WbRShl1qt\n6HsrZsTMGyPlxUyUhXPTHCvqySiK5aWO0l78DGXsdvZTgBhzUSiWw3dzDjKb\nykeJu9UE4S8W/aeeWGEyhL9H5kJFO6yQM0i8RmCIBdlwDxqwX+Wt5606mDwc\nQ1c6wSFZBx+ej3/KfxCySCS6Cx1mdw+Y85/vkp2J9vSmEgaQ11nDlzEgSNX/\nZb57VHK/cEl4JUsX1G4iCSkhMkcu09/PXhhD/irOTvtPVwXEQc5YlCKisdP4\nYMqi5Jk3uI0MJAWHXYNF2j6yAaPS12Q3d59JUGb/K2iUlulDDMICSx8I2We2\n8SpsEOOID4y1+1fbqucSYmxw6zCJ98Wdm3Bopg62I7X4BdSqjkfXAlOSiVUf\nwVFSULilt5Mzt3SdFCh280W96r0wkAmrvpVsV3WbugN3InrjT4/ZF/aMm5Ce\nFy+qpuXkcr/SlZRo0EFYVWSwgPaANCJbfNlaEtZxXwC+M840jqlWbRKHuTW9\nlj/q\r\n=hce0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/touch-target":"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/segmented-button_13.0.0-canary.7c96e6b98.0_1628028847874_0.02572518706878757","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/segmented-button","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec5750dd8221dbfeaa91de5367e8024183959f9e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":55,"integrity":"sha512-payoAJu3BNLCOys90fPTC7MtmmSg5IYfHQ3l7ECIaKaJAwt+Q3VtAlIyJyvQBPu0nUtMjLprzq9CTdy1DjTmsA==","signatures":[{"sig":"MEYCIQCHrHC4zcqNkovtY9LdOvwUqjRTpX+UUAQoIogIJxocygIhAJVqPjpohnurcH1S5WfpTt++1wr+N+fKTG2TQf2piYqz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyoBCRA9TVsSAnZWagAAbVsP/RIJBpdGz/WPhieztHV4\nzCE7PWjOJxONy3FqtVPavL+97OEzM4XxHci88s4UQsj3KPwzl31xIMRWgZvW\nzVA6cuKqSSvfVN20OtwEoxjXRbER2OvuZj3exmvezVemx2QqZYh8U0HZREF4\nFgyA9uRS8QeE96L6LVm9VODxsnwHzft0/5rCI2o2KF9ZqpTW+wtDACjd0gXc\nAdBLn4ciFoOBpcgbjPOjwNMWxLqtc283TgB7wpOKhOgQS0LVhCwN/gW+Exf9\n2k3xgbRCmJJOn+6xCHvVXFIbM7R6/3q55bnkWHWnjJi7tMPk5ln1vwqhA6hv\nGxTI99Cwh0dmHM4OTwqat+6YwIyVpsstI/4ipv84oI91Ux8eSiaIX1HC2SYj\nMI/cL4YCfGPBMzw++MKrsGTNOys3DuTnrbpQVZ9VQUla1K5Te7h/RBZ6U9Rg\nQGguuHN6zP1D4CaHmJzoJm/vecvXYvAP/CSNVrJdBhIaI8Uo+0lRklR61SYT\ndDwZGkhwqAf9JaqdBPviaNARcbvOHe9zC8RQ6SXoSfeGiizT2EuxAybg5arh\n/H60x9jiRyx3IpRjONvkMqEKduyD+yudWw3XnI0+CA1/nBgTgw3qBuWOh2fN\nkaiFHerF+xsv7iseFgV+kBvmZvYpp2dhoQ1pgwlzjaNK/LQ1BMboD0dOhPrS\n+uig\r\n=Zh0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/touch-target":"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/segmented-button_13.0.0-canary.a80c8b2c2.0_1628121600837_0.06465419590081645","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/segmented-button","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"54d777df60e5fb2e7fa692a18fcd71b7adda8129","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.3dd611091.0.tgz","fileCount":55,"integrity":"sha512-M6GfkdXxPDW/JlGTeYiOKY1qCFsqEnuk1lSqEMRcbwmWji4Bs1BFTQJzso0pE57UoOWSKXF5UuVzN0OFj415NA==","signatures":[{"sig":"MEUCIQDKiTSZxC/LVPUdcHZJHxZf6gMQDeKYui5e4jILFh1nKwIgHvVaxWbk9VPjtVownaOstJNhasefx7iJFLPlC0em44k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2F1CRA9TVsSAnZWagAA8qcP/1rvPyyXTYR/ekDtrRKr\nuUXRg74MKcFVMF1RUSInNVQOVLra/jf+cvhsabIG2SdBa3p3r698ZTuH1F08\nryi2p+vhALLfj0IyN3wehf61wMQOM5ewMqzyKyGgNV02p8VicDIGdOiSBlZX\nviFb8rqLlGZc5YKey9whJ8QjdgJsQ283ISuQLYrH3XLAxPbdC1X0BccmqGrR\nb/NSQgQWDZXha0qpm/ve0cylSyLBHo5yhF+fYGypk/6bgJKQZaph4IwzIIdr\n/C0eYewf19n73G5lKpBod2EAPniynxHWhFF1mWRa52JTR6bHM5e9VoavI1sF\nd0PpFVm1KhQPbaPhS97RTQ1U2uMPwxBrpD3ROW212sCU8Gk+slJGZ+A8yBCL\niUqX3sRuJhOVOlGLESXj0JSxXUbr1f9MixI/kBc3gQdpmkx7vo5w7y7NVLgA\nBhm8fGYYBTJd6AMjXjKIvT1T7Ebxpwh3ObtQkMMcgCaNvpxfj9Bw8qXXHrFp\nwUSj0WTAAkFxvvWYWMKTrpIKxwpgCTKnbi9cz+Tip5+pDMnT7FePUMSiGRuo\nfq7293Z9xsRZ655IOulxn8jL4lMyUKT/aOPz3EQY5LpTItiHF7CqPfoMZfXN\nhZtEvga3VwD9HzKMyKg9k1g8MORlYWjeTnMZGM1RVXOpH/tL6lYswAJHzzQA\nWglD\r\n=9ZTR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/touch-target":"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/segmented-button_13.0.0-canary.3dd611091.0_1628135797393_0.6270609563407528","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/segmented-button","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec24d5eb1ae67fa78f3b382839d501a905d983a7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.5dee37ff6.0.tgz","fileCount":55,"integrity":"sha512-mkXXKVFDEYOQ9nTr0O3+ixY725xQ3Z0fReKN6Itl8GzWqwbDKPqI0/L7wu9AUbmaD4gxJKR/yYkvTdSnFEKg+g==","signatures":[{"sig":"MEYCIQDyARTbaxA4lox1stCeeqnxMAyP/8BJ2RBWZa+xep7nAgIhANsaPcFtJa+/3L0io0R4NEYjGvSfb85XId0izBWSGbAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMHCRA9TVsSAnZWagAAFt0P/3pfB6JCXcshi4QJ9pKl\nES9cHiiMFMTfg/Hdf6UBmGlDLgxsiH7fFiKbDc/2ARfAhvNRmtW1O3kqGDSj\nZBzknd0HgbZdQG/sdgMmobmA2TOcORCE/3ePYYDRj/96wweCAgHKcjhT2uPh\nmDOOGNY9+oVKtGTO+0OeAPDKtj6DtJwSF3YxfsVLxOGL5GofBtb9NcNuqlAI\n59IC3BA9B5SQIO78MouBGKLdCbkqEzp7U2ii094MGKQtxm8OIhJ9paYMoxr3\no2lRSsbNXcVoHbUL6bdlyiMcjtY8p56pYCYIzGmnGPHa8c7rwxmmW/N8Z0Rb\nCk3BGaCCG7bn/1Hw3dDQ98kDIddC0+CNd777gjhTEJ1uvKf1rqU6KRWGxwAd\nS26r8treHKPLaXGHBYBmMOIgZKhSi7xsCRUQGOBc8GO7CyW/8w1FFgenbGny\n9zWdyCsQYUcA+JLnmdaKwPPwWhyKepzlhTHFL1GwDA9ssFWNH3IsbgE7CkgP\n+rS6g6TV4QV9Htpt5Crp+ftLd5v8oXubVD/LWwHJB9PSAgOyNsHQqP4oszxp\nBdxp7pKCxGQecDyLLiKKzRHzvVkdsOp4kQPGMKmz2Q/hTiOF9Z5HPJaKIR8d\nWfDvHWY8g5TGKLGOhBZ3AHK5oQgACVW3lUcd48hsuoyEFn2ta9xJ1pOxFw4+\nwSnF\r\n=Sqim\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/touch-target":"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/segmented-button_13.0.0-canary.5dee37ff6.0_1628185350969_0.253607113273421","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ff53339e28671a1f11290399d82017101a5671da","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.bf405d22a.0.tgz","fileCount":55,"integrity":"sha512-cn7iGHa17YtG+eyIJ5MqezxcTgGTH1z/5fEPhPMs+6LV7GR7E2nxG8Iy9cGc3tJsVCVFPcr88Qv2Q9r9G4U0Pg==","signatures":[{"sig":"MEUCIQDe3TAlLxP198AKH93UTcafOV/PML/4bas2YcfwpaXUwgIgbskPxNH9cKDbIXRRp9TvEUpzRz0TNto4F71VdrN4Ndc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":592492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEeNCRA9TVsSAnZWagAA+LIP/0cIWiab6K1QJfqLEJtz\nQ8fcJwvQLuWIbyfre4x0gwvRIHqCRHmVq6M2iFFt1Sboi25ciHpLZphS+plU\nodzQuHXSzWU4r+/z4z3PaBHVK2fkq5d53EbnWLpUfzNZV/pr0ymS2u1rPhQf\nMOmjFEhaHoKNg3lsBXxnRFUbE2CAfP8aZrVRfX2Z22bdWFcPKNLMNSE/sSPc\ntOhgELjBXuN38LfELCUZoCxjog+2kOe4eIARlJCs8SbXBDn/ySbsLwcVHjSF\nKBX8BXWirlR5UlTYHiFiac2tK2vRqoALVc7Rz1q6JG2GSi3GeM7qV0pAlJIb\nOlleq8suPhwHQTKcWcrFOeuFmFA9Tivvp/cJsS6nxXqYXZELKtWbnXeLOv6h\nGElbhYFhB9CNwViIF+f/xu1AoIgdshqe79akDER0dPWcWwK3o+J5PLo5gxjO\nanJ7swvB89Z6DTlAK9viyfxmW7olPMIAphZzQY8Tz8128oVj7yz+fORjujpG\ndMjMvLDlCdpmgJGk4hHJ084gf0q5JdvT5SzlILC44N2RUwBWyq0M1GPTGxlt\n3TGkjR/QBdsd0gLyjszmyepiei4OOaBP6/j1rcN2YnKsIiULVE2BMQV1PYkS\n2at7iJ88uKvfPxBhDwXEzgF6MQ4YP/V0Rcgc0OI9tK4P3RZSnlkHs2EvY/0W\nrJk+\r\n=/jyV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.bf405d22a.0_1628194701738_0.4174731421712179","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/segmented-button","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1cb337b41bb5e507aecb65c3eff7b5b65ea7c393","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.b47dd37a6.0.tgz","fileCount":54,"integrity":"sha512-mqaz3VtdeiTKrlIQE951vRguwcJAv179dzeL76EH0bF+Qidoj2raIFQ/5Gn+Nopq/hGhiqaC14LRCycUS9L31g==","signatures":[{"sig":"MEYCIQCfzohTuNrDlttuIzMeO4U9cJ0rSM9FhYugRH3HutED6gIhAOVNSt9fLFaIvoertnRSJh5/Ua5P6D8YsysIFN7fUHmN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8BCRA9TVsSAnZWagAAB+kP/1Fb/oFGoTmiQrz2QR9X\nLleZYq9xImh0w4VFONaqNHbleUqRnU0WGU3lawacsdampmIMHYJlN9SvTCIV\nqyu9hSFRx0wj75EGliXSZoSSG+KOGJIQsH6kxL2PcrZBSdGB1SCDIzWmFLbF\nzme2dc9mNh3S4W5NtvC8//aKFMJ26pOpnvVwck0xN3ZZ7rMOce3TM1bkDtbW\n93BOl2nQBtWoJNidydnnmCfHHXAWWS5enCBsErF0iRsGGxzdZ65FSjkF5oKA\nC+kQRi1F4XnH/xmvPlEttyor00iP7O1P/NoG17Z9Ot+ahzDAPOVIRlxv3oJH\nXiPwNsr6SUF5xqctA93bhMxgD02QwwVgzuqTXCMfpth/aPXrLl36jtwcDMFK\nvKgUI9Qtp3HIpLWB+4GbHbGg+2J+IcmbibGLT8mzbO32+xBRXsgUD0lF6rjd\nognRaDHi5APXOawGXpSuQbltvIYOJBMhnwIgL3GFwSA9MhPQ5GUnCzARIcuS\n49XuxJE80hZ+WvPnWmnXQboe2sjUWUVWTOwcNehoFrvJg7gb6gA4/kOkEOPM\n8DZLntiY9NTNRgmZRNtGpPYv0GKUorN2ffJEAssV4G7Hh00sLj3b40vGiZLK\nZLoc4H60e/jFJyKQHxSJG2IxqYxf9Se1rVIOXLqD161cMwnARsc/Vbm0HlCZ\nVOle\r\n=19Zh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/touch-target":"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/segmented-button_13.0.0-canary.b47dd37a6.0_1628196609216_0.18558374788259946","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/segmented-button","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f5dba91d6e0c09455775244af484392d53253588","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.6c82b965b.0.tgz","fileCount":54,"integrity":"sha512-6fkn4pIiWq70ElgoqWvk5cmJmwR3rttvdxJhGa3rVK8IMPvykr7GZz3XpRz2odFAQucdiK/XGFNwmexh5lWjFg==","signatures":[{"sig":"MEQCIDvNT35nGbQV2BQze+RYpzwykN9hj04V3XFKwuy4czDqAiB68sPXbISqwIKn0NbjADkd6cWOt3ayrg7MAT2hOMDsIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAKCRA9TVsSAnZWagAAI6IP/jWZBHzE6Oc1KauAzj68\nyfPX4I+bU83Gxs4XOZwa1ZCmZqGy/7K3EDbFYoUVcBkSwE8WMhyPtfG0vkrW\nJcDwDJSpR9nZA3zY7GJXyNvLHb+hf39QMJQ9CgbyCahAE7J+b+YzrWs4xJ39\n8o6scQPU0/jGqsI+UySqM8ixIUuF3qZqPex+a4ot3boCwri86O/7GSAGFLds\nRhIV8v+vgEgIofQW/lYCUFwkppWvSYSB/OiTxUCXy572AG2DyhV8pfkgToFc\n2VcB0AdoKHV0EhXYDvawRYaykVBGjG/BdFKfrgMi+pAvpb7J0/wBJzJCTLLf\np99e3ssyrAlSiiH2aHHtPlci2lXMvFDGwVW8GwY8+W/7FMtRAJzA1MFsPeT/\npaTVNHVxE1N2mqnyN8rs0eMpF7oXpJ37zvc7ytXSrlrXBYBQpN7LeP67Hoyt\nuYwkjMLB7cA3rFXAEBMww7FSZeqoV4WfWqkpwZ1Omeo1tHwyMxWyKtbYOVGX\n+hqzhhg5MjDqLvqSgY1jPxv+KsQ/sRaGnQl1fgHKzvd3MSRxg6UlbJ7L2kel\nAMcVqvesyLfpiioOREMNUnQ4Ad4XCQ9+GGs5RP/eUtY3JzMgW6rT4uGtvO2d\nEPAkA5HREfikvGC9wfok31CudAl+Y8tTwQuGnc7ZJZclXt1271SAmeXHJBB/\nrzAQ\r\n=AhtY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/touch-target":"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/segmented-button_13.0.0-canary.6c82b965b.0_1628266506685_0.2817594644311727","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/segmented-button","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e0737f2634ffdb6b4064da7815ee404093bda6f9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.4ca11fe76.0.tgz","fileCount":54,"integrity":"sha512-ZCTr8F7+qeeOtK8BwUINyWzjFL4zX8hMbAJceRmVnTyXC3vP8RiV+ajcuDmuA6T4MgGWglii/1/m7sKwGdhbmQ==","signatures":[{"sig":"MEUCIAnvQAC+NomNRtBe0u5ytb4lj7lfOAGh9NaViruFmc1+AiEA/W3KR6HJBakFPVNHIgpbytkDkRYgC3ckxVvJvhjphk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxcCRA9TVsSAnZWagAAMQwQAJHI1KX37ZvZyCavNplU\n0sYXPjYz/Di0MWi1k+9Ty2D6ks4mbbdK9gYqkTf62ajGyhc4q2LUlt+z3wH5\ni9hyAlj5p8oBrh1GLNcpDb9xhcI1drmFZgYvTv/i6ER3gX34Tafpz+b0O7KJ\n4e7LpNP21MMLBZTNTlGlBDT0DmDjZ/VUnMpmykpo9WRJ9mUZRmwSm/ZPQFuw\nL2DaXqF6pNZHRqO3d3TvgKcVECNcQc8aViKSZ2gVU/NBMWbHeKs17EmJCqI7\nnqg43x7vKW+QjxZdQ/wRm5tRpl7BeLUnqulwfI0+POekWpl49FMDfyxjcF7u\nqKNiMUskyZWa4X1UtfDFyLZUuhTqGyI3dcXwQNM/GQmriEMIYIzZuiUsToOO\nGwF7RkmqI2EvwcYYrXV1dn8pcaXcO76ICE5IsAl/oyuUR5uOW3jmzuFmb2cD\ndNT+XMuHGZt7ktNsyqg1tNtAcOHBNUmCkcdGY4U/wjCiPN4g8WpYcS5cgYhQ\nsB7aICzgC9wUixCULIg9cUG59vYp5Rj+i0lVhV0q85aWeSuD2omKdlkEzMMf\nehtwl7LNbYepeXG6TtHY5XADQVo9n1LnVz+3hpRu7S9g1+cHySwz6ipaGptW\nGstu2xy2yOTpybUkviK7Aubob+1pUPaMiKpdXzc8XfUzUNK8IAnZcpjR2nT0\n8V2o\r\n=1Sqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/touch-target":"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/segmented-button_13.0.0-canary.4ca11fe76.0_1628269660441_0.6380959387093104","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/segmented-button","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e437667dd142097608704393adc013fccb1147a2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.510cf90f2.0.tgz","fileCount":54,"integrity":"sha512-PB1zy2EVeHinJNU6UBNn9jhpRXIsoYRJ8R4f3/Q754DbxV+1InV5HcomPv3K3EAbpUKvfDisS3A+7nJDLIJckA==","signatures":[{"sig":"MEYCIQCwHr5xJvPoBCOyPm0WTzWNx9+EnuRkdKBal1urk45GcQIhAK/ZvgpOHgAbLH6TR/y2I38+4KMBEmgYrhX+7Iq94Rvu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMtCRA9TVsSAnZWagAATUUQAJWsUuNKhpfNr2R0+64U\npH5P5E+aQIA1EiMsWJV+PntrQuon6RMxNBl3Dz5AudscdFr4+ZOutNXeNMSN\n7ZCKNZXntxbMb5Qc6yeOoJz6RyeLeENZYyqoSwnIrhWT5FNC+7twZhLAVjhc\nn75BGMa9E6MI9/dZ14YRPYt0ZsPbLDIkLgMXlqghwzyo+zMktHicMZlx9Tl3\nztGT6qeRuogz4ktV37ExekF1umowXEbVKKvtzR9yz5V3HdekMgt7SMU+OZul\nCnJVVOyJ2EuYKea7jCg0lIX8xPcPbH5m5gPVyljzfQsj4YBLUYhefPch+lSm\n1NYwq/0eRqvevyYsX6fwtvvlQeSME1AsiwvLhFx2YMsng9vUPVrIbFOUfwan\nhAnKLrNdCVjvNHdTS8TEhNFRl2fVd3N8Apw9aVDZac8Jrra9EC/QAU0kt/F5\nQRW1a8luBK/xKMqKeo9Mo0ab95nUyEOKFCYfTppZP5T+XFw3JeTMrJuqBc49\nC4tHXlWSrz4kYYet/QtQebxtptyrFTYQCffpAgBFJtY3ekYOTG+T3+5njZBs\nh+2ZYgPpGqAFIj4Uc7fqb2qWXG+jmzkeA5Hr3yZhwAgAtXo1AgrQoglymf55\n6hTDLOq3lfuvUn+p7lm4KrGpnwy9DO+LPMHezcb3Q+0Fp/rI2wjQ8VPWojWL\npnU+\r\n=BD3A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/touch-target":"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/segmented-button_13.0.0-canary.510cf90f2.0_1628529452870_0.3558275603335159","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/segmented-button","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ff910e9b5463d41d597653c6d31c08983bccc68","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.17580ebf7.0.tgz","fileCount":54,"integrity":"sha512-DgiCXPlC2VoaHOX4TEpysx67mfGh8o3VIdb3gku67pn5kM7Cywx80lZsgST3MqDPXvfgi6jZ2QyVEysDQcV3dg==","signatures":[{"sig":"MEUCIGPSveaPufZ4SEYc2qDwhqwPsCYwAE0/+8UXTKVbiUrDAiEA/pmcIG6e3pUAmwbfifAHW5xLmDZ1W4kDxn+0k+HY1VA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFNCRA9TVsSAnZWagAA8dQP/0kPVQ8+kWW7UxV0xwjF\n6wQEuWIUe9/VC+KA+P4gWbPNfwV5gXK4sPMy0bnt9Vbv1F2kpvJJwpBiTN0a\nZoPImSPj2jiS6I2g1EQ7foeICMiJYTxm0oU1PnzQgHk1WfOjhaNxBn5mp05u\nDtYemnoUdK4SqVs5GmCHiD6xjponEQo0JSWff9P0PLCIU4p5RvIehbqyPGe2\n9iXDv4j33t70eNeepAL88lrynXdIynfJT+7bZRkX/OnYUDuXYsEsWe5IfLhZ\nQod8ewA7sFJsuq3yaZVepemVUj2TX/DzmH5Juc0MPvT8X+7k9EVD/1N6UQ6n\nYNegx3vfCSRAt5cpwp2nhX9YOTnglorjerO9IkawB2uT8KN6La5WM/r3W9OC\ncWOb8lmfOTl9oPqyUSciCi4GzN+c5KE3lY1sENroIHOQu3ft5A375xJRFp+T\nIsYMcpmTXVTTwQluNb8HYuGCUMa0fmc8D+1uS5YhtlMTXbOXt1cBaU7LDPFv\nBjkh6bZOnJ3BH9VxvUap/PQLZebrF7QuJed+8EAcsL4/FpBKR0+ygKeYaenS\nWVrFaT3yHTOm4z0/ho6CwTyjWe2KWIjAYbX6ypcVspMhvaHsIjMz41TGdUJk\nSa8kdTOoOrkLWy7CyLwFNS988l4XT+VI8MdPM9axuCZDaa9qjTf8t1s93mx+\nCzQb\r\n=o+hB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/touch-target":"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/segmented-button_13.0.0-canary.17580ebf7.0_1628533069091_0.1639366354691636","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/segmented-button","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ca4e9ea71dbad0ae7697ae15b2b1a058ef9a7f6a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.7249a3060.0.tgz","fileCount":54,"integrity":"sha512-K1S+kCENeqc80Ci9xBhaCwNRSXnV7KEBiUGUpprDzTbmYPLFtZW2j9h8jPA7Ox6lGinG+bBE4BagLU9Tz7mSIw==","signatures":[{"sig":"MEUCIQCutcXPYYNnVLoDc+3eWk3DWfeKTWA/Rdz2cbQXC1HxjQIgQcEcPT0fQ7Hrgvr8D/MDOFBgiU7lKq3TlCNPWsJQedQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXI7CRA9TVsSAnZWagAAd+MP/0U8VATPQ9VxupXL9T/b\nJPkw7hG4emO5cPCuEHjDaDwRpM951RTfZTy2RskXi4f/6dh7lxTrllD1io6N\nBvi8CwlbDx1s39Rwlmb3aBJA8NhUfMU0YsADau4RLnyn3+LFugPWv0uO+afu\npAXCBzbxVFQCv0SwSqwtwgXIo0pRfgt6+eX9oK0NPmAVVWrYkZzhHfFOr+XH\nXqkHn//I1EwSAcBjuEFS5/DrS95uxvwpHkCb3yHY7AJZQrVsqQxciY0AO93U\nSa0UlBRjMxdWZoYuqdBsOHpZUoEoQudnR7/94smqmVKf6KJmGmRU0VRoG/wF\n2n7TIhF+yIjoAZFEdaXnBNFIusOZwQOiERE/drC+Ncz+sucoVBo8fClFtnfh\n8ulsOUsQJ2OenXlZNCML7830lKgMkcqz1OD2y1kEPaPuggEX7cqpdTYdOQYZ\n5eVAWb3CzCuTN/GxhDg3hPqK9FCHMnOBB3SrRNwv+qKx1AtH/iOAwZPhSLgO\n0sUaAkyVmszHEFVwhcDGYPlmjwCJq/2iQS9xH/YRLHw6wTG8lk52msuox54o\nqLmdhNtwolfKXv9PUCiNkEf29fafRNrnHcPHMIeANequQQGBIj71jcyeMCS6\nUV1yk5GF5J1vkAdVuyMIBMFQyFaBOcaqD/Sn5FS/5Yq17lla3iVmSnW6qUd9\nECEJ\r\n=0XnJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/touch-target":"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/segmented-button_13.0.0-canary.7249a3060.0_1628533307773_0.16617496168179957","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/segmented-button","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d0d2b4c5d2e0398d62dcd850cb7be8b60bd806ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.4c405863b.0.tgz","fileCount":54,"integrity":"sha512-id+omvSBssqpJqIbQh3LLNFqO3+O4PcYqLfbts4a9rVRkT2OqhbCzOp9ADFtUSserQVVydcUJW4muZ8z1xhh1g==","signatures":[{"sig":"MEUCIQCWzrY/wm7DtwLKe95kQH0tE4ZD5CKshKOx4bulmTvp3AIgXdPcT8X4POn7sptXFQUMzUY6OrwO+EueKAiM8S6FBGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEro1CRA9TVsSAnZWagAAnecP/2uynJmoMqFv90HPl8zc\nByhhPqbofuF1qH9L5LL0UQsIuB8vM3h6+k+P+8w3B4KRV/uN+7FkpzR0/dZ7\nAiNGDIXQ5seUx5GDwgp2ixntzsqANCcmjkoVsXIbXC9Hu9aEsrxSisiROCxx\nipegN77d1xtkgT3+b4Tu+xNmsMexrMwehIhFIsbVnKnwRcuKulVq12WQRVzm\nwAQ7T2yLRDkjcraZQWtiN/TLNRj7R/eas3P0W8HtZ8f/6hGs4hJtud4bG9+F\n/+0UQI0B7Fi47KpTZddUQ8idR3P4TSWOO9YGyUKcpgiOUgAWU4BOHPqAwwlZ\nJk51JEkldzOhm7IPzrl3lEhsbTAgXaf9e1Re/EzIeNXLffE8oj2zNhJyv3z/\nX/VV8lDHTrrKGWnE7zfo2SPWRwW+dEMm1BkwwGyVhh5lHYsD+6bs+xGCaIWn\nNjyU62nKMXWRJX9RiZG21f+D/EY/ZMHxolOHvO9ptfIo97L3vXZ1s/8X5Sqe\n+mmY7umK7dhfPfZAgBQyULb8oEz3eEfsf990LtokHNEr76MWpQ7+ep3nPjSz\nu7C7IU21KWs6GwcgxJ5qOaw/0ZsmzQXOOE5/foaqDJMGaY6H1Eh3PXADoBT2\nWU6H1zbYaAlYFQP6yGGWSoNjr9bh8yUbsW8NhLkaWez2LGXsJRfdZ5fnZgqO\nemqT\r\n=v/yM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/touch-target":"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/segmented-button_13.0.0-canary.4c405863b.0_1628617268864_0.7883272532545","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"689a514b24477445614d7e7584edf0e250072c4a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.f4241a42a.0.tgz","fileCount":54,"integrity":"sha512-8PbNgBKHMmheR1oOCCiSEVTMYrlKUd4rOPmAet/oNjcbg204VySs94YOvHv/l8yxSOV+qstm9wt4bSsS41ThWA==","signatures":[{"sig":"MEQCIBsYexErwpJrozuhJqY0c/O/QS6/0zBraBjQ4mGL4jmqAiB71NVczECLn6n9zI5Z46RnLJhRYIHM/BbyR/cyW/nCyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIJCRA9TVsSAnZWagAAmn8P/2TWHgNRiH+2+71hfRdN\nuH+nl2Z8hj2qu/ZclP5cqbIn3LcVxBOUNiq6tF1KH3fjs6ihQR7/80r1fON0\nCEcd9/pn6d/l0ubecQxW+4RF+CdU20gACNCdT3BXlWRFUEWZbPSgFNk7+I/o\nsW1lCNyOQMRO1jXkTdXyhaCBzLjx0Gowhi0Q88T2Ynk9G8CEGNkbiCXfOtGR\n3WSRYpJ8O6QaqgaKED2clWzgdOqAbrjx/NTotntyiFMDG5zwoUx0KEkavxfa\nbaEz/ubpIBv+IbhHy2Bpdx25CJ6pwozsfLDREjF4Kz9dfXf3xh5KDq4o1jE8\nnIwSvFtlERfQol1GteCupBdeW4Z72vV7hK5LVUxAvnasNx3FJhq/2e9c5jVs\nDVIGhHBMwSGvbSgHC/mIswDFuNlw1/rE7uIFhmtNsK82wkbQ90bFJrt+1qkq\nqechcicmyv7QJ2IaDpiQQ3QQOHu1RC/co7D2GA8ejBq1Mv2aah/tDF4GAMNw\nMtc/eSZ9Njx+g/eZ8SYOjBJOMc1QO/VgzyVlpmWn6atXcBD4+o3+L5u9GT0Y\nO8aNzVc/MKrbwd9IaKyfT/ajJJLcbiz4T0ypaf19htUr6hRPHXVjv7ESyH9q\ntoy/r/7n5zSk8s9zzI9PIZdLzuSuNY+6QbpuVxAvPqun46Qjw7m8OPphoMPp\nvKFY\r\n=oD3g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.f4241a42a.0_1628701193275_0.9140503460095797","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/segmented-button","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3eaab5b3676d25d8ec354e4a76a3aa97679190ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":54,"integrity":"sha512-WUEHFaQXNzzBzOfOYDRycu/Vygcwn9DFRxqCX4gvtENDVDOMYPOTiBsajIiaxXuxVng29tZ6dO3tPxVJjEL0Sw==","signatures":[{"sig":"MEQCIC0NHa/33GJzAH+zhw+pzRucAX66cS9QVBCIT79UtJkCAiBMv5Ry8tP0cXGjIghgBGsb7n6sy26PVp/dSkCCCQRQuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEdCRA9TVsSAnZWagAAdDwQAJzhktyeE3BrDzuhWEuK\nSmKWZYwlOJubydsyHGKfPx/ISQ5sO0ts6giyiOS6T5/BYX7cVil/3HTEZuEq\n5h1qBqJ+98K03W5dvJUUJ8Jt0Bg/Xf4Gyhn2ZUIGZ3hU9eEEDGPv3kZFRKai\nIymPXpokoDlIzthiKBSW4D6HDxatBKxSak4oUGZIvRZ8UUbS/0vFM+yK3z5b\nKNJIXMxTMcbhLqGJQIDeJ8Cyw41EEXW++ViKlrGQJ118AePdTG3gsedjsV4U\n6P4x7RZBySpflIEv6Aue5gmCv0nUmjvnXdQ2/xEtxMu35DvXrVOsPgQMFUif\nEozcz/KJv5mnAJN0h+cokPCelx3VqBcDUlvDWBzZw3P8+Q7ZcCskLcZiAeQS\nUmxePMZ65dbQKXTc1EGZfS/HpYwRORUFLHXupnicco4W+p+BxbuIM0ep2Tng\nw/9A1sP9qO+3a4AB6uIIsBqeV2HHsGbDGfQu9g115UWEN5ER3NNCv8ydJUPI\nsM6j1FDenJQ6R7oxuXrYqLWqYp87RYOZV6ZAIYSQBwhGpgEGlCLzWFORSsH+\nM/PQWgty9Ujdo60Z8jBPNEECeBF9x65LluzF3VvL5n2q6R/Hpq/EG1H5Xd2j\nAf0o29Cp7CFq6ZVH+nyOKtksa8m1NQ+xPe8oeuhKedCmLa07Y8ME/EgG++8I\nMiZA\r\n=f4Oa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/touch-target":"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/segmented-button_13.0.0-canary.0ad12ed3c.0_1628717341717_0.11751008817580821","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/segmented-button","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"140d304ac779a37d0e9f4382dc4f87a61ee2822d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.077dcfcfe.0.tgz","fileCount":54,"integrity":"sha512-/sp7V79vzX8RwHK3aK06Izk7+PYVls3ok9tAcxN/fS4jg9u2W7mK8/2/9JSaFjK7g69griU2Q8KA83CSApGteg==","signatures":[{"sig":"MEQCIFrSD7yA6zrgsPR/riDbruV/il0MWzhxU68tO8u4vvJrAiA1s7NEAFid13+91hTVv3dKR33aHD+tDXThH1vvsB6LbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCXCRA9TVsSAnZWagAANO0P/RXLo+WdNlm0PqIuMYNX\ngGIi11r/rben8MGlD9E4+UtcUtpytNvAb3Rm+p8iABjuVIvwkOQIICM4BXJW\n9axlegPdvMsQos1kGXGtoodYs6ObRKEYP0pFcDgyU1HV1MYc49J5kmcL4T6k\n/lUMNnM/FyPN/+dqy/Fry6osuu4P2S6qrBdh1hhfkAMKhgM0fdQ8xY1ITxHt\nlSMB9qsS9edBYiBS33wG6QZ0ff9PoOfZzthjuwCWrTHSaWL77GYIg4OurYUS\njj/iBCPq44wcMbg4jrH7uIkivaMoJLdPVVyU+jBqDsyrC9B4eU6e0xD2HAsQ\nFG/HhVZlDo0DkQ6vcqxcJz/6lyT6g/pQUrUq2d8KPHmgLgN2nkiDlpfqA+PZ\nlNE4Jj5JDH+yXBrr/10tbV9I7nDq/OO4BTpSDeThkTVd7/zo/7zcr0jGpu+j\n+LiANQAV2vuSuNieluZ9o6Z6fpB/Qp0tO7J7CjY5NaaZDZy2Urm6gLtNFZMz\nrOeNhh6lftBWFLPPPM1URvfDwh5s1ZWGefqf3yiP0BpZwBOevfdbx+WPhFB4\nqY1hJvNFm55kPc+dY1JmpkcQLfijdFJXxt+EnpX+apkHUlIabiA/s6cXzezj\nOnA/sJ9/tZxC/2uxub44jfDuqa1LMeQ9FuPc5a3G0qOWr2AkndI5Q/qBhNnz\nfOZh\r\n=eF/J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/touch-target":"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/segmented-button_13.0.0-canary.077dcfcfe.0_1628790935327_0.7480700240710125","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0221c8923b7be96ffc9077734f9335610d22448c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e3346766f.0.tgz","fileCount":54,"integrity":"sha512-qgs+9GVcCsC9wI6IDMnjZ6BNJT4aGUYoM12YZvf9dfqdphYeNNIxJqTxHVT/pSW786XGucP1PGBASKuUqhU8Ow==","signatures":[{"sig":"MEUCIGsED3vHpulNDxGrltp9C5Zj131g31WuGbn29mingsoTAiEA0w3J06fQzeKsTCGmJ6oSKRn0fGyE4V06gtYDID24qLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvdCRA9TVsSAnZWagAAA84P/i6WmKSa/3I6jCDMES5T\n3oQrrixmo45zKpOeVOsMmDxDwVDf+ncYoXwqI3rHkTgtCti3hJcqjtAJsVI6\n+RKdEL0r0ZZPU3RHruwRPIbhtBJgTjAwabo1HzIB6cquxIxWdKGIfdlF5da6\nQwymMtMQF9KMMNa2rlmoT+/T/xQ/Q2MBGv2zKN7hKiqpbd1ExyE1D7QONsdK\nyW7grJPAWCTPOAve+otGLPrE0NGNu3da+Q9BBAywUWMxyZ8Mmj3LPidvfCqR\nbabA4HkAnb9B6jlvQ09DSmsM4510Jn9tj7bVcT4EBZf/UWEiBIyz4mr4Z23i\n18mxqS12x5d9Y1lbzHGlK7drrwD7qUYJdTm7MsSFB4oci8G0GUPPcKBphqQF\nV//bPcxFL/1HG5Q9RhvHoiqUsj6qmBeYBi4fvAuexp7vvBDe4LERK7VS6uFS\n4TSCkmXC3GA/MUyuXmshHmAGfReV/mz442eTsrECkrMi+mvS7hz3LAZTa2hi\n8QxRwewWXM2WTjHWVBodFs1P6vFX1CO9TEWN/QR1sQAwTuridql/BeB0W8UK\npRb4vOA48DKCGtL9jYtKvaho6Lzk8Z3tTgNsUEsvkPzU9Bg0KwB67lr+tjXT\nj3H0+bQ/tkflioPZkkw6BgysYhbM/AmeCScIVr+5HgSOFccMTcF5ET+Z/bXo\nmQp8\r\n=jIPT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e3346766f.0_1628883933249_0.24204940408184994","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/segmented-button","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cf3e3c4baeddad3777496e14ccb8c881f9a40933","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.2fb068fb0.0.tgz","fileCount":54,"integrity":"sha512-SanQGzZfFkgvkzVPco+dTpl9Uow3H3gM8knZ+aK5sqgNI51RJa7wgmCLT/WqdF6Cnxc5hzD7BfIYocHyPtzhfA==","signatures":[{"sig":"MEYCIQCoQOnID37CLU5US8bpxhkiG8wSGnLqAa59gUXOW1UwbAIhAPOSbO9agi6HuENbe7LwV8t1Us5RghD0sMSu3bVK4B14","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsydCRA9TVsSAnZWagAADW4QAIvHGGFxTMz3Z/LjBck2\nBK1VpurUHJ8QgojJzpoPLlezXbMP05YgoJGMR1fjGevWjQTafbb63bh9pzj7\nKwH4eANvm6T0DEZUMzcMvY5NKWdgJ+C+Wj6PHMouM7o9VSdxgRlia/yPaYGf\naT6JK9/IrNwSXlVfhICX7F1CXPEpTlYnqfkWqmcXq4K/QujOoifjJTZGRwfu\nhmAguHlcakIY/wPHNHyPnJmcl/UV4JSxR1zatBJftCGlQ/FUn6WIGPXBYJ1E\nJgj9v83LiKSpOpluygLgItnSJsOVMdQESeQ6tGKBm3oYBSu1jaOz4vurrXGA\nMlYeocoiOXucBTcodwt5ejeaufHzbDO8dgJW83KHTMKSMnm2IbMUjtBr2yj1\nZ9My6XnA0JFvwELHFO38T9seYaDRd+HY4u27cxmWtxt4cFUMgB4xrr0HICg8\ngSHdr2eEsakiq936Funn6IvsIcYOcsjn8UOzzBXMLECQSR7zBUbd4PojkiMY\nADcbdSlNF/LIr9VLE30uM4eiom0x8XikOrMUlaq7JeSAtzpM42TCiR4tUgwM\nSLYurB2W6geWH8JNMxk9FJxvKbPVL2WQ46QlrV8UQTPFNGuezPKqlfNmyahy\n4eZ8k1VA11QipEnkTPpM19pva7Q9KMNBU02gxwQA3ORWp3/kY3wE2YRpXwW/\nzUEn\r\n=lzye\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/touch-target":"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/segmented-button_13.0.0-canary.2fb068fb0.0_1628884125058_0.6950439934280659","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/segmented-button","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"40a253d68e513134b5ff86f033cd7a949dcd4298","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.fb76c5069.0.tgz","fileCount":54,"integrity":"sha512-xHlSxHT6yNqyMYod4riSNaZX8wdVlRwvR3JZuslRVJvBUkqiMzP3znpA3auSVNGn/vDlwaopH280zus8e9IONg==","signatures":[{"sig":"MEYCIQDTRMI0FBF9ch97urSCOYRIJFsODWlVWwR7WyXFpEwnOQIhANmE35kqsw+U/vSsSQvoDJUmkejotRBkfEYBdQ8M59e3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsW3CRA9TVsSAnZWagAAF9cP/177Vzu7f9IoT8f+jk88\n92ti03sNy3I+SEWXsbCCeYvLsHtE36pbZS6ExY/S+tc3DLxDkJ71/stnY3hR\ngY/WYYsWdUsRvnGrf4RIxnFnS0RdHHosekbUnR2JxPwk1LoY1Z+2aYOH47Ub\nwxLGNahC7geeL2OmQGNXShe0OXvjPDHlsjslHvSGZj18mlHt5Nnlqr56geSc\nTizy+RF9VpHU2hbH3s0G+bNyWakqEu1YpERBLoyHIEARfkacB8GG8we9Zd+v\ndTJEVf0k8bPdWljTCOp4+4Nl2uPKci7879zK0pxBSTHNg+Sv1qtM78xD5lgf\nz4JBb5KWOftk3rndJyPQLJ1ODbzHI5su+qqHKrWy1CWjX7Cord16PDc5Nx5o\nvpwDgZ9Er531oxLaizOUXV3kiIJmaFzNYTx3uLp1BIHxvsIqlNhq8yC+6vvC\nBxwpjYGx18G2CPi4QGYwqzG93dMayL99Y21IM4ENE+7UwID+4QCjc/4sdz0X\nyiLZq0o2HNlKfWQ7NyksBO9PDqQDTwNeK4EEvw+AndUF6rVeG/NbzTnyk8IQ\n3ysTC+lXJTd/1C8tY4kJWM0leZIvEhDhlAXPj/s6X7FtFTFcrZnADbG4ZXbX\nN0VczC/gUwLFpVlOz3nNCJ5m1x0kflGnurl1rLEePdxlO/C5D2Z28mqDzGYC\n20yh\r\n=vCCE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/touch-target":"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/segmented-button_13.0.0-canary.fb76c5069.0_1629144503488_0.5777394654852384","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/segmented-button","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"53683a3c1a8cddc6777e128188a86fd6519de10b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.457d89aad.0.tgz","fileCount":54,"integrity":"sha512-hYuTmFJxUH6qExMd7a/8+aHPGK+/ABrsrzPBG1L4NnAHPa+87Q90uS1AQ6GlGABbwz7I+Gec3FXPg2HaaNn0BQ==","signatures":[{"sig":"MEYCIQC7o2g0qt+QNCoV0ivpTrLVEiHc/Tj0VLRq6NBWTwNEsgIhAJRI8Zw9CrI8QlETxsk2cq+5Rki/JvDMU9SHrh1mWYw5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QfCRA9TVsSAnZWagAA0AcP/0VsYhdTWknQQKoas1vs\nHKzOtdQlkXE4I6X7WElCIwHEzDGZB6q4nR0W0M7mzJ+g2B3Y/hpzKb3MUZzs\nqpOqJMi0TPzV3p9Pgc3FWvUL67Nu1yB1zRhvXCsKUCvPS+h6nSoL7adUSgaf\nToT4+TLUtw2BlG6CJFaCb5Xitf42GEhPKqB6pBI5hWggso7/3zqgT8ktK/WN\niQS9RqTSCY8ABX+bDNFUx78ebZq11oZhSa2y/P5m69H/TuBHhM5NbMiba0GQ\nojcDMbqyDcrBu1bACk5KYUwipuYZSONrJ/ZhK1qp63WxOGbz6tbGbQIxGCjW\nJ9ZmD3i+jAFdfKSDiDNQ8brOGEOLLR9ij1/6g68E6Y1mWmyjra4hdC29ZdX8\nXLqYtiXYS480bSMVHUxzAFtV+kBboXXsVyhw71kASc0YHrGtycg1c4i/yKFK\n7dxNo1lzxkJrsuQLCQQhgdbk7NQfnJC+9XasEe6L8iQgNuwuD0Q7ncn1chr4\nCw+2ch8v6VF5PW2BFRX7ZZBCXe9krdBxhRA00YJ04PKQ2n7KdG/JFZgEx00b\nOnRK0LCrgN+jFeLlTXxpeHGw4GXsPR8ZoT60NJFzdf6zIK/ybzjB4b+ObBSZ\nFe7AWMK6vkkxv73WSrkpizWDI7Oo+PYiBoSTRtwXz8AsmX0finJMCCv4pRUe\nrJnt\r\n=92u4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/touch-target":"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/segmented-button_13.0.0-canary.457d89aad.0_1629213727624_0.0480887199536888","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/segmented-button","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af3bb0ab12fc504488c33dfec722d8d97e63888c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.0de2f2edc.0.tgz","fileCount":54,"integrity":"sha512-eGWEf2vXclbYXmmF4GqTI7wNThim7XFhjN8J9FIKa96SAnv4b+GjNLQ962NvvG5DL5xZTuhgjjx1LedLwG3GRg==","signatures":[{"sig":"MEYCIQCgIThS1UPKIovM/+o3V58nJ+6yf+/FIPAY8f1iWp3koQIhAMFr9eq6sAhqnwmNY1SHe1ND9KIpQT32UmyU4PyE20Pn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIGCRA9TVsSAnZWagAADR8P/2lBbnYi5TV4TUbZo1ka\ndFxtbb8npX0Uwo8gcld5I86iP1ntGc8sYytjW5l8+sUCXcwDbuy+9fGWDVlo\nt6uTTJqU7wWenBlU41lRSY450LXo7Jty7sgWDi76ggMIb73uJcZZOMW4xYkm\nqC8+hLDOYswL8/5F+fpAOCdIZfOFUUpfYTSNZpkg4zpN1nJwvl7LLLxaYxjn\n4JvWS2yQCAEQu/krZm9hVAMSKeGCudPhF2o37/SWcfHRSVwSiziTku3z3ZdM\nr1bNPi6jHIX6F4pscDRKbHzVzy1im28fb7GTHK3BXiNHkcKMRtDDWL8UGA5z\ncbEzAHZlBAt9QFyZcWFsRUcRHqYaSA7YbUiliaMbQQO+pVaAFrIEEYuD83pH\ntp+V/XgfdwML9enRveuwGUxZv2ad1Qm0R8uV4+9bfrjhSzPah8BXJ9w1lZ6d\nXH7fAC5hD2exSkEuKhSgFO+Bz+0jsCUMyNrHEZ/t9eV3hkWoJfV/kPAOQUZ+\nmsf9W5Cx75B/oBZOwT9gqxvIF4fH+PyXBpcJqrR5tJPLpAAjxhsO6Vgt2083\nZAxcVX6JwU7ZW61LfmAyxAEsbAJAWCMBEf4AmtOBzlIpIadk2dHdT3j/lrnG\n8+A5JNBsxxd/qiOdyXr9+rx4YI8fB88XJ2eyIIkcggC6/qhME4dls7OJB8Bs\nuHOU\r\n=g6i6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/touch-target":"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/segmented-button_13.0.0-canary.0de2f2edc.0_1629233670633_0.7592827917271374","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/segmented-button","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8bf9edde5d73f8108c16cc279c67dea152bbbc7a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.1f9259b9d.0.tgz","fileCount":54,"integrity":"sha512-IAxjxRuu6E/2U4SaAmKtMF4hKdctZCfMY/u11p1hzQpcnCS3htkYbt0QWmD/alJsvo0HEkpsJ8B+KsFvSUKm2w==","signatures":[{"sig":"MEYCIQDenpkxWoQByQ/CWY13EZukLYGsyIRbv95cpdXd5uzzvQIhAKUT3Nl4+hqtbSkg3dlw5an8ahqqmdZ5/1EEtq1PDT9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTHCRA9TVsSAnZWagAA8xEP/2s4GQxA0ZQF12Jx0ivF\n9p2UYfyOVwM2B72BGKH+Yyr5++x1dnHmrizOm9oFA87Rkj/g33d1trXvOi0n\n/J6mvDiDCzouxYbr2SL8giTWCNMO4xi5xr5QMnW1O+Eb7mzhWFWXFdk6+20X\nHJNRNMWXCh5CwnA9pN66cIRvm2uz08lolp/gsw9LcJJir+XCMP6rb96TD98L\nz278na3UROOT0uqhxyouTSsQQ0m2vzCr2xAEWo0az5GVC0GFv9MIxRW/UHR2\nz4Qz9HEUMXUPSzzy4k1kD+TjQU2oRkTUFiT9cYAGidKtLMrD7Lz/oTr3OYfF\nzSR2YfmMfIyo1Uatb2D8CuZYoP+CFY0cQvemSjvZM5KeLinn29CVXoQVcjJT\nlHr7Eg6uokjSjSSkOYF4eVxzUsz74aXq6o/D6Dtb3qcMWtYM+1f6s92pWyww\nZkA8zFwLkZA2rZrHVSN0ATUVKe46vJyenlhAUIzoqadDDnMXXNAR3cSg+nm8\nhH8I66IBQ5L3xV8hYSkCTYYjQOVoaY2oTxFKiPi/8rvCNRH2io+/QuJqbse1\nYDpv0iMknnxxaNdDFaaORCXFlU8DBz4ppjTIU5hvMBWpVXWI+skZSXGEBz63\n75k0Ob9bK1C9oze2Yakl2oyTySU5Jc/gh7IPE7IARFhGtxvlGHdwkUqYSD3A\naVjX\r\n=mw8v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/touch-target":"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/segmented-button_13.0.0-canary.1f9259b9d.0_1629238470969_0.5992993098307466","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/segmented-button","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c32240f20b39ed5bdcb62b84fcecf08390e5404d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.3b9290351.0.tgz","fileCount":54,"integrity":"sha512-T+c/5gJULU+iWWIvpT3z2GSGof6kDEzGAnjkbJa+K5StJOruLdRNL/xW/KA88ju51MP+hhMNR3P1MUN7VvSeVQ==","signatures":[{"sig":"MEUCIQDSc05xopcoR2HY+GbjhhTr++fZ7cRpF8WimZ63ysoG6QIgZo6vP9xFeMm5OCq5xm8w3cfUDf0PCSk+K32OHKr/xZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlnCRA9TVsSAnZWagAA3GQP/1r3fauESxYI+VJz0TWZ\nC51tq6fCZdaBT4daJz/azOppC3y9fWectPpqNlJ1pDgHE+sqJAM/Vzu0Z5Oy\nCB+xDSxUdyfYQeLEvvPWJHRL0QccQ3ZzCTo7g8SRmgmQuBE1CHoHjCYFV11p\n5vV2kM2U44blfGMC7xPWa1/f9f4hK82HRcltFvcDByxqwS134nzuocifRs+e\nltUZZRA3TnyGio51FgJmekz8TY4jAlVWdDOk0xQrITF+uTnwvMm9GFiiqv5e\nvBMSf/KghhKpQIbILr51l4w02Bjgn7sjsD7sfCp4XoiZmO3i5SFKr5iZWoZ5\nMHy07VXK5EVdnFHht+8tjHI3zJJ++biYBX4G+xP9f8FkQPE82C6M8dR5JgRk\n68bsYGitt6SlIKWX2y2vcVhr5tv8gWhN7t50Rm+DI+mq6FbD94zm5m8psIvp\n6w/AWIal6roaKpNakn4lmRiJH+c5g14zOJtfBp1YrvUKyV9YopYbrbiDyml8\n62ExejN4cHATBnfcPggeFADWsUCOmrttm2wgm3+yZ+RRrfMS6SE99XFn72vi\npHRVUUlqKIb8pwNuLYkBdNrRj6ZAOvDAe1IkTMXV2bt84XHyQd41RO0WlXIK\n2VvJhLWzVfzVwv2B/6+8ew4jLPTDbL/Cl22lokIxa9OzuUMKEvjxzYlb5hNq\nmlP8\r\n=T1LZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/touch-target":"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/segmented-button_13.0.0-canary.3b9290351.0_1629264231361_0.6843410013493723","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8052355950bdd5e4c27eb6e41c7f646ad657454b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.43d2eed2a.0.tgz","fileCount":54,"integrity":"sha512-nb7usTT5OyMrNmSOCDoA0QudJSc2YfbIM9xm25xz6llEuLHLhtT/tE1/UYArLLrdlKbJZcum6CmbQ6qsrme9Vg==","signatures":[{"sig":"MEUCIQCsIL/L355Fnp7uw8K1CEeLRih/tC3blQTBaNY6J7yCggIgdM/TBzR+/pWWmPxVdhHWqAoTceXvchJNd0csMCJ+zHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8WCRA9TVsSAnZWagAA6zQQAIeUbO4wH0SDJQ60vIHc\nwdA5GDPNBfBTgiyvmkvW2MoHLdHmWOI85/U3Y2JF2mln/bt7J2ihmW8pcN+4\nRrcoB7WmyrDr6eSWFn9DHOZ5xEjwvItKn9daewpgQsP59OFrWz+TPsqWENS0\ns1rayKVnJEV/SCEbWTBtXkMHrAy15Ax29pgMexn8e6jUFd53EWPnCkbX2es7\nbsIK4J8HACIhxO3EfNG/VUF91EW2sTnO8XhJEb7QiWg4uoo5Qlkm06cWGW/n\njztMdwDSrNrkjuVYUzpEifmgckLGpPueG469u2W5G/8hVSXXxZeWf2e1N42g\nu+6ZhVOaKNXBRXp0ORdOzCcg/XeEVc6PmZUdWnL8emNttDvOkn+VlvyU9w3O\n1TFzgjHvQFi1G3emW6yIstNGR4g0Lo0Va8L+0mQnKyETNZ7lLVnRgLwIJX7d\nxvB3oRAYzpqsDt4fC7D9G79mDlfQqMxcviKAZG9iOd8CX34tbSa+qaH1OVqQ\nJjm29wkEVDQPsbNqW4CHutol4ux7p2QhqqqP+m08H4o+cUpL2ixEWv/zG7jn\ni6e1XNt29cKNtAv6XThTek2xrxFO/VBWAOrbis+PPh0t3p3PkOLlNq31djnh\nc2AzpWSzHxoBjOXX2+QbEf2nD6ikMNASY3ENor5OAhsJAXLyUqU3bGEmOg6l\nmJAC\r\n=XK2k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.43d2eed2a.0_1629302550065_0.35288461457450415","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/segmented-button","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bcd7f115e270bea68fcb130b3a6790457c69bced","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.0a9069300.0.tgz","fileCount":54,"integrity":"sha512-EoOsL0gfN873+YJ4zDACjc1tXfwnrxCvbKFkaW085RipnQHUsaom4KA86lTt+P1P7yl3EhltHhYRNSS65Jo/kA==","signatures":[{"sig":"MEUCIHYOZ6lQzFj/1FwcOghKCiVjxanSHI8zcRfC/aR8z8R2AiEAgrSMJSVLoteu/4ejRpu1VyjTDWFIsHmcEfIRq2IloC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQyCRA9TVsSAnZWagAA7B4P/iAhzoOubDLCBidA9vIZ\n3UdieTUuUjaF1RL5A1pgasOjMEx/Bd/n17L+0aeJ29t59/b8e/txvi1wiLK8\nZgwSxCB2FS637vmt1OO4R24gxILDl/523eOC9sp2+fhPGXVleMoEy1H1wL24\nVke57HKwNxD834GWo6lh2b/IDqq6k5bn0cei7jctcvZC433qbkp1fp+0TVW0\nY5z1NCpoinWmb0mgjNbgFLWKjL5t7oPF44WOWKFbWFx7jEN+Z8vSW42AyWAb\nAcAVg3qRdIPy3ws3oqVE2116SalKFQ+WP53e2Qn11MXceDfkNXgYaUxHEQRN\nJQa+UPP4vMU3AAir7PRglvOba1+OMfJ7fASdazumEyWko7xKtDD6cktDbas8\nG10jVVwh3f+9XaYf9Ot1nWYuZ5RsAEMA126hyzbAPmm+MQn1ii3b3GIqGFsq\nkHJSDvK86wQh2nyXYlHm2KlwODoPmxKAqZccG4y1ROqFc/qhaqZ3FLW9pvDN\nLqVNXuK2YfMcvZCz1qqUGIo43wPuxv6kuzvSiZxJFaBKk+Al9bHB4fB4F9Kk\n0iO5PsYw6Oj2ZyTDkDaJNwZrNdc925UrQ3OHY5+uS+pnt8Pr8qXVZ7MeXwP1\n1bk5ackXLOVKOCw2myplDp9irfDziy4nemP/E0NIja5BKyAGd4UfLYZ6vEIr\nEiZW\r\n=brtE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/touch-target":"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/segmented-button_13.0.0-canary.0a9069300.0_1629389874527_0.3204145699840344","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/segmented-button","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ff1b70d89f76f518f3fe44ac2574f4a2fc84b98e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.7da413ed8.0.tgz","fileCount":54,"integrity":"sha512-oBM0MZ6Jw/ab0251wevlPCckKcnEMnDam4teTB29HuKckBlPCOg07AdoeaNSr0PKJyI/jraKIDAN3Jb5G+/atQ==","signatures":[{"sig":"MEQCIGvxMvIJWkc+ouViCMp6ff2t9XfBDu3OnfVf6zCX9eyLAiA1ov2WaA7MTcDnqfI0rqmbm5vD1tMtn+pF2bnCGeB/zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87rCRA9TVsSAnZWagAA4dAP+wTbNmFIC8TRtqeK6MR+\nzmoWtt7GjUPYjjDDmiIjFSGZ2YsQn9t/xIwKaejqKINoB5wNcbZmZ+MRC/hR\nSWiPy5PfBJY3hLVZHPCosUJHdyag7bextguJjSO0oML8OJFOSTOSpcfbGZBr\nizi6IkSx81zT88T0Z7poPttVke+gxCbrpHXc2RyLtJ8fy0lrsuWDvXjre6bn\niw56dg8rG8mj0vZtIF96FSutjQfbkJK7MIdg4EOYe41fDw8cWZM0aO09rEw2\nxEh/2XNJgAK2wAtGwhnrnCS92DUK1Xaoy6MZKstPo+GA3eBqen6cWyKlokJI\ncNMSqVrJaHU1g+5bkU4DfgGPXE1VOhBVTFJQ/T/vyjAL/bRBH8iQwHaZo9YL\nqSeObQ5P63jRNoYjLV8tdEFawNY7Chk9hxkq7xgIeScnkmUlhXC94h03YqRY\n1bMNaYeVDSKORETSLQj0G80t1qkhqTmaLS6pAU3t+Cza1EeoVuy1GB+TNRMT\nlF4NFHn2IUWQxw5lcarvZ5SoQDt9iGycILUGDXvCg+sRWihbKX7rgT8p18S5\nbNcuCg5/+gzpZnb+UjrXTPSeaqoci8WBVAHA+L0G1j6V82EgGEMjbYMqZgnb\nnGiX4rmoaZR+TB38bNQgDqypkrd3khrL8skvId31JqciYvjJorZTqERJNX++\nWzp8\r\n=wst8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/touch-target":"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/segmented-button_13.0.0-canary.7da413ed8.0_1629474539396_0.9660501122917335","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9d58912516df3baa4fbe84e3f83bcd90bda1a54c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":54,"integrity":"sha512-GankQqQ8HIksoJXsClw0j4U7RFSPXaStvOpL5m5j/ObxBLK8SYetwyYBM2tnlJHyeNTC7HtN0vjjFZdXpQ7vIA==","signatures":[{"sig":"MEUCIQDTmiTjio1cwp3RYlTcVgv5QMNyU5EYyuMbeS30be1/jQIgU68/2wrAmr9C1pUoJFNt4YEikNAZ6LZsVZjIfcaMlyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANQCRA9TVsSAnZWagAAZ18P+QFj9ed+3SVTDzW49R3b\nj1hyrEvDSlzTD53qGJ8m7VyB+zVb1xiPypAHWGCI6os2X7vozhp0q49vDooI\ncnQdMaZK+M32VCtZx4PxJYTNX97mEPYOsqlddevyqXOEqvG2a+FHvsvG9v0d\n3qik0DJBa7pSpceI/0oytLKrJJ7uDILwtMvCbeE93n6ogebR3CdrTmE/UbOv\nvdz0bymPQsCQUvuyUkcDAQTB75RBcgvELjKYC/KPKcXy2C7OA1ZCxQ+0F4yq\n+GlZ0aLe12agtvL/JlfztdTUJfvrDE8qFB8fQ2NWU4IDJgBBfXCUAJTRQD7l\nb60e8KablLwfywMdZvFP61VC3QndUqOFGGvL+TdFOadoYpcb2EOssp1cpS6K\nBYBJPTq9fLKWV2hyAmTVNegn2hEWwfJzDeGjrSljoKJlQPfUWoL1j7703sKP\nSHtJkAiOa1pTrRVCNXRDurKY8n/8/y3NO6waBucMtEb1NjhgzzSR4ALCpBB5\nG6/3qkaznjc/MQ+g3nUGj5uJhhIKJXMq+8D9KMSf1HUEUuJmq+1849LSDA+M\nKxjFXqjMCuPkrPLkFmx8gz8q2EOgYeK08JxsTXxq2xFFE3fMA1oLaFFNGNig\nVbqPKlDHX9zmGUYsy/+KriyCz7MkR6FETj0p0lq2sTS4tk+SbA5FoO1Jr3oZ\nJVUh\r\n=JJW8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e1e69fd8e.0_1629487952543_0.6805251750182921","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/segmented-button","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"83c22e6bafd60dac12a80e10586e22b4fb2cae93","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.f5afc16df.0.tgz","fileCount":54,"integrity":"sha512-bwtxzhz8FqDIp8rQfBfhvadjXNgsdk+QpEPmuHrRv2GcMRVLkOOZT0s9/tdayVMZ2tyMimAaChqBq2eVN88wrg==","signatures":[{"sig":"MEUCIQC6vkfH1C62S3cdymOk/4i9lY35a/6Qyuf5atuTKlKrtgIgDaeFaOB7aGkhOO+u8DzQ4LTFrkF/WCdiwhpIqJeDIDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAOCRA9TVsSAnZWagAA0V0QAIl7nWaWPT10FhjLYc+t\nKcKvTflWOo00tyIEYq+rlAKp7kqVaYE5wgtGyvgBRhjVdGPAyQhvyoP5eYhl\nDz4JEBjFP4uKZHl3oo1unpr2PtOynOiWWtt9bAXczd+E+7fEoeXqnQYbJzw4\n6n382hZh4wknI2VHsjBsPmoFx0pDOuP3Su/aUMIBxVXbsGKJOJWyA56q/IcE\n3Eqt77YrCPJZthmiFfSriOj0ScAvZZHYKpxOT1BTcMIr/6I7KMxaiVWN0y2U\nDFZtWhu6Zh1p1PcB20AO9i/SfHhCze+mRdAmMwkWHU8r15/wU2JgrF0s5wHt\nvqn8cmpIEZihljUehkQ/g2LRbjOzDPC1gBjMZNuAGdqKC9CN5UM7BAqQLCxz\nzvXz8SZIIq5H3AYy5HUk00c2MLziuw8OKSWbRob1pTIP/19c7JqYOT1GnPaH\nJvVQ3rXRxBY7JHZ5xwVaP1vFtWNP//u3ZeClZzFMRZTb7GpYEreu2sPgHWzb\nZwLCRl/H0UWc6oyO7jCQrLdJwNObsWgJodmECxitmbCizktKn8f3yFa5YQMn\n5mqFy++BByp/YUhy34+kFWLqLx2LzCn4b14oK8qPCXExRfAC4PYBMs7AZi0P\nyN4m7OQ2h4LXunTwM+lwr5P8HQplIIWzWI3+qDL+ajvvYqCDKlz2S+eqqJL7\nnjXc\r\n=Y9w2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/touch-target":"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/segmented-button_13.0.0-canary.f5afc16df.0_1629491214510_0.465016901830521","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/segmented-button","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"60da000ed3f026a90d5ddda4cce7d8a201825e89","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.28d0d75bb.0.tgz","fileCount":54,"integrity":"sha512-wMS7emLf3qgTrY+qXFDcrhO+ynPM11Zr+5SP9jwjfM0uS6fUZwwK4a/kvkr0qhQPnPkZ54OCVFXfRU1cZW/xbw==","signatures":[{"sig":"MEQCIBePUX7JsusPMA9dLUhMR2cZcZW/9kJNNngyhNTQSa+PAiABwaHE/MYSbCxzxzaXyuKZykhfSE4O0Gz+YkF9mNIJaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICq2CRA9TVsSAnZWagAAHREP/203nJotsGX3QtHYbh2w\nvXczXpDfSyo+UiZbBE2PYzLFRowDZG2ixFnBBHpfLwR6O1veT4Nl3kDO053W\ng9D9DsFOe+vrkx+t5FBR4vSEfI/OVa/ilmZtFfpmk60aVC8wCkxAAoHQCoi9\n5naBE3mtZ67E6eU3rJFV5HhkXP53hxK00w+oUtgJ2fsXsir0lZdIHQZLqqaH\n3GezaIS6j447aQ54BePmka5djNCnTFGVYI4lkUBISE1k5icajE/1yoMyIM+9\nOPgWX05vAKvYmVWGhF8OKo+Z8/OehcJIR2lcxQIlXL0saiDGW5Rt9lg58aZn\nC0swSiL8CRoaWB5E9PR/HPZP3EK0EKtNYbTQzGj735Mw8KbuhvgA+imSSTEq\nc7Fp9ZSPxwIkUgVTUpZvKzjKGMf1qrzczNBiph/sRkT9k7EsKlUBPw9X5vrI\nVCd4uKQVA2hfSlTssYA66znff7P4/sAc+h9qofhMccSawAx6vRj3X409zb2K\nCsjXGOIf2wzs9gkj8QbTMn+4MaFuq7NeS9KNXkRt9xoCUOmMXSMVILKuThvM\noJu2vQ1hXroQ4pWIuE3ZGl0zuIt0Ks6dZgtmLGOlFWQ1ZF+54GARsIdxDQQ+\n20Urzp8zAdjovrwpQWoSP5Wlr+m5RQrlIyB6JQB9VlnldaYzFzfa0ea9kN4G\n2u14\r\n=kpI9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/touch-target":"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/segmented-button_13.0.0-canary.28d0d75bb.0_1629498037832_0.5679363054456319","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/segmented-button","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9ad77254a4b0fbe5675972b9e26ea5aafa4488b2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.21ece5360.0.tgz","fileCount":54,"integrity":"sha512-50t+rN5UWLYyq8B+K8cbI0JBuKsERc7xtuHcpdzSjrR7XIOax3ZfBWVAVEi/QMAKCRV2eW1hSzibky0dpNxKYA==","signatures":[{"sig":"MEUCIHMz4aeqwIqM7c4AgOK2V6S0hehSe3Amtn0uqPtw3SALAiEA+SwLvhSmpdVwB6ctuhi6X+TvBQAOzg8j6EcqIKU7TF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5gCRA9TVsSAnZWagAAKf4P/2iNAicQKNpNVbr0aDub\naXJ1XSP7GGsnAgaDSeSYPqI6LXdptG67zsV2XkeWKUgKBuNEe7tSZXCBcg18\n/ZlqK64cVZOD8XZ2e93RjxWsqo5nVRCaxYcJeMN0UdvSF7lq+fkTytxkmewb\nB1kq9Z8mDFCo8tBQX5L++YDxHDZH/v8W+tAqc1m2CBbulWtCnBbiJW0jhl5f\nnNIDqNdhq0kEYjiFroYEDgjPQ/d2/XasDSf9hMv4Wt2Cs2I5/Bq0DXNgPEni\nLLM+HRJBZi6s1l4RgYM74WRCvqojv+QggjOJ0DpNQ2Nlps35J3Tdgwfl6R4F\ngnURAwlTuXIHnI/tKc1OTxu+snRxhw/9LakxQ8Gzs2VgiTIEjUljowg6MLi2\nXIJ2GBpq/0cboaLBGg7fOzGdu3kehe+cX96BTYXEQhwlWUztPzej7DAWgCOO\noz+Q4fm2ego8tP1bpaTvcu3Vk5xxAGuZGvKpSt6qk2IXDELzJygCks7EhB7z\nVfChBhC+KW8T/QAiGlvWNn8R06M7FovXZBvz79MqRwycDm0wlrvZxFn9a+qz\n+QZdnOh+RVqU1oH+DKGwPoQxi5V41396/yQfxKByii65MqvjvLecPY4d/8ut\nz8jF7zsFEPo3DwxdLZ8ty8AsyMRYvvABgx4IXJXYVFUJHezg3mv8+sbY/6k5\nrTMs\r\n=70z3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/touch-target":"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/segmented-button_13.0.0-canary.21ece5360.0_1629503071520_0.42220745651986147","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"36c1eb5817742abef68c1cba6fe56192f4f28640","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.8de07c02a.0.tgz","fileCount":54,"integrity":"sha512-H86qBfoxzv0BfO6UefA7SEv3unhvQHWEzc1n2DnVonICnUGiKskXK8+LgxYXru+YSxh0wiDpGW9/51zze7+j7g==","signatures":[{"sig":"MEQCID6rd7tzYFjxXL4NtQ65tj35ez0yak/fW8RS+1PpNFmlAiBCr8s3Z9gsQLgs9mftKyJCvBh84kRQNTM1nd2lQNzdSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":567590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75BCRA9TVsSAnZWagAARrUP+gM0Yq1oQktWk0hX1r/h\n4iJIownFLZApe2ENYyRdLFJrMpy/j6DS8aqvCG16Xhb6+QgSDLKC1KX3Is3x\nZAlbuOZWpB+ROnODu2wzhiQWAAacG1hFtaQz8851KexEQGKGH78sM35Bnbpu\nZph2buOhHgMYiI2fGM8IT/hZB98eGpQcU0PGNaQVU7uDN4TvgBy7Fc5mglVf\nJHB7TdRsAU1OlvTtDqhXZEbQGsSQcrAtN1iCFRSSg/9j+/AfDudifE9mQ7EA\nypZNjjOxljLJ+0wTwLEfeWq0d1AXzxZnbomxj6OFxY6faGMXgm5yhv1OFhnd\njmpvd2JI8gfEzxXnGZy9VQvyT2ihKapOXlwDp3O7dHnOJil8i2UCOeGR6QbI\nYoSIuSW44la1iB1q5N9ZxUnul9j7Ocl/+TiuRZUI2U/eIuym80oR+Y/IP1HJ\n/WjZAwwWEj3ewVxA4cWFshc32XbX1xZQi1qteZx2k71DgSiTjxQg2WIWHwZv\nXrlJpfGF/TjPvuYeCJPhfPZ/nWi/S2rjqdMdgzXcCJYDaVbfq+ks6nO3LeZa\nE+qIqTtIhb7JbylxBpLfWoG/f1ebbMacyqzcZ2k0CJ0ZeMa8UHjl1ck+gK3W\nSXY6LWm5yzYS7Q5OKrYruBl5zeO43+xmaFdoD2znS+2R9u+57sH2zOQpJfw3\njzGy\r\n=LjUa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.8de07c02a.0_1629732417146_0.08332995287580292","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/segmented-button","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0b6251bff5a370ba6f216d55b3b56420f383e71d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.65aa63b0c.0.tgz","fileCount":54,"integrity":"sha512-3JlnPNuEbgnJn8ZUNo6KYqWVUjnhv+e/UPL7rVLFfBk3GNQ2ICvlFCqSBbs6eevBGDEFOmi7P0C9B2lbjsokvg==","signatures":[{"sig":"MEQCIE1njsY7pPi7VRxLBgx2mpog33FC7KCGQoeUPGbRZGehAiB1/rAUnMu1gvVJ6mj3DbFpjqtgmhEfU+PgIPnhUMO60g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRA2CRA9TVsSAnZWagAASYwP/23Uv9Axinv39l3/mzRv\nMxmoJe4+zpA6ri034z7tygkOHxw/Tfip1VCipZkVT51oIvOjPiukrX9tUnG1\nXgKLKPft1+xrr5rq+nvNJ775u+7wbaCxG75+/9v+5r5j2ngUk9EocUqaroWc\nvC2ejYRSHkx8W+RoA/CuQy2Ivk0Nd3A2QHKHF0bm2e1B5tPEP0FZytI277mo\n1RoL2JRSvFEDnRGl7979s7KQUlk9N0gUAN7WEE5KIdqowsO2o5+SCBWL/WHK\nzuZMfaHqJOHSb02xe3FSlsg210ffUYvpcgU6E3tXr7XLrUIYJH1wHJUd+rFx\nZ7EyVvrGAJn2IryxR9d2vFgEa8+k2yD5cT9wrkS0T86aUVXwyahkpoHfgoFr\nL61hD5W4bzy6+GlFJ4cGq/x33PN+zgn2knNJm60L9gEbYONRk5lZDK0x4+eC\nJOUatn7Lu6i4Ric7NaqgaNKlyaxi7IBLbjdDUJCGglXv4hzLLk25RhsXY3zy\na51tGcOPjxo7Edfr749/Qmmz3/O2YHBvcCwWUeFdM0IEjNH23+jgeP8ncVTn\nsvZ8E0qSXIzBWauH2EMkM9JV6ulnO9X0o0eBknA5VmeQxq8kwZe3Mhq+JLQ1\nin7tZrvfdsurwLUdGGJFSzYdv9uQ31TRJBB4XMHiGjWsFUEK1d0WY6saPNvq\nff5j\r\n=74RG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/touch-target":"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/segmented-button_13.0.0-canary.65aa63b0c.0_1629818934191_0.9231196816927647","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/segmented-button","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"968b302f69c2013875a6e0e26d7a4ad7710848c6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.15981e9d9.0.tgz","fileCount":54,"integrity":"sha512-UxdbLNLK3tRes7CP6c/pXqKKikopQtgpy8E41HIP6+DDX5iv/gKYKi7Zy8iK9NxKbhnvZnkouslDhO8p2pwmiQ==","signatures":[{"sig":"MEQCIDim38J9O/Vol3fqvlioKsgnedFzHlkuJ3BZ8bcx9tJYAiAm/19ecWRa1NVJ4NdyaSA5u6gi9RPKm+q1q+1C2xq0vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRuTCRA9TVsSAnZWagAAS4wP/RTDSOiBsR6k0w1hrbb4\nsuLzdLNexk0xxi3i3Hh3qzvG+RqpCVX7cV8mnepvg4rlvNmLmvGw0bdnSC9/\nZBiAbzO5BU+l4jZb7u8zgyHXgXN78MIqOYAvaE6HiQYRTGwH1lGBmsKOOaCx\nHvDrvSJRqzF0ChMFG+GYu8hpsXe1WjyMLsTu1Z0A3l8I9ukpS7Zsrz0vAS2S\nMdecM1f6adZvBwJsG9qfCHFpjDtSYC37E4HqHx8YWyezIiyYb4gq7pS9qRrG\nWRgcI1s3buQvCmsYVgThD82vueNWTwFOf5oOAd/0SOtTFB7ruzqudT5edeRZ\nMewAK7zpk/0gQG5/kizyYPnrt2UvjDBSZGKht3PbnOSqG7ibCDx4M6c3PoDM\n7c8GZPoYOOhL81+QUhvqBliPk/wD/tjBn7vp7WaDV+0v+YFW4lKIi6JJVBwr\nF+9lZNGcKGA5dw1OOSr25+9YuYaGc7x8v7CBYBg4i6u/YJrM/jAGf+gKGYb0\nSOOjUm2kqRTmeLTLC5DNQBAPzN2KHOIwp8X4yAJi2fCUB33a2oBW3HVDAL1I\nvXfE/7N5tFXV9xc6fvh8xxQp2xeen59VO69EaloyhIdl4NWIoJuc6fVuGlf9\nkc6pmcw3ZtKwIQewl3NWTTCPKRNKH9OARBCBOxg0dFhxncw5f8iLLqr9Q6m5\nP0dn\r\n=JwPG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/touch-target":"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/segmented-button_13.0.0-canary.15981e9d9.0_1629821843731_0.8295802769957059","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/segmented-button","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1edefc5bac83cf3a37c04a7ec35534864efc3687","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.fa7520f62.0.tgz","fileCount":54,"integrity":"sha512-dNH+Tdv3n+M5PzzcQuPrWdUm0DVVBBa5WUuhbIFDGIPTKJSyWQ4IOYibG1iekhMCqZifTwjqi1cMyH/82+Ux4w==","signatures":[{"sig":"MEUCIQDaxN5KNa+icLNFK8PTYf1E1GZCb/ZDAlOri/00pKarQQIgKZ0CHXsQ4zlnM1AdoQiEyyjW4AblyuMXOIXJGa22dXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJ4CRA9TVsSAnZWagAAHyIP/iId1LXKHz8aE3GAkGhT\n7lxr47h1vFABD3wy7yynVtwqiqQkO8HV7F8asr2GNxHaQeIxMBcNk0trVp5Z\nagCGTDS2lflO4jn9kCZKIIrEFZs2v2BrBSZJABw1/RLq17+Irnq7/b+4KIMY\nemkxOK9n4Gbn3bcoV07C/SxWdtlf8v3bnve1DmtgFtSGh1LGEaO5+dA+aE6i\nfosSRMFabU6eW8Djs47203dFm82euno/ZSyiKvrGa7BK/nuBqJ3cvS1EKpTn\nxQ+SW6sBTTxiOisIDEHCzgtxiOyEJ/cgLlIWOubTQqLtmma54bC2XRru00Fm\nEs/+kKpGPeusXIZ5Qt5UlBq01yUpLbQfxgTZfsiOfkULuYaL9D5SZh5QCUO1\n2+yCEIpJ43CnUHa22JTs5XKcky63gHQXBDw2EWn4Zuyvc9eDUx8n9DOfJQ4c\nwLCN2O9OEKFIZpmvkswTuFUu6QL6AlyRClmiksktQNVMoBzvEaTTmNzzXzwo\nD+TIlQfUN3EggatlShMlUoLmcHHu2yJvmBGFbnKNIGeRARDGHVGoE7TiFCO7\nwa7wAzxRll9jTz3ynXt9R0pEonKBFGJcrL605wpjhwWihFU2by2SoCe7EAof\nqmnGG4KhiRDhIKhTL+KDiCHxqj62BNoJ7czMSp4JGy5CBiMFCHzfoRULFPd8\nF8fc\r\n=xWd3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/touch-target":"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/segmented-button_13.0.0-canary.fa7520f62.0_1629844088780_0.05267172498724437","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/segmented-button","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da309e39c338cd8e62549cfc3585e717e92aa578","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":54,"integrity":"sha512-/IvnKxsO6+PChgv8vRYLaeA2/NKs8MAu+1hbeB9sB58lkDR0fJv8FsDc4VlGQyEv9GCbmZzPNFXs2353RNhFog==","signatures":[{"sig":"MEUCIE6NBsQLNyVMZ6aD2MrSnHP/mgnFx11hx4/BvIzSW+G9AiEAxiyQ6RWjSW9RAMqTaELvpGmuEpuL3jLhYgOVwK/G29s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdQCRA9TVsSAnZWagAAEmMP/0nugyLJz5sHK2PQvZ1Z\nwXjFp/5fE3wCcy1p3E9TjqzLuVQ90KelfY2MNukjAhwuoYVqKxGIRI6voJKN\nMNwANzglBPzHH+70Tz0obMzis6dkkmKRuhWUQHoClzbyoPN20jQ9Z+uDsZRC\ngrnpkZtjHEf5k2CK+9WvNBWXg+cMaYPM3knHZOeyRwqq7lBbx6XLgcgZ1ZLs\nJ5MlNQ56tvcgNz/y4lS382jryJ33o/z2Qlgzml4XRLpukceMx+cO1xfbhpQ3\noQWDSq8WN6P8yleSZJGB5YMQGpqtg3ADsMXRTzkaj6Y6FRWq2QHereS0TEYL\nhYx651dRbobIsnZ6qCjNEFSkjeeriWhzPfKY0rm62oA9BT0SfoviV/DtUq0/\nWNpjwfKBzXHHCTqRfR84Ec9QKA8me62UMujYKY988knk2xtH/PZBR+IdtBnp\nX7A87cqnhDgwYRue+zSrPLoLjKpCQ41AuXgNKoGyIs4KoOZXGQY1mwhhT2/2\nib7FJGYDq1OnvBuDRIry8zT/byQiZRhsaFZREvM0E+Sue4EDmVtNqxbknr/2\nR/AEZZhdJKVRTag4/c5XqCWeWJkwyfdnTXUvsNvKlajl8UxcS/pjhTdCUDV8\nKpq+/CIpJ7QpAVWCYHnyvfXMP2NPud7uMSPf8Ovcc3FmYl5IQNJiMHh3ZtAF\n7IgK\r\n=8PR8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/touch-target":"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/segmented-button_13.0.0-canary.ce25bc3ec.0_1629845328187_0.16367440431090463","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/segmented-button","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"051bbb9414d21c9b6b1c41267ed32465bdc4e620","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.12f5622e1.0.tgz","fileCount":54,"integrity":"sha512-KAqQKYkCNS7T/aMc+D0dr76B8JzuwoxC7iK1dQtlNYt6F3+5TJtq1WkjNvP2f9uBMWTCmxXOm/URXjH3Aq+BrQ==","signatures":[{"sig":"MEUCIQD5lz2CnUVM1biqY6zTilUD1ILYAS/XJnfZg96mui4VsQIgIIm8GModtFlt2V68aOOrmhTAnbDHU0mkXBZgFlDYJv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX5BCRA9TVsSAnZWagAAIQYQAJ+E//BI7ru5vgK47YRY\niEJfw20EZM8txGxpPZHS9YmxUfkdmDpYW7V1QUJJ5ClXabg4vfN8AsyzoFAF\nX7sjkKOW8L4lXTN7RgJxk9ltYJun96G5y+gwu2pIbi5CULNAD6/xdZHqxSkC\nt+ZaE9r6KeOkq8k/UzmsDDE/pyASCHOSs9xFOE4rgWqbd1xYJdKKsuIZ5Dhw\niykVf+aV8rf/QLckWTqKZLfWpREfA/scviqjwHWiWHHzdLCsQa6zbCka9rM/\nbJcIke+EKap2fx3Bng3zumwNnIB7m5QMKtMoM+bZo8bQ+t2yjT92ePHF6/v6\nr8jhNEeT+e9XpOsQcMMH8VCcHZG22/GMmgbnR4JRzcB5PkZyCNMpuo/7cwgK\nZso6sGocXLyUuXCHXYqPysMlMaZG3955kKx5njpRLG1pLiLIbCxNltj4gEsE\nkfx6SROU7yGoHoipueb+rCh9XYte4HXhWrrSdsC7MPxZKmiEvv1TwMWr1KV+\ng8DGAWBV8l1QSrBCJ5noNy2pNWxVgVjrUwWLuVb8G7ZhcJI3N3hJRVFwSBaN\notI6K/j+eo7ychmynB09BykD1TtxZBs+JYx0T4Fq+XqSnNolRgBKN+x7aOGE\ne+wcQEvD+aQV2etro6Ui1HT+83RO0TTUtMp5SKfMu2ZNmRiHFUMF+/hdWsgY\nPDJ2\r\n=3PZe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/touch-target":"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/segmented-button_13.0.0-canary.12f5622e1.0_1629847105724_0.12129536331018032","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b2f72a578d5f2267d678694eb8121df946602663","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d97f8f133.0.tgz","fileCount":54,"integrity":"sha512-xCu4/0h8xmKINgXTFCepwzbuPx5VDq5NSPS8tBToygPiWhscwYWh8Xlkchq/hp2syJkINqt2apJ9v2UfJ+tyyw==","signatures":[{"sig":"MEYCIQCnPEyUyqX4iFUgvURHl6Wt729L99OW64xmquoAjLrqogIhAJDu854/B2cfSAgjQHUGHFJyUeZn0o4X+EtmS/z+cS/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJoz7CRA9TVsSAnZWagAAsSAP/15uVMFf6mNXzqcY0ESY\nTuovMECBWSXkIOTPL4hH8eifowmyKhxQPaIuW0qdr7fm++dZqfHnXmep9dFP\nQxm1adaXdkVNSLXQWs+rTwDEfmBXEuUKAlwbqus1mBQTZEIbXYJINGknlPbH\nFtEV90/EW1/9bwSpOBNbzbZZwQxbbjHs8qVEgIJTAzLE3qyydLEnmLmsKNxN\n2a4KxhSjiVcJcNH2o4Vvmizm3ERC9iVoVn9HYr0aMZSgsJ2uyRP3D5IDXexo\n5rcrzhV85itc32x2hwXi4BymbcQ4cSjdvwEFJ2TG/tLdBxlVa6EJ4HeCWc80\njMkALEjgcI90HcTC/nDgs6m1JP6KtPfGlES+BvVQ+iUeoGtYpwP4j7F9U8uU\nGiyismpKRJuMWzr0JPg1HZzkmPfHZZ/ncL5LyL+wyVP0UJYQrvF/6f4dedbL\nrcjQdqOWnkJsww42Hxo/gRW4qKSUy25gGES8LZZvLXfyF/th+DLPdLt/u8Cb\nhlEPIb754B1uAKwYlgS/uvgvXUsVMcKm7gFJLRQApiZvYsrx5Y4DT3S8vsrO\ncW5jXSbdbdH1LKc2m/c1A7LI/YyfYPhvgX/Bw4ZZrUB9s22i7sxoQWSiD6S8\n6Lm3rRaPUKVv4dv7klz5u2gJJ6YrK0sxhol7RzqZvVRx3gRtIcIpZtPaAzci\nAO3O\r\n=edzi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d97f8f133.0_1629916411687_0.9527987858461207","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3369332c3e54892ae136e3c7f87a2c612a33210c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d86fb6fac.0.tgz","fileCount":54,"integrity":"sha512-QCkK3UslnlhvIqenGlEon3cYd/aZGLcq3ZCtXbafh+lfqeOA9bBPIjP+oqHzlNnA2NkXaPxPXqlNjzovO9Nihw==","signatures":[{"sig":"MEUCIDLFxvBb+/oIm72KKOA+iK6abDisdr+slrDnCkEzgScLAiEAgF8GWCwTCsRJzFYqasrSCDfLSvlWj07MsMU5QCqpVjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHLCRA9TVsSAnZWagAAmcUP/iCXDd8qK4P8nFq+Vk4d\nfNuPHVz8sR7bqN8Wd4bVNTo0NDaL9oMq3rRo+mJ6EutkZ6rBGVmHSFrrEBeb\nVy1pjbLKabPtNhOHcjG6JG7wHL0Og62iblzdO//25j8ni1zeC3DXXmOAfkH/\nGqFIXXYdm9x022L65v8MaAs9zgejWV0fMqDktyUM5aAbY6ferAPeWNah2054\npdXar29CtxTa3ToE2atVQp8pJa/NSUt3VozMRqKeTUNpt/i6DK8/6kcGH6Yk\nX55F4rBhJdEP39/TDJa5rweDQaWR/7XQFS6Zggk8FfFt+Ao9SFwtoqNCIUlc\nfrhs8A9Isg4wDOnlaNaN9xWFu/Lldirc9eL5U2rL2+Wj85Eg7qyI+BM4qiJc\nNO0K8I+NlYW18ylIB/YjiFcxeONZTV86zQuivsTkxpYczEQWJvox/troLdRu\nMAWeAh3lPT/ovCaHbZhD5CJMcg3wjtFm0GAe4mat8wDITRTbJLlfJ5YR/3jq\nqVBIL91+PtE48K1mqM5fZCbq3qdLXSEZNahZcon5PdNGupiBI/YTXhLv2Irw\nYrW4ffWQxHduDwakitbi4cS7/fYWPpWVOdEtpYW0qsBG0APXUh2Gp7857L0t\nawD16RawyFeBfAl7kXMcNswpII8Uce4X4VSvWfxTzCGXBdoJJz1t6wz1cxpm\n9YxE\r\n=KDw8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d86fb6fac.0_1629917643783_0.3221453319618164","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"66e091c7a10c67152643378087968f30fd967428","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e8554dbbf.0.tgz","fileCount":54,"integrity":"sha512-Zh2nhCgD1VI2LhsNlN5lqqG9y4Sl2BdBsoWU18mSZUSYFD9EbR/+QQ0xWG/VZRStVZal03mzOIVVQtXPfuOyCw==","signatures":[{"sig":"MEYCIQDmlcA5/S5Z8DtIa4rAutb36HsbNHQs72hSmxOIuUv4DgIhAPCvhg4ebeHhEPQn5wmeXwGiLytqRR9UVZo/G+LIeVjR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1PCRA9TVsSAnZWagAAnSMP/1fyYPGAcmOfY5lW4Cad\nIfUo8QSB+atp1XFrIUECrV3gKs70HYd0DeFWRx/YsyqsApqsXnAf1d4dlxyM\nH8nQbcTmxDeec9GQ7aPcQ0igXMLvtzwV37SuV4q9LBbhf5VdelXtbHiRBjvZ\naoZLOQ0L8spiE6FdMIHjeKqSwBL4MDkYWXOttgoxGdcqWf27q2r725zOCLhl\nbQFpVIPTTAERqw01AqN2wlV2hLrJmwiKWM7pzU2wCFUtJ89+MwpRnD/i3TZv\nhEB9F5b4LoyNkKZpxBRdeii59cwHXQp1rrSH9unp2bxhCVH12LGPfJLLdq0p\n+zlPIU+X9GoD/FSzzCVgiLH7wj4uTfHeOrFGg4NmBJ0knRFR7ztFPZSsDRwL\noOq2IWzJQ01SCt0iPXDDU/bMM1zYbz1Mspldc43x8Qeq5H0h03kcYHDI+Auk\nQXjdjlVlGvbd7YTd/hv+fsQyrmjxbPotR4EiimmBIVsXNP6aKWQW1gdWWoeC\nYat3l7VdEuFJIPeqUMML7sYEDC2BNbqdV9q346cabV+eWOeLjQeQCRHtLX7T\n43E+D8XAyJ/wEIHbVV9ndbml0mm/WZrNIhU73E8u9dajxrFISAy/4Luy0w3k\niQ9BCJG13OlIh30PnMv8eOsffhYEMnwaP/Y11aprKka7XUZa99f70o2BFv2V\nGd6L\r\n=xEgE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e8554dbbf.0_1629928783284_0.8546043447444083","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/segmented-button","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"804bae300d7c6f47a9d85e01cee5a6a7a841648f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.877e3fb0d.0.tgz","fileCount":54,"integrity":"sha512-qetXM0An5ulsuy0nh5/hOGEnxSZEipLmI4Vlj4gL6U6RJAxHydZrLEShVnSztMQHAjeOSqHVGQqJhp+Ksl+kew==","signatures":[{"sig":"MEUCIQCFksSLquvjz1ERb0sscbcOwMbYA2hz/gP7P4s30Yo4vAIgIrgIT7oD4irJunTDZu4nv90o+MdNNy1jHuoyDAlxM3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VxCRA9TVsSAnZWagAAhn0P/jeLmVHh4bI0OJ72RPZR\nXTDniAK7/UO1N+MeA4x3wvIG1YiVjfxdHgxcs7QqdafV7kA61pV8B+bW8zY5\ne61iCUnDl4/rLu9B39a1O2T7mvemg6xvKtcm784fidIVU12WjLDFJTX4RqWa\nc3aG5QKGozjFN1eWuuLhndlew4qDquauKC7ISatmSnjfNZrlV8J+TSqdFa/u\nPf4bM1fdzJx8YU49O6AJhnbpstCholw0Puf6+0QyH1ZS0CY1bByA9ritLDqJ\nEH1De5QCVMeNSZwM+KNLLphopr+O8o/yXZVibHloJ5/oOQ9EV2IV3tdubqP3\n5DO5yo1+itY1DjNpdXYPA0rZpIjCC95wgrU6pgiB6DEW8sBjgBbgAdYw8TVe\njIMB5CyHwG1Bq+2hbuKMVy0XVmbRnQkYkrf+eEJtyFPw65YmL51z0p/3ZpN9\nVTgwSmmVYTRSdlKkmtr4rcSC5N139HfvaRcw4UUKrHbU4Qp9wWbnDO8ngdZX\nlD0sC+AhlalFE8lMxrCkMdYwykFdx5uG3XqSDG4H84FP4ALSwy/lFUyFmENA\nrn9FQxVUV8/38T8/rqnf+fXFD9JKg7XvkP5CFYsdMd9JwCkpH15Vx2jWyzxm\ngoRiEzxNiYXh+2KkkoN/GFRLbdhPiaq9g+ZEY57bE0HyHTtpgOzhhME7xSrA\naaPb\r\n=KCrD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/touch-target":"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/segmented-button_13.0.0-canary.877e3fb0d.0_1629992304987_0.7722122610548543","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/segmented-button","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dce97373958a132b7d938c972db9272f1f9bf272","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.6236f3576.0.tgz","fileCount":54,"integrity":"sha512-aoa3IZM3UHJHTzH8AMfMQ8jiqJOoWxAl1l2Kpvzl51/n54NJCr7/LvVYIwmntpEcy/7EkoY27UjDLCgYYVPnIg==","signatures":[{"sig":"MEYCIQCg2xg7ncXgfpXVs5FZi423igMeQV9IQgzNCi3X4Ajd0wIhAMPj8y2+U6yfvvAMDCtrD4bLMVA4jukHAlM1ww1spALB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vsCRA9TVsSAnZWagAAnSMP/1jhYkNztWJcENuFuoqB\no1vb1hVb4JKTXNDBDr5zLOW523ZAMxgdzXREoAz5JLMdCHR8ZXAeEE9fUsnQ\nNSjr3sLKoMw2RraoWY0mJ/jgfw6Axxr6dmcMT2PT3fRVyZuTrQg73IdDFH/Q\nGtSfgxsgkh8TEO45TiKijKsHHGsOq3GFpbw07TQTNt4cjYjYiuLcigNMGBu0\nLWnJgHqlQ8EPvh6iVBwxUyx/c1mXODZYllKgM88j71ST31y1FS/Ui4GZQ0/g\nws7DUQG8GLtXDychpaWgdWcv/gRh+WQBho7YBrhk43gNy3ZqrIlmABX+hFKk\n8Oak94XT9W5W/edySivY/Ci/l8FVqMzDgx8g1i6VIXwVH3JrOVy5oQAUv3Du\n1EWc9GP+Wj+dPls9p9HZyWAU5z1k+bmV0wTCp65HBaXmN0h3CFuRudRTi10V\ngC2vUnaW68QIqnxgWYuH+EnWr6TAEX9UUtsof94+cyZHlBM1glcL+9FJe+S3\nFK++Ap0WqWGK57Bfmdn/4GDTggO4xaJV0h9Pf8fpos+q9k1Mava5JyDx2y4T\nO9vVk1V00vl9VMODJQhCCoHDrUhUq+Z6tfjuoSrPIiMvP+klCMkmW19Y4wlB\nWZywJKI8LwipWbWgx6ulyEYMbVAedrgC++TNXrGMc3uQ6lmIJTQsnhOL/5dC\nx2O0\r\n=zCQc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/touch-target":"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/segmented-button_13.0.0-canary.6236f3576.0_1629993964364_0.10564316036005383","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/segmented-button","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"21db5e06556a35aeb96792f544665f4ee1e778e7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.1d19158a1.0.tgz","fileCount":54,"integrity":"sha512-AgT8WR9WuaQFYITVGW02wZFMz1D2LXsrkVSTqCLDwVqsOYyJMX72rfRSChX8WzMTrQFNaPKpT8+shJ/WpFvo1g==","signatures":[{"sig":"MEYCIQD9GZGoTTE472TtUjm+6CShIpmeq8sFePo04L8jXKfFDgIhAKKMdjMnFTlfBnCfXYZxp5kPc5qMO5zCn37p2kJR/GFU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8q8CRA9TVsSAnZWagAA1mcP/iKmGzghXKugrvm/CrHz\nvhP6YPPNm9sWPd+NSZdhHEbRmH5Z/MH4mD5AuEh2VY99Q/3MBiAfMq/Ye5wa\nSLlE2FcRSsDTxDhrBWBDvkEOcqdlAMDUJUg/mmWjQ1R5RBmYeRyLC12yEhh0\nX7RnhedVxGscLo87Opa99m+BKstOIiwivXEboLOTntePkUE8jbDZ7JbFXyPL\nyxjvDaMUp+vL7FLFzU/YMmlxogX46wI8m+syDtNgDjWXnMpRjiCKOrKeuTad\nSoPHmgDRj7h+fwZWoW8LuF5XesH0BJ1uYoIyi46VHA9+8zbPWhn+1EQ2KEMs\nhxDlQnGe29li3z9Su4FzAt0Bwu2lRSI+fpFSAbblT0XA8SlXKcT7JLL2H4FC\nn6xnOnRC7NRdVs012MWIcb1UpY7vaoHVBxRLqTJhl/lwHkTMnkOsky1jVaXj\nSpODBwPVPalQSx0zeCQrOwP9dnPGL0M9E+IIPzmXlhMTNV7QO4mTHRBEzjkr\ngd7kH/Jz+2JC8AIDEE4xlZfBykmT9TZoEKDnCsnExtoQvmzwrVI3JGtdNH6v\nCg5UiGbthQWbESKhU4G+EFu3rH3UiyJWa/bdJSNqgq8E9wFk805p1pUVUz3d\nq2qOEDBYbNpwBN1vF+NfIKN8X9m1FKB6vznUL++PEY9/1sVIIQWuRo2FnSPV\n3hLm\r\n=okC/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/touch-target":"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/segmented-button_13.0.0-canary.1d19158a1.0_1629997756037_0.32590173561257196","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/segmented-button","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"664a7955abf773827c498b1db85cabd6be6906ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.6adc9e83f.0.tgz","fileCount":54,"integrity":"sha512-HtImvph2z4tFflwMLeOhEtfFhEZx40bbjyiSS2ydzBK0eQ20HtNvBgCO3zkLPaF3hoCAyuEt55UOBMjJb4+y7A==","signatures":[{"sig":"MEUCIHnshlQXTrU7TXGwU49A5vjc+BGsIPbMLURqUviHk5pNAiEAxu8P0LMBp50+p4pYZyIbJQFjPF3TrIQxd+FWVgPad7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9UCRA9TVsSAnZWagAAn8oP/3TJjEt4p3qI6eWpzpW7\nZKfxEEjEsChmu2yxhfK/e04SUeQ0yElsvAKH7LwUVA1kqtq8P7QPf721c0lK\nrDveSh9Rf7HRRLae/1BhnS+hJJSolGFSeyxRA61X2Uuiy26i3M5jh6rAdmcg\niaXVyzusGo6G24aMm2/pyAn6cMDji/FwsiRQC9ktpqwJw2MyhQNj2cqHda3w\n8IHIWHabuO4ZY9zJcODi7pTaCN05pYs76CI8u/f6tiNokZyrEWMEc5awsP2i\ndvm9AVC0CBvh+9GXqAZg8cqDd5ma74VNHI5k4lFUZhjI21MGf/sWMdHFRJcg\n+f7/gMmeHJW0ReAczr+A+X21u2FTlW1w6OoXqenV+G2vPd6Et84J53Z5qXTO\nwS5VvdzuBTvHfx1natgtvSDkz3zpjrlslorKUMqr8nD7WLqs68AEqDQzHoRU\n9yUmefwEqpckZ9MUXmZuiqYN+ydvVVdOmIFO8sXS4qJpQVSrf31N9GWi2NSt\nDxCDVeNPALM8q/zcsaDZ6dINnFjaEI9dB6HyByLp6vcODNxZ21VztQZVuIq1\n6/stOvhYrLEvZpC+tjLW4Yze9mTXCI2VGByCFCJNy+L51wvKHDyZH8HLMcAF\nHMK3WfRL5uuoJZ7jMtOFCYbtouxsFqNeMa7HdPZL90T3/4I2EoZK/YHPJ9ml\nle7v\r\n=QZMq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/touch-target":"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/segmented-button_13.0.0-canary.6adc9e83f.0_1630363476655_0.6905953221978081","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f1168fa1760a58dbad85e5e7d363b28ef9ac9370","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d082790f0.0.tgz","fileCount":54,"integrity":"sha512-9fM2MKGC4HaJtY38CGFfp3hHDEPrLUTyRfA/9enZvPmmJ6Zh9pjJm59djD3O+bOkASLaw94vN5/FP8x+jukisA==","signatures":[{"sig":"MEQCIAOX4ipanaHj7fKk6h2dSBkFrRTP6grdEC6ieCq+QZAuAiBiRcodRClisGTiLBOyW9JMOi1JesDPGCPbHM62rke7pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aeCRA9TVsSAnZWagAAZ1wP/RxJjwIMRhhV1AIJ56WB\nVSZ2W6VPB696x1pSaRyJIdwTuVyI7CU3ju+64JXMGnJHunpCjUUt+Wk1HFnw\nf0eHe/6Fh0kK8Yf7w9n6ZcjWWGvEo5T6FC+7QrGKPw03IQ4yLyoTv0lzf0ij\n6/v+tg/k4Ky9ZshkNxyhzpOTVHj4BjKTY1kDZeiOvmdiPluN/CzCBwS9Nozu\n7TsT9zVFePHgvUp4UG2jmiwJVfSCIvLceOwRopTyQ5xM9hFEC9Wl4TORjrDe\nFPPUmF9N77iysaSvQ3y+Rt1w8ia0PXRT1rj/XRIoQQ/AQvz/Wtm9gzdhYa3S\nVI0b+E2JvK3uQTAfonkVzNhJZ9TEVxPyz4TiEINak8vCLey0UYxSP2G9DNab\njGWD+a55sCvqsF1I284XxIhI81B7YSWkoXwUDldaX1xFPJ001+YjsyUgF7pp\n3O0T8GW8hhTZT0wKM2EMoSFHA221ydzkXHLL+40xbYDsSmG4L3IH64bKryq2\nQpq/Y5KZJJ4IbSctFSQFgdmj+GCa7IMdfXbDX2sAYHAAwj9I8KTq+EnQTGKZ\nJUcOUQ6N2vj2wuLyKSGwduTnjX9wIZM8OoMVWI1lhEeY/tkOS3c0XCs0e0IJ\nVTKfIBdyXrMcSIHjhXpiMOUtiRKbwn0ohV/5GjSuDGxVkQyWCB21K3JOvAe+\nnFuS\r\n=j/jw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d082790f0.0_1630533278040_0.2905035678303023","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"00ef3170cb60e0fbf68cc5e8bdce3c383f29b7ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e2c4f0196.0.tgz","fileCount":54,"integrity":"sha512-KV12oVKK3EpNfqB1SwmUAgbR5oKHAYh65kt7hoGjCtOkM/N7K7Equ/EWrHf9Sms4Y/8JgL+fW5DgbFK5ER7lQQ==","signatures":[{"sig":"MEQCIFBHVH12n3xZ/VxAbLLHPtnKdmNBNLNJ7JnanoHfFtEAAiA4gusEoXRpQqSYxs7bLLAGv0wMPIotQJ6uH1fJE8OuDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLcCRA9TVsSAnZWagAA3NEP/inru1EemlnQTJxuW/YI\njeMXwGqEQio+/fnzSAMLhbJxnDTZ4e25FiUXw3jYxHzXIw1BANKvG9CkBXjb\nXbOMLcfkgtqd5z/Z7Nk++twQXx20nzHZyeb6KRtjFAAxEi6YITBbYkEwZ7YW\n2SnYmihtpN2v5s7he29Ywc7UXVm+kZod4r5yM1VoFola48QVcSrImZMzRAxR\n9tJkO9yzkH8F4ZrybJl2+LI2+M5wvdkbsoRoQZQMmUOwmW2C+g4EfV8SwTxM\nWP7W+hlEDCOryEi1d6A/YyXb67b6Ew3WIxHs89LnxbMa07qXPuy0V08/XOJa\n0AJBNazjarmFp9HKdngsZkilRxTIulFRojHPUZS5WyHOXVpkHXOUKKphPGr4\n1jlH7AKy/cZhhw/+MJi9+cg6UNFAYRFe/3f2QoO2Xuum+vFdYoDITRHs5xcj\nOmkTDfhY2fNOxEhyhfdRzT7AUTxPppT4HhqnK8lAiMDi5OaLVAoFxhYfJCjx\n2DIwzL5jZiFOlU3spgyL641veQrswMQ15WJ5bISTw3A+U3BbAqY+PSu8ZHql\n1y+UFvqTtmgKjTqGFffHFZTgbNZgJaxVwGZ415bwmtPPO1Mz387UgrlNFNOv\nYWydN+4kKQl34eys26Usr784UfTQipU0O73wsOUiio2HmKj8Wd+/ooIRChBx\nFSEH\r\n=QmpH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e2c4f0196.0_1630548700389_0.6369016424954457","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/segmented-button","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d76a5edf597ea700cb6e2e55f9f0c9992b44ad1e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.611db508e.0.tgz","fileCount":54,"integrity":"sha512-3h3WoxwAaO6RPlv/27tMFrU7OKJxno3qSajeNaBWPkfsLmS4dC5o+1U75eVq2IqI8Dcc6qqU7XbA9EdWaJ8Z+A==","signatures":[{"sig":"MEUCIQCbOYzZaVi4A/8WhKSLoLSaoxtfFxT13JCTKZ8PQSt+ogIgC2NcQ+SP/PUBekiiAzoUFiROyCWavvpwQmXoHNxbizc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHJCRA9TVsSAnZWagAAeXIP/0zZ82FneSGI49vjz/RT\n2CSwVMRZLTbyIpAJ37AkletnaTBNwR21GZwgeH5+ZyV+Q/9HsWjdkoGXAoSj\njsb4UWZRwivJtwXYeYLdvgxGT3jo76ILsxxjmwTRf4O4E946RF8XoZhonAsU\nBRYlA11NWlApZfjzpyT12iimLOKWy529cHz03T74kEX2UuByKy8wt2S1q8m0\ncy6qbSDFD8LOlCotf3LM7sSVq4fXHi1bJCt4I2FUafspcGnURU9T9c9NMdN9\nANcgYOc0cYbdVmcfWXFvq/IL9klyvrM67/ddm23EJKziJ7gPF4cAA5/zhEEF\n/hYBrbvpnHaRPRpEBGxkfwbJKItLvE/mdo1JRlegjkSBpQOgP7Di1kjaEaxE\nZCCIC6UeFf01UUXU2yxjeZxksDmepql4pTihAxYtjr2+zvw+tSNSSE3jCJfy\nOe4ZpJjgSno2i+TkG4usjUB0d+3vjBPTJkPqb38dgLBQJRzvG7hAb1HgJ8/S\nuz9qOf2aAiAmuq/9dslFw3uQ5MYpCmudOC0GNgFAxP0QxZyqdvUoBvMbnVQN\ndY5hdaKx/vWzazExi5SveehE118NDD2XDlXxMw26gQ9EtGSlsfuVp4jsJqrv\nOgSZQPDOKi54tP0N9bAiD+Lx9CCr1sVB8iLRwzHpkPAM6t5J9SaRAzenRtJF\nd2sS\r\n=eP7J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/touch-target":"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/segmented-button_13.0.0-canary.611db508e.0_1630552521674_0.9196115663544024","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6b6e6ce61119e294e8ecaec1debcd671d2e3cb1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d4706933f.0.tgz","fileCount":54,"integrity":"sha512-2ONnGkgfkCVJEfd5jgwXXg0BpSCSRyf1/OtFUfFVaRF5rVh6LkHglOLu2LcbQuvWEHUSTpgNQ71TIH1fzdXnSw==","signatures":[{"sig":"MEUCIQCeidWY+Gm16WIafNgsF9rlq4l0VAW/4IBC6xJXRtuR0AIgRJBh0g0UI/chgdclr91PmgsvGT+Z+x6/EkasGrzckMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/cCRA9TVsSAnZWagAAI70P/1t2HNEXqLVup4lMwaPF\ng3Cs+BsJYe9KbHZcRVcQ1TZddHw6m6/pDqdIRYlPwqHxERf+G4D6zOBb2Ay4\nL9v1goO1KdhoMTtq5XAiFKLlqZi7uiME0FR2cjgtUf5UvM/53L8Bkb67OWHM\nT5/ZK9GKlt0YI+sUPrcknH3eTx2CfKyOXnD38+FFG9HUvj5RgHwTK3aT0V5s\n9F1AE62FMZUM02p6qf2DPboYfmLyXPR4gPIMIPF+SZaEXltLUt9zjlC1sbN2\nlazhA/2/aJlDqFR5Ertu/ymeeLT6NJJQYWmufsgif2Oe45KCjdf4KQstz6Zd\nnY8AzEItoc3TQ1ZJk1E9lZ4RnfJn+IAsWgZi/11EIcKyJxBXF83I9V7P69lI\nAdt5a3v9m+/CiLxDlHVAylTnTufHsbtlhF50mZUFN/oggajuOPtQCVAOl914\nNBZyuwGobdd3qvqSBSQ/7oJkZgqsXm+zuqOoVW+N8n8+jjlJPEPvJ+t4hUPE\nQXYxUbGe7pn1AtI/kU+PiroBwb0WdOxVPUChjb3sk5Xumijm4oDE1B0MLnx3\nk4e2ltJJMJe5LfmbjX3qzbQ76QFkfqBAmTBg0Bx2i0VE/AnSNPBBOyCaQyoO\nKjF93ktrUnVSpGxekoL4OlSiBGSxDcK276o5+/E+XL7zosc0iVFhWt1VA0+4\ntF5e\r\n=Y3kJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d4706933f.0_1630597084040_0.6083613875815761","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/segmented-button","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5a160d41fa8724de782a7a40cd1910ecff4a2393","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.c16fe03ce.0.tgz","fileCount":54,"integrity":"sha512-/gCFR05rtvRml0aeHTshHJQPTwdO0Pn5LmeCo7DlR6okNqUI1BNyIJG2zbmT5HqyvLNSE0rjYEcSWVJaGp3oFw==","signatures":[{"sig":"MEYCIQD+hHXJUd1+FrqhFb6bZjGXrjhCsjeSVSo4RV91xvbmPAIhAIsrkSsrI+jwePQdALqo0hzHbFjRXXejVIK22X+ugi0e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2gCRA9TVsSAnZWagAAJWQQAJ2pgj3xUKr6Ey4EZy4O\nPgqDPoen8HhJJCbNAO/kK96IPhGLYV2uKopZeuvQkLWAcOkKw7kLwjV9i4c6\nSzeDfoy47nk7b795UfTJKPqo5rMaUTAnEytWjgXpHa1hPhYRAEbHuLdMNFRK\nO5L/mXoy+hYxlHdZMJyGBjEszQzGK36ARVdLvq9lz01chMlj+F9aL6MIEgpp\nJfenBMjWT0VkQBHXffAE5DkBujZcuQN+OvthaMhaYuZxZC+91YeF2devgZRd\nniQguxYmhqQjoUMHyP513dbemfoojJcR2BL1Yq2+jfUcdEadUmD9cctrDtg/\nt32RtQxhgWlfE6UxksOI4QHqDOFOmapmOUNEbiqXef/kpR8/v1ngte2ByJyt\nQqfNzfXsx4EBwMvRKy/Gw/ctJNvHGUU0EDdk2WpVPK7tdFr0FRmucu4DxhyH\nsBkYdja30uQoLuYvVF7Br31NKiVCGF1QKqW9GmUibZ9h8G+YO2QRKIX03K+N\neYTP7zZDnPTLvOO5+F0XZ4vIbyUjnR1UO8V8YlT/EcFej3k3vuGDAIh46rDX\n3M5oGoYbmuoBdWupaaQ2YCqZFh1Aw8duylM+9agKh2STdvBfOekcSQj4041N\npkDxsv9sU+SvUJJrr+ixJhqktW6Ak/NOQB+wppxEJnMXY7cErzrsqi6r3I1X\nsBJM\r\n=iPk4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/touch-target":"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/segmented-button_13.0.0-canary.c16fe03ce.0_1630604704136_0.6263784145322537","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"90e25a6735f460f7440fb48df27e8f9eb6408e6d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.9203a958a.0.tgz","fileCount":54,"integrity":"sha512-uVXH7WF2AeoJ9KqD2Rac6FRkC5kFuo1qahSD8D+2+l9JSrZ/v0q4yqxhNU4wQ2Z4jPhUcP36ZNcZ5zVBogGSsA==","signatures":[{"sig":"MEQCIDe2X7crnNhcHYL+OrpWCc+9VWsNiK/Asp5O2J6HQP7WAiAhNmqT6xQ8g/LOIGt+YzbfBqi78fpFLL2hDDv5cv3kOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKDCRA9TVsSAnZWagAAsdwQAKME3ZP4zXk8c0iL2+Wg\nOrL5/p6sYsLdVqDcWoD79IqdNEV6uZz8ETHnBLc3RT1FPvCdQzCTqP2JxmnA\ncUjiFB0Tqf+qOcixzC9n/Hhoz7RHqAKHV5epekRw4g3xivR9vxQWY9PXdzhi\nEnKcYogknWTqg1KOHQz+PUZ/ZzgB+AW81tyTdCL7jObW5itOWrOGDRv2pmbs\nzca2PDP+VulGURYXcWHbCVq4BfYgZqLfvB/cpHO+XNwGbq1RjTIesOS0y7HO\nI6A6PoG5nMD99Jy4tyjIbhh+l9NBvruEKbzC0ZuazumCNxd6AXwLLwFhaV9B\n5b6dN2IAlgWpxJijQIqUQatBUYY9G/Gr03DA1ysSJRZ4mClbYBXYIKDkQ45N\nkJcIpjurMxRp3QtTtSjXkTMM9I0D+yp4jB75q/zHUsALQW8MS6XujU0EMd8B\nW6QNAEgJ81Q1O9sKu84w9zGc7J+vMPiEPS0hnPvMbo0L8SjVOk55LRSXNnFq\n4EEUn0DhwPUQ34Dox3MzIS/QlR8VUTvynNiDclmuMfDuEbVNLflx68evJtg/\n1iJIL16DpBMiJ7k2zwoghd1BRK9GTt+IfLX4f/5Nb/ViweMG2xb8XoAx0MFu\nGHMX9nBP1refXJvIfWZdOEyvayDuAziXRnO38BlKkvFz9/UWNUs74U8PCe+n\n33e0\r\n=vgDm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.9203a958a.0_1630626435470_0.8372155672864208","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/segmented-button","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"813e7c66403003e58ce2c39c384c4f3549574f34","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.fddd5ae93.0.tgz","fileCount":54,"integrity":"sha512-bCqybrn0mIJX+zJuTGT+ov994D2LiXP3TPCbFM+LJr75ukTb2e+0K+YuoZZ//+IrM3haYap19w7vUi9GJP2CGQ==","signatures":[{"sig":"MEUCIACA7Li7uvQeKhrjozmPOaNFlos4qYxUPJKezv1x/F3IAiEA48GvA8mq8eburBhywz/DNdJLLi+BVnNIo9LaUU8AXkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8vCRA9TVsSAnZWagAAg8gP/3Rf2/6EVyvq1+KHLR9y\niiJTkv/RstPPfmYNOfeJQ3e6iZsK6Dpn36CsBP77s+pRGORJGeXqKwZpBkRR\ntcY16/tBcdwRoCtHyUrbxptShsLudD0d6ndRorEdrllUe8d+FidfqDnGqzUO\nj8JZTS5UHSFR+94/hq8k20FCjN9T32l/Rmn58rYDOZi+HQ4a13bb6lghcGj1\ncDYDoPicGUNDEVrpe6qNe1xFL3B8l23Yw/UJUPeeDThgkzrdgdAmmMHGuRV9\ndD6boUJqVdSMg+cU4wvYcACrjOEDJSr6lTalJwbxzB36+l4FRKXdXtI+6OHE\nAGxhpPqRkmMCogpKPal0Yrm7lhjdHerPyitS+ZUTjenzLiyZVqL7RvWFSUkF\nWGWwh+6Rn4Fyp3Uhv0eDg513hSyCl2OkeDzdAfmMu4X2GjeF7PV35E53GqCL\no7BDKuTcR2LkPJazW1c4T4jxzYbqbmF0QAO9NaF6/H+jYCQd5URoBspr+3S1\nEzeBJJpx8N3iXe7s8n4y94QMyOY3dW+7lUiN2K7YFYvw1gmMs9PZaLq+JjCm\nbqZ26Y69VzvuhuPsN95y+mBXrB9IugxYQz5Nlz14qjoFkfC1vaa/aVVSYYA6\nxPLRgYIp9O4ZSDIFRGiqnB3R8on8iH4nwHMNNdYHWk1Q+6Wvv0z5Va0tcqKj\nW63+\r\n=pcUo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/touch-target":"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/segmented-button_13.0.0-canary.fddd5ae93.0_1630654254840_0.2878296862964125","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/segmented-button","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eb6f10ab4a6bbd36ad17b43d960d3a226d29c875","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.117599a8b.0.tgz","fileCount":54,"integrity":"sha512-rOXCwbo+AP/e9vWQ2iTb296FeDEvELawGB8GCOOz3slMz5rvMNd5e92TYNgKKvTokYa0oei3lOBBdFqc7szZFg==","signatures":[{"sig":"MEUCIQCnuEXM4PgeCh7jrrj1Y4cIBT5Jrk1TOIzwZTphQ9ZA1wIgbty44qY2x2fHW+Gx5PUoBojxQh08T2sOCvm9qi0Iq3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+PCRA9TVsSAnZWagAAcFQQAJny0SpYGE1GinB+4N6T\npKTcCMwcFpOKXUUk5MX+5YBd88FEB+myDW4YoBOrMPqYZpc9LX8QiTiyfg8X\nMq93VpGFP+9yLooyDjqBjPc0W8Q+KgvpykTTg2zvaV2SHwsCQQfubj7j64Yk\nwPfvvHrwIFYRfZCfv7uoxT8ORth1zV/ZBlkSVFpB17g7HkW6FABsdXSO3/Re\nqNJoF25yRgDUQOBhzSGu9QZGuwRkuh1FgX1CchcP5yvLtTtuCJ8bCEANhT2q\nEHnMrNQK/JNPk8NUIew59GQFipuhjh/fwIIuJE391UiXG1vKRugRCsiCd+pz\n+4ZlnlJ8wNS92a/ZX6fvsOQRRGQ/NJueTaZsU9X0eO+MYykzsqg1il8rg3Oh\nqlpOGy6E0aWhwkRm6ymnmKN1fSiisxEh6ffr4+I7tTZG9vznGC+HF5/cHaIq\nNYCTHHSamvFgwSuMIJaXHNFy9F2Vnkka9ZDpMb1wUDZkQBC+o/oYbDQ02j9Q\n8n/ODhCtn8vQYN5RnjkRclEOWRWniSKBad9efnFpf319Y0T7zJTurHlYx5vE\n4u5S8kkZQlXgjQW5AUbrsgvXiE89ZXD+e9V4YX8Yb+mzrUFxNzRSO/wRl3vW\nO9ruzNkfvmIq5gL1DgU7F8mWenhS2Zt6N0/Fk1Nj8oI7EQCikcJZVD0kSHnD\n+3Yi\r\n=UHr8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/touch-target":"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/segmented-button_13.0.0-canary.117599a8b.0_1630654350893_0.2771197650940884","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3f0fadfb9f6e7d1783269dfd63c125fa610d44a5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e4180d07b.0.tgz","fileCount":54,"integrity":"sha512-TCiFe+NIJy/90+2bRUvSurx/jrEkxQLAVTZsPsTImwayGExnl83SAIm8TfS5qxke67VLvCVPeow9kWU1wcv1Xw==","signatures":[{"sig":"MEUCIQDQZdQGjEjdMmdlfJd4U0WJYGFKz92P7SALsBvj4xn5UwIgeN96LBd2K5+3FEYMtrGiqMYpjr6YRRbS5eRZ0Y++Ajg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+sCRA9TVsSAnZWagAAAOQP/iriK8AuGFYhV66oyBgd\naOAvqD+m/kMatOiDxCrl7ESY+9m7r9goVZn4K2gZdH4uWfnyhDP9C3AFYP4p\nOVn05RkGBiw433P4wBcXyK5S7A4dqAqBtjFkvBzK1DceXDiJ/v1A9izvFvzg\nIgrhIRmGreAioVPX8TNCgqVzm0OPX1O3FmxaqCtqGRR0tm7mYbEbxD8Pkl3F\nd0bDvVxrFrulExn+Zq2UQrNK6dkvN29G7NIcUr8oGKGED7ZhM8inUWxleiAn\nxN5fnwEoDnnzXeSJxY7KCSJIKwbX8IUuFZyCRhPf6Vci8sXXSVioKeo5OXdP\n3K59brSt5DCE1fHRtN1i/fWWd3Fb72cDR7fMP9P2YG48gS4uAUtTclzMxgLB\nyaeiv653aK2PNwO4pezXWCaNRjCKXEWr480jvJq4sGDYJ2gX3/gMBy+iZ6tP\n2G+NPvnY//D5xn7fNAwi4t3GKmJ/4kwpgaT1nZ3Wwa+/GQtMESSIfBNb7ki1\n11pcstTIIWapqI0QRrHCUXIhq8PSosRbaGTZd1+1uWyr9Fr5PhyykPpjgBAQ\n/pTik042miudPctN8b0n8hpU+ppm4Sjt1LkX4IrCJL6QUG2pmWWlbUwSBxak\nXBZWoGaHvFRP8v9UAtcO7konOezXjwekPccgsCU3GFbeP3kbsyIpHU/xKu0G\nQUQd\r\n=pxKf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e4180d07b.0_1630654380195_0.9149109458413791","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/segmented-button","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9cb3f039c0d571444767230a6b1f900a7ef83199","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.42d175efc.0.tgz","fileCount":54,"integrity":"sha512-WRIgsmFub4vN18A3Re0V6CWesagEVkJZ720nWpJ0qtQ1EA37wrp5vA+2G6q6vA2uaX/PmTeeU6wB6p/pNDN19w==","signatures":[{"sig":"MEQCIGYE5W1NSpD7rAJIk89el/os+TkpnkBLhGZLsXfJCR7lAiBVBbT7xfN6D+3CPOsQgNP8sottabgaJ/+iw9EcT1rjIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkK4CRA9TVsSAnZWagAA0uUP/jQgLdZeh5oqQaG3D+J0\nodfqddcwyiHAr0Zi3NkUi38XVbDzumst22xi/XUR7V/K1lzN7zaOHAdFFTao\nhReagJmSisbO5sxMUlNnl8zn+PJf4YEkxzMqiZrJoIFidJRw2qTgeYPo2E6a\na0HcN6s7yKjBpSER575LS8xVDff9sCkPjjATGWEy3DqyZ4gLpa0kVurlo5pt\neoL8Teyu46utF3fhQRC7Qc23uMzC2PFuVewrxgp1I0p9cATR20xn69lSEVwN\nu7WPF8P+NgoMgLnIMIo5H+Gj2fX6GKzwmPdxoQQqaIOK0+O/bUB7llWy5GbJ\n62L0SxoDTcyFfB5sUdFJp5+JQQAx/YHlQtzA/cs75wyHHXRfSomLqgWczKyh\nUr8nO4pQ+g0NO8EvmXZaLkW+O3/xQygjjLoRqwpIqOtaoQmKSdYULUlZ78rB\nsmrdKBHGPBTh7tgYxBI6m2Q/6JaRuSxeD48tcsoatgLvnmn2nPwuN8nST+kk\naspvHGT8KWSZ9O2te7I1iBOcwJtZabwDAUdmvusak/5mF0Qf0eR7v5e5ZqYq\n/Whlwt8F61bgibE3y/8qf7wBCprIn6H6d+mGN0yz15zLvTjWJRXTyH/sxS1J\nnOdU8+UDA3Y2jGkxk0/h0O7MhBHfugwgKTbxymLbbxzAtPLRPMVSZr7n+Sc1\nNdYm\r\n=0K5m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/touch-target":"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/segmented-button_13.0.0-canary.42d175efc.0_1630683831835_0.4798358181001052","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/segmented-button","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8508be4c95eff46ea7a2fea9ca265934f62b7dde","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.72464476c.0.tgz","fileCount":54,"integrity":"sha512-c2mAFhmsDEOwNn1uUu2i/cpUAM6FrrvM6I4UWkujiRQFVlN01pRbGHSo1Rbt4IbphdS11nchB0US9fery6bUMg==","signatures":[{"sig":"MEUCIBX0P3zOweQx9F1adUvJwQs4o2m8Xm9vIApl8XBkCbi9AiEA8Utm1JPGvNu4gmZRTh9kyrCnDZWm3IPejQjIK+Yt7BU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4avCRA9TVsSAnZWagAAWaAP/2ypoX9b3OYAS85r0LwH\nMcK5FT9ofFPu7XTYwPV7lmWqjO3XXw+l4I8K1N+NG7mwxrxMZzfpMj8B90Ru\ntVpUgkqbuFTiOzPZjErYQ5XrCGauHX5lNnr65gexUMS7/SlmE0V/NS7QQIsT\nDMq2MaXkUQXFbobJ3bBFDZ5az+nq6tHJYu2qJ+ZQNeKZp4fxYSS9cLdGTDkK\nDKwxN+7FJ5njt7MJKlbksBpLXEaq1ziDYCP8Hw7CmuNtCQJipTlaOiZc76Sd\nR3RH5AYUEOu40iHxjvGCq/jXFHnEmxFsf1U//PjQWBcSrR3iksIXG39bJA63\nQ4fphGYd6yfiWHClUVmGnBTquQ+Jk7miJ0tv5rK0u0yrzbquWFz62sjcOD9q\n7Ey2F0sNyvVeIfajjA6kOkuCMGZrfsaXfuHRTIhTyrFwbibZcqMqKO4o1xPR\n65uV6y3C15Cv8vD8UA2TMxhFl/rXVA3To2AyaTpI3rn1IQGQdIaFgEfJizQv\nZwLH2FJHIlPgjnGpm1ffm8B7+PyHDSAIYZLd1WGseFKJQQapPcYjbhtyyEYT\nWzcyf8R1syhHruLNftIplxdV0waGqKGXfD6q9qACCVQh7ZULimFh6nFCDOGv\nhLce8NVglcPhxz6UIlBkmAImRsiJ+ort0xwR2IgeAKJZ0vllDoej6II2cSQc\n/vcp\r\n=cOs1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/touch-target":"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/segmented-button_13.0.0-canary.72464476c.0_1631028911759_0.1933444384712224","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/segmented-button","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d92373d38386d8d9cf6e670040f41d690ab1f7b5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.37d4db866.0.tgz","fileCount":54,"integrity":"sha512-IHquSXZhMLNHnDH50d+Y50HVsQRxhvlkwuDzPtfOGG957LEijoYStoNd1B1x2go84uLUClVE/AEpJZM5bm/sFQ==","signatures":[{"sig":"MEUCIFuoiUAun+p3kGP+p7DM6rWbCaLCOQ4N3rE/ioWeDEoTAiEA4G7DkaBdP3ajtYTZY62rHeKhi96PBYid0SGRaiUel1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhtyCRA9TVsSAnZWagAAfcQP/jMOZ5f2RaCcXNJl+eC6\nlA/FOyenDv9wwNaOcow9XJcaoxTIDisbAdtuhvIkQliEQjtm/cdGbWrgIPMJ\nxTLzDvZP1yQZivv6TqF9tHOlhi4ziUfw0yk5pYChc+fK+vu70Zhpq6K+SY5F\nIh7RVkjyGUppPiZJ8Y0DrxejVjDNk44FJr47tyinxW+4502dAO/FOLIZc5D6\nQM9I2+hsI8JrMgubiC27cQLJoFUWnG16D0i7FvxkYqZnwjY7EVwC7IZgZGmY\nZDyWET8ydEYOZ8h1q3TMTW+gRPd5B+I41Ar6G0sQkxsAlBTTeHxCY1cLRnry\nH2uxNTTXGxTu0Py0iPjOk2Q69fmp8DRkthjvW+bBnKXqf/eyFJCPE+8YAKb4\nBhRk031rfdrtWN1Lt62uCGhyxNkyoGrdo2abR4TxVNI0JEZRUp+NxlviynyL\nMR1T+4L65Ckvid70lNXrmGsizn6o2YR56MjEQhLJSOUEJi/jgHOmwGKSu0X2\nlTzBlTox+DghmZt+UWx99V/ZVeLEeNF/7zLuINnPQI4tgkybPtzCZHuPFW5+\nBANF0iOPPZxSHyMJt3V+Lxn9FVGw3V5YFwcENf5qIKMSAaooPbYxdtWGfRza\nbxJAV40CM/2lR9f91+jStQELLWXZfgOHG170XF2rDnHMlGjTvvY9aojPvzxO\nLLip\r\n=c3nl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/touch-target":"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/segmented-button_13.0.0-canary.37d4db866.0_1631198066429_0.07781366284116609","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/segmented-button","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9ecf90f86c590e5e8c930e1f543c7ca32b987fe6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.6df682e74.0.tgz","fileCount":54,"integrity":"sha512-j7h+AQoet5QqpJIFb6LZlsmU2bUZ45QgA/ZcjhsABD8pKwrc1c+aAamyjMK4sFTY9eGBUPvRPrMgTS0gmvMbPQ==","signatures":[{"sig":"MEQCIDF2yrZLeVMgK9Fe191R44HqYSE4scKufCMaN56indm7AiBsxichjrHtn5oLmzna5E9jYyrt3veB6oLYawx/r9lNVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivKCRA9TVsSAnZWagAA6ygQAJGozOcR0T2506LA5ftT\ngnfjO58lwlHEjODLkJ79kgSMxE0yB/8VhdAoSaCR0+TpEYCLDM4aFMEW1USH\n9n2Q1inhmmf4M/YTUfZRJQc6VdSUzET3yEQZONHGFbv0HQ/v9SylIkTo+/es\nDn+54TnP+G8st1mY3bjmRiGW6q//A6IH+2UIfbowxd1OEHokNC4rVkQcmi5W\nAWbzwTkAKhVrfxxIwQ8d8nYskxzpdE/dVti9pkVDmxk3xRtjB7nZ7b8xGlwG\nwWdGsCu+KBFzOrERvTFFEc1Dtq4A5+hRm6BEb/TDRn9N6seVeqsnDc9IZE93\nPB3MpyodpUmV8EnagZgojW6tp/RITyOZPkEXOmNZTAz+QChS9dhKhJFMc1bs\nDHLU58DKgV8BWxrZTLUlAWQ/aDuJahW5TK1PWY5Yr65Rk7ckz2L9d6sEXAfZ\nH5/odEtKwHh+30rH9DSXVTmr2tBbl+asW7l88nSjjWXG4BDvCmGAtPNF6Llx\n2KKEZI/3GGIXA2CI3KJ+wg5rBW/wVAreKDruZw1qoHKidOGn8yu3Pnl9gZe5\niRvgdb0F2grKilVEcgPZCjhokF7CdbcASMHTXf5AxVQLJLDvn5cDzwIdauLO\nXUoo+Vc5IAB52xEIsm1ZiK/R/VsRlYqqHN0jcDltvlSnIYgZQnJ15XiDWew4\nKPou\r\n=Mjmd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/touch-target":"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/segmented-button_13.0.0-canary.6df682e74.0_1631202250571_0.3219841212864676","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/segmented-button","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"83954c26187a25fe1a95e91f5dbc35a4a71db65f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.b49359c35.0.tgz","fileCount":54,"integrity":"sha512-agKa3Qh7OuwhRlUn8psJQcRW9551/FHkCaLiTvY8VVDSKDQ44PMQMxTY9jhTFOXay/2P6NJsllds25ZBF7ULRg==","signatures":[{"sig":"MEYCIQDRhr8LAPIV2Q+87mdEij0XcFx0xWOpf7BqwYLsQCJhSwIhALxkNGTa9OKOCm2cSewHtGP7dKr0T+GwDVvqWc0yllbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYdCRA9TVsSAnZWagAA24MP/2WxxwRy3VmiwKmrXbPb\ns4BhN/JiiX29xQIQ/C1J0BwQd77DxedKUJvnvywg9GtCGNxNQF9/V9qoeyFt\nvPa4NioZldTN35OMo1ETIo1YyAedK4CPP62EyHV71Bp5sNWrsDLDy0AktBpq\nRiXcoZZ+cQD+SLl6OC55YTaEhhQEr5encIoROJT2I7sl7pjH1CWWlGINkRoN\nAQXOLo4ou46cs9Oh7JzGDNY6F6S53Enk9N5aYgs9Nak2aE5cuLz6WSp1AvGU\ntkwwdqKE/Kwu2WpQdGMZx92Fc1Aw94+tNL/kutYcAXNLrBDYoQyClrhp3HzQ\nuvaKIqf7LjxjLX4HHrjIRWqn908/DdJ7QzuKvy88DCkxu3TnpBEgY1kLOYfN\nGJMEcJC/AQC+xuc81bgBQJeLp5DmuIGG2w9hetHId52GFqLjUDgqggYZIRBy\nfgCnuoD1uSzNBh1HSae8nG7rdWkf9KEtsuTilW5gh6VMy9ptZeI6FQ9QFhaO\nssyUCN71H5S/SOZncMw5mVpYiZ6QUHwWXULQKSG0DcKZC0bIXVxP48TlTXI0\nKDzdaMB8akwzuV5oJ1kZor9t8VHBDKjS+/ipmmTxJfMY4/bRfAQV2xq2On5H\nbC7cYHDKMYETuN9ffLAJRqfhRO+etpe6oqMmojCqoJGHdG6IdSDAouAOdkLe\nvbpm\r\n=iFlW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/touch-target":"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/segmented-button_13.0.0-canary.b49359c35.0_1631208989359_0.6691171069083897","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/segmented-button","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1f118f5c706bd85b2a0c8c9fda06fbbe6cfe8170","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.470bd34e8.0.tgz","fileCount":54,"integrity":"sha512-tX4tcY5DyKjAQGtKBH51dqyN3Llkj2zMEa+vqpIyFbOyOeZbicN+6xlWiwPkWxOzv8ZJoFMd3kXWqUDrKe6yEw==","signatures":[{"sig":"MEUCIAOHnRN/JBXAcbZ7bxOCEs5OQ3egy096SYuYU19z/IJ+AiEAuqTfJycGFr77Dg3ApfV673ysV4QJ+UzLNEFIdejxeGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkwiCRA9TVsSAnZWagAApjkP/2kL94ONLiDcZKSdd06W\nwn2TCl7u1Nt7eURKcgL2NmaRiLcnDmDj4Kb/sJfeZZmn5/0iKtF1dwbPPGcd\n+jeGXK/JVdMJsWE6Ssyv4iEv9VGq30ZeqLYMe0iGq9GF53HtmBf6wgU1U7i5\nYydPrDp/1RhWBzfUqsdkVl9Fh3p4HzvGXNvTtSozRTpb0IrosFmEumPfrznZ\n+JGUbzTgTQdp1kmt7/lp/m0GFkea+HLgyAanRLKOPfWN3oZ8mYLU+jfEiWof\nYAsGUGB3SSoelxWvXwGOxmytX70vdCqWEgaqW7dXSGmDTV/rnUUnlaZL/jc9\naIecqXF8mq6PA4ah2Woj8ve8tshj7kyQuK56SN9vraQg+eGH6tyzRDjTTAYY\nuKYqZrAY6kQDnVIAdw2whnH1fVstxoMqQPPCaZrHk5ObF0HdMvKG6Oxq24o6\nIYXKElRRJimlj49kIx4WbD81rJsdJrhlwXdb0qLl5YJ5u9yursCakMRIswIu\nfz6zObRV/SaJpPnvEesmcrrn66eJBQum/KswAH9B2flyUZJ5MSfFwa6YmsSl\ns7mylLWW7iYZoEBPZbsFUBWW/rWgI493u3bDYCtLwYOMtlds1BpQsViQGbSU\nhEdoTtSm3wSrG6BflHcx+UD/QgxtiNY4IADIiwYl8xwRLUgKLA3H/9dSUdD1\n1uoh\r\n=faAs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/touch-target":"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/segmented-button_13.0.0-canary.470bd34e8.0_1631210529994_0.8599070306761849","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b8e0ca92ea9181aaa015b5ad978b8c7db20bc90a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d48a01771.0.tgz","fileCount":54,"integrity":"sha512-PLUwjyWJk1bwoU9BQVV0XQK1G6iTOQM46uvUlo6NLlk4v1qKlTkgSO9AKiRS82pX3rj0QNC5IvvrYRdLWUBDeA==","signatures":[{"sig":"MEUCIBe6FrZCM4L/RvHNsuPKcpUhecvRUmqJtdRsOWH9nnXRAiEA0mHEKQBt854cKZpV9x02/dZMFME8y+DHShOaM0+40N4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5KCRA9TVsSAnZWagAAiygQAIWy3rDQJnFZheEZg9P1\nN3c5BW+SQTJbxDQJPOMGE3BwWOX6cF423ORB/i4jx0R9/+cVfLo9vw/OJEUH\n3Ucj1qPMXAD+vIo2HGOxMQvHBDw44dihKXOmHem4jp8FGtW1vIDr4vuhwDfV\nr2Ds6luUXj1w+9Ddhugu27kj9ZvqGZFur1kkNq5nz8GU5GoP545Pl8DEwb6r\nerMZBCK12lxtd8oSwg3L+0bhRejHXbbH8jC+18xqks5VDLmeZSabOkSlBydn\nwgjsiPR9LHRsb+yl2op64cTHlXcns3Lkn/6tOJ6NY2RD9gQHDOn+tJjL5ZqV\nDAIeQPxGgGGlYBOCvk2HvZzjxhYJmJmXOEpD10lnmVy5NvD96h3SjkJi6iwJ\nb1kaRDqcO4U1PmgvF/bYcDim1uleUSAuAa2Ly4oFycqvBdWkX6/QtlW51XDU\n4H34Qvq1HGrla6o8WRYPgrgxLYJ6tEHO17p4EqOqYvHdIPi3kkDYL/o86ol8\nBECfbe1H9BO9nj838n3kQ+X2L7aBelbZeWDgZQOu7hh/VnYHR0HHSzCtp6Ab\nPF2j4L0/QzlhS2J6t7kPtpY9090snSqbomMyv6DxDzSHFftHj+U7PcIuJ6vM\nwoizAh12FqmPx78EJ/ps6Noeoyy3bkguxuG98XDZqA5CwCINInjBViFUoHT2\nT7GL\r\n=ucBY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d48a01771.0_1631211082211_0.04453429793764374","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/segmented-button","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b88e1d6519f6435b58bc3426a42cf8fcf596a974","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.13db34b34.0.tgz","fileCount":54,"integrity":"sha512-MTu4wrkQ3nnkJWhrdTFebQePR+qPldJ5D8eZd7RuEBEcQBDs7gCecjYxt1a34yuAWwoEBwyQU4Q8xkUYhAFuDg==","signatures":[{"sig":"MEUCIQCn/CJuePr3XJLdpWFByi297xY/ZoNKef7JIt5JWs/GKgIgWM4ALVYgy9o7q6MehSASi8Gl3eiYgFgwUwYRyXIVzD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHNCRA9TVsSAnZWagAAHEgQAI7kpzYqyVBRixC3Sgs/\n2ajyN+j+8Vb8tUl7EE6Fjf3mtpnc9iLa7fEaYmOzgPNAx0pn8jurOmBP4HBI\n+dclz0RO4lP92uaGfpc+y+hTRMuals1/bHE4HQ8RFW6TKh4sHoCovQiW2J3y\nRVEPfLVbg/VO6QKLAr6yyzwYk7HQKWNANljHAF0pMo5yfVua1JYvqjGmW7u3\n1wN+iNmk6BgukgqkTuZQhoLZwzn6ITfU9TEK3faH0L5wl58Ma66UNe6No0SF\nqrEl0v0lqNym9IC+OmqIAL079SOhs0owXpOcw54mowK9jLu3CW8DVzB2pFhg\nOWSDUKzbUfOSLCc25G9xdZFv8rR7UBiYNaPapmapsOwwJg1WJ1Wohmdvv/JI\nFlGEd7eESqqoxU3tdMi+Osr5gfFLQaK8TpLlRTmTvpVsPmOjyviIZ/0WS6Vb\nrGL5kS6HRunksSMUc4bqDKHvrgwhhnlJLg7MP74Rwm2+bVqhyuV5zyPmEKKD\ny7IxX1tlKsY+RDDYXEc47XObAhQbURtiu+Z+2SLOBX1EGR9ByRlsskUCktZX\nwmqbJcw2SmWFsPN2DWd7Ake6JhXRHXe3VKW8kQR4t7wk5A9eohjbL/XDaRMi\n1hRZ4fAehli1Rwp5K6M+75HzqZ8LAf96pJTr9Ew0P+aae8AzpnR8YIQ8r4pd\nHxOd\r\n=2Ltw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/touch-target":"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/segmented-button_13.0.0-canary.13db34b34.0_1631211981192_0.05761751513875568","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/segmented-button","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fd43a743868007b82d05f6311f0298b7d2b1756a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.864798678.0.tgz","fileCount":54,"integrity":"sha512-f2FCEB+ZOmgOTHX58vg1boOzC5eWYcPEgb5rSOMlq3tREiL12lxBbiBJk5R+mt6n70pAtEA04nbgpcf/69G8dA==","signatures":[{"sig":"MEQCID2suqUMjH1A7moj5p4jVcbUKUX9RK6WnVLjkoSfp4aGAiBJFA+RSW31F+tgBZIF9viVpQ2Pco97ThjI+GeU3/SVMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlR8CRA9TVsSAnZWagAAOYEP/jZGXblscudWhINk+aEg\nEoh7P5BInXX98EVMs9lQth/q8a2fNyfzOZaSnas6eIiKWXVs3KJLWvXSZXSC\nhz6LDWYvi2xLiX2vljjG90ZWQJjgXFSl3zdaVz9z4ebrkRtPIMyU7U6JFE1Z\nck8NgNmC5Bya+PT9sI8EVatIkXYiB95Mebf7ng4gf4E0GippRi6g/cqGDCPA\nKV5Z1SLz6gj7MwqAKB9iW8+RTNy28VYK3qdFzc365daeuxIfTdhYH3erDV2b\n0Eaj79xBlg7y9jle992jWlW/o3dQS+M2Hld2f8qRIxg5L+LjGuchJq5c+c3+\nivsqnk82SA5aWXOLQqm6bGHegPOLITtRCbJGjxub0T5JVXFJgtopIDrsk/6T\nPt7ZkvyAVbEBq5xt4Es7x1Nks5bnLmuT7TXxsU8Nla/2EiSJ9NczwUToKa09\nvs3p/lUo4/PWOdMiRg+eCXJOe360jDP0ByxxtobFaALVsocQVvqFOF4cymXe\nauvqQJ21au6jkqqV8Lpq5ZtV2tIG5StSNO7+Rzu5EspeWuNN+wpks+nG7xRB\nwvW4R5tyyyG9cTE2vylRrcbKmbPVz9Zk4EBFuMdbMjhaWDs9gReot8QL92pb\naG2tu+BFxtvdmjKePZJxGibQspY+IywSIdWdenNMbLiiRM/jmfO1zLSKP0PR\nemon\r\n=+UWf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/touch-target":"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/segmented-button_13.0.0-canary.864798678.0_1631212668392_0.4265275079115929","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"976974f779a8a1df6e614ddf718f6c1c7631ab52","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d04bda3fb.0.tgz","fileCount":54,"integrity":"sha512-rbGzK2LZIFWO/IOW9H/1qHbp3cUXU4ffCEI4ZFh+wTHQYaGPngSQMhLZ1Jdn6hMxrWtWN0Eu4tj/hja21OKu/Q==","signatures":[{"sig":"MEYCIQCMObOMA8VrKrAzxJiR+a/CN3ldXG0nxkXifxcto2gEXAIhAKpkHopi3nK5UHh65vd5VUUNwAe36yopNBgdCCxqlZa3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":568871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hECRA9TVsSAnZWagAA9CwP/RMxvKs28Rk4eNBrxBcp\nrlOXX2GpKegPlvT4VDKqAZowNtEtFQqQa8Wik6Ee84QC/kUlfD+0pOm3Um28\nUEqsphsdi9n1VVkrD4BmMCeCEhYczc+i+hgR7kcJ///6zG9boebkm0PO7OZr\n/VwS9SaF9NNRh+AmHjd8wh5PjNlhyNVTTsZIUeb9IGp5TP+AaLRXNhR/6JQW\nOST8d/K4tLsf9Iqb6BX1kV6P1OAUwyHSGeKq5eGMFNi5Zlp9B6BZWIU3qYl8\nfqCLOUQf8i8gn3mc8FS4yS8JLSv1ieQ314UNIhneDf4pQFXN1Mjg9LL4KkOX\nJ9ym2xnI/4Mc/saYqW9BnZLVLa+QsXKymA7SlKxxNORf3fA0bMC1I3v9vOT2\nDZ7rLXu1FBgBi/XtJarP0euO8MyPFMb1XSx1jAQ+TDv5Z8irfN605BUMo1nc\n98A/cJkQOILV7QjB97+3WmWAtWif4/B2xIX235vJN7XlsNrkMi9OLsFgaJLd\nT01x3peKiI1X8Bn9rl26wEzgTX9ljkdJhcZ24unztsau32Io9l0mauEttcNR\nk9iH5tQ8aiXz5uG0S0IWLNuFz8btlakfyHIL5XFpf+eGZ1WZYhFnVlyjqtGn\nm0c9wdRV4NGoj+DF5lMLyacb+WOvF6y8h5A007GMhkd0FhPusWEGknXC4Xny\nUC+D\r\n=Fxhb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d04bda3fb.0_1631287364257_0.8479617161753059","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/segmented-button","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aaed82fd7c0ba0e99ab2e113d62853e08467aea8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.5533f73d3.0.tgz","fileCount":54,"integrity":"sha512-khl/XfXAXqE2iiUxUPAmP3ANfFlMoJYLwTIlDqph9Gt6mZIZyS50qLbRDLFAtf9kzBSLwiLGfv5MwCwgn+LVfQ==","signatures":[{"sig":"MEUCIGMDVsIDhZ0GT1FDMhZiuhLGrPxL5KcZWYbkGhyJirNhAiEAyYMlt4yZ9x7rFq8tUDWPZehz9E/CAhmASaxAPrBB980=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kDCRA9TVsSAnZWagAAi5gP/2QeyItHOKZ7CjL61XfM\nHJKm7cRNoc2KNkypkTKmuYjxv2AJY4Tjd58g+3L3Lg1i5fhxSPPkSp6SWEy8\nFDFyVF6zKdzKk87oDtduLBn07lyFC9XYk7q0ZyMM4ADbkxRtESXLh9HF3khP\nPMZOFqoCJyOBDWm5uP9ChLL3xCoo3lv0BbgG73ZKNeLyIfzMHny+JI99ymiK\n/yJEDEfa/Bwj7w1QKTktXYMhrLN8xmbbUouUZGDzB3Ga2y5ZPmtt4M8jMHjf\nB8j6uxqoDLZOWL11oupjthhVeqPKLAk3rsWsA6dLY7cK8cn5O5HbvBVlkV+X\nNezSANsjujK2DfHEBa64ddeB5oLetFGuvISeHYpdkWGyH9puJZP+AouJtIuc\nNlJH1afM7FpsriIDHllU3B0dzt+sIIZgIHKI92Pq05wxoCqZTLZWZ2Iktp0E\nkE7QwanBkes4ypMZZjo+HoHO/ivtwuAmVqO+9BWgtYdvK1Xw4VQtHSt4Ebtl\nuvCilAiPHljgAXaAjt2nfkl1QGvIrbOAWWrMC3+IDAyX/iJTTqrWhTTsdDzR\nkF2xBdppqCNG6tPkF9uaVygqPQaEwI8epLT2FcBqbI/iCiPyjEXK/pfgATcR\n5QfsqN7VXseNj9qKWrOVW3JnUqAiw0hA6nYCYYN3Yi1+EPiUO7Bg3Ry25Ggn\nnp7C\r\n=VD+F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/touch-target":"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/segmented-button_13.0.0-canary.5533f73d3.0_1631574275365_0.31118837371309827","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/segmented-button","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e1dd9457ad544701e72d21359401d3d83ca75806","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.08398f880.0.tgz","fileCount":54,"integrity":"sha512-sNxdjCsTtPV9ao2EFutGErbmhP6dGVNoDqQI/X39I2eLi9s8vpfn73rvr/pdioFpoaK4nkqmcKarRPdFnM+HDA==","signatures":[{"sig":"MEUCIQCtlcF3izQITcuMIkjPrPmq3CohchjxO2D7ccEzoFbbZAIgH7NMkL7pYWwoONCV6CdJkGan8SXRvetqcl49xQempSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+AzCRA9TVsSAnZWagAAUKUQAJKJ28xDU+q2EPoBDJlq\nk4A8dm3lm3aBI2R+44Q+qdZds12aNKwll7VcW++hJOnjoLxl9nrDp7diCjNP\ne/WQLhvkklTYqXpUanvdU28VIRAjpI7OzdDXGoDfXe0T0hrzPpzz7WzpUP0p\nMD4OtjgUsNg3Pi6XikMQYaAG05Gj2Wn+0YYZlYW5TXvBQ2leFZEs59kw03i2\nJPlMKq3LpqtLHQDgYID9+UR0i7D9TL1MNMz7mVPUIbAzQzzxnwd/ZRCA7rhD\nc9mM7TmWkzGnkaLRU9i/axf0hJrAT87S0RJMpK7i9YRngnkegqgHfEn/fIQD\nfcP3yOyAIKWrPeelFulngkG0fCZDZqsdAqbO2rCMGEEc+vEoSF56vQNel+tk\nCezFyNYSEHeo3oPQzBQHHit7fyG5Qg9ztdYkJpMBaqxIaC3joRmCZuxZ1QCI\nxWCP275Ea+KhOuKDsieX40dRRnAonJY1n15KHFgOqkme21f/kPM8OeXT+IjI\nCuDQUjIL8hRqOeuJKDpAC65S6SP1G0p8wfp+FgHyM+JPVK5hysnYqQOUdkEY\nDJ4bDW/dARyupS4SJ2ZCfaZaVJuqCjciCn30Sx/U9uNCWdG+p78LjMtmtZmx\ndaZsPsNxwv/M1s+0fkZeWwl0TSvmiqinxcRu9g7A9lEtHfzI3x0w75UJdTup\nFcXo\r\n=wuKK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/touch-target":"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/segmented-button_13.0.0-canary.08398f880.0_1631576115649_0.678407633951992","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/segmented-button","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"83d78b5518f9443aff94fb56401734fd440c1f80","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.818f4ee93.0.tgz","fileCount":54,"integrity":"sha512-5h8e9LFsMh2ReuZsgi5ghFI23PR5Bz/al+hhAXvkwymj3PWFSYcWA+ZO2yWQHqS8u4MdQwwRvejs4G8DI7I6hg==","signatures":[{"sig":"MEUCIQD08+7DAVRByTB30Hj4ByuW2fzQcew4RLfWBAJWFZaOlQIgfMzi2v4xTkOqSfIkgcmsrcfFmuurLu3YuZujjspiXGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKVCRA9TVsSAnZWagAAIF8P/1uiovQgO2cfaUZRqREa\njfEiy12cxAU1pblDEnPZggZzPZpJj++lokDdA9SS9axsHqd5sj7vAmg+Z1vW\n8wobn64m7qT2ldQSXxsCiOoz8S0M+tVMV7K1gfDvmPkSdhYgjoefsLA8Mxjn\nArWjj7jyDRFlNlb/W9MSu0xI5WRHRMpB2WyD67tyUQ/T9YQNYZHcctF7IQGm\nzKynt9K7o5lQ2DiFVqiV10c6epwf7ynBbhJT9e1sQ1Ef1pwjRYBHF4rZ2BBy\n1G1loKlQkmloltaXC7sQMOQgPjR0HX/i52s90KJTdzTkIqINo5GDKtfN1BGw\nUMlIqfbV5KU9RFcbDLPBLupt0JwYLw6Aqxq2aDrM1BFk7LHd48LLHWaT9eFw\ngqTEKidcVgiEgSykrauX2t3uB1NJgP83f1pavUATcquwG54abd1+H+nLU51z\nYYXLkM9btUDyfaDrIU+ojlhfTFzGSWop9QgHB5pg7HJhVlx40A6dc644uJ5Y\nxrZ6Ncd9VWA3Wnc9F9rImPAPpCe+C7PMK5IupPMoAAjX6O6PFU30pNsRq7ev\ncTiMgJ/Xs6tlfkwTm1Ao3+BEriYoxXChE0QlIesjWS99gvABs0Sc+BUNQ0Ei\nyWKMEyzRIYfC4eCM/yIfv4cECWe7KxHp2oj61XaVSGnTEcz17oOwi/JUYato\nZjFQ\r\n=O7/f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/touch-target":"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/segmented-button_13.0.0-canary.818f4ee93.0_1631728276942_0.24153132380374753","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/segmented-button","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6617aceced79d2cf8e1265d907c3b7d0c8edecab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.8355e14dc.0.tgz","fileCount":54,"integrity":"sha512-VRQXc54rLQSKrzzTVuxbMhbmyjHApx3G1l24FIqNSENDL8gK51G/RHYAs6OOL5QWcGd2vCAxAh951cvpNGqjvw==","signatures":[{"sig":"MEYCIQCVYH5W0bhlV/gczFjsAlnYFG6LQVCKVVnG+wV+NVvLugIhAI7S+CNEDny9BypxNrrnHdJAPTZ1nPbpQ8rCzOZ1NRNY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXLCRA9TVsSAnZWagAARZoQAI9H+mWekmTcsQ3g/i+d\n/iNx01Vz8c/JtXOSyZjeGQKlqihYeSAjU+c5Ex1gfj4DwZqytUyqdlo8FgFP\na2c1xu8Bez9bCbjjM7iMUj6wGkuVMenAWZns0e3R0KmhiquoaIIpOTnZKWSp\nN5aS5uAz+0akRSG7nakhhzSRsE0EtS85MErh0qD9NtBlfE/2J8rgKvZiZiLw\nyq1Oqezn2NVXjLBXH2ye22BHFC7XGQHoYYxl/tQvrMUxauqAj+YdZx6qxneY\nMYOFY04coj/p1SAEbnv3ciXdM5JleluS5+U6QHi2t9ztafuUEBH148+hxTFS\nvjF94BhbtFfVf7/jD0wxcGNfo5pDHuWWct033pKgW47qkzwoczFHCehEK3az\noG4N9I8GxT4o9xuq1OPF1TJLO2igJstiP0bkCXpadta5UcG5HMi3wuQqVGbv\nO2/lpl6FC5jGBXaiDeCKLSDd5Qey8Grnj4b/FLFbYvc90DVOygqvJDfmVanP\nB+/8D+fdVz0kzZj3vgUrLXbzrzY5TMv5p+YE8Jpz1kpQXtzMXTo/x2m6bzBl\nJDB8fkiL2TxbhURRdO0jraxmtxHQioSGeDfhq107GVH92b8ukDh7+wSuGWxP\nzXf8BitzciG2Tj4jklRILjrHrW/lZnnH/QZR9yJRCtN4ShrUfIHIWSFbRvIq\nJNw7\r\n=MJTX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/touch-target":"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/segmented-button_13.0.0-canary.8355e14dc.0_1631733195552_0.2964745249739189","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/segmented-button","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f4350f44371f14ea108a0e04c1173a1c5cf49215","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":54,"integrity":"sha512-wO5g3HF6Q913Q2nxdlmcf9o5mPvSS0FURgyF1gaIhCQdkygIRsEWfDYA0ytRyJG43xdMmZlWyaGSYxBfRQI5VA==","signatures":[{"sig":"MEYCIQC35D1udvvBNZxptfPE4+qSQWMQGnR3uKI0rQ5FcTziFwIhANw3yjWitBXoQnUlyUd3glZlHU2Yr1nKrsUSsQ1dEi8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmziCRA9TVsSAnZWagAAvXMP/ifBbmjtJxJ6RkCQq6J6\nZPlrIX06XJy3C5iX0HnxGujyzelfXrlgEtbCEdnSWz4dNcju8j369f3Ple1W\nMFg1dZNyJTW6MG2BpRBDCBDxdniSbwCyXhlqU18fHD9Fef0c0butQK3LkIwq\ng0RvRKroZx068gCijsHzdCTfw66axk9nzjAfHt9rPOtNV27qXh7xQD7+aZrl\nQ82zuTI8b0nY2itvBtoZIknKMsU5RkVCgNcDJ1HvG3zuoPEpXKmotbl36k5H\nTpAGD7f0XPlxFFXPFpls0gq2sMTdx/jjLwX/+2b20kkH2+qh/vC1HikpWXIi\nbEci5Hc97ta7d/G/N2TAoYxj2dvTP1Lu0abLh6QdBcZI8MaOSoJaGT+TQ42C\ngvGnOJVFgFlpB2FExKkNBcpcrtY+/iDB5M+69QYxyvSxXTydQlmOsi0vtSMg\n0L42X+cnTwdDHly/Rt7QYl+8o+28eHbO5HFNn/PjzRv1Z6WmgQ082L2CO/FR\nxLgv1+KRvERHH6UagBjGiVK4ZxwRvGmh0XVRZjJx9eoLcw7NTt8iP/8b33gi\n2KXQD94Z1paD6WFEvEAlbXSk8Wl+3yMEO7FPg9mwgtp0D9D87GxW8Dd5tLto\nbZzm0nO2od9a9+9iJyLgdXGGN4Iniy3w0oGoGAH3uzIrttT1V7RhOAOfkWcY\nEHa7\r\n=ovNn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/touch-target":"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/segmented-button_13.0.0-canary.d4e16a6c4.0_1631743202049_0.6594043492345263","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/segmented-button","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6c9af627994068247d0b08057914a4ac37ed446","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.65125b3a6.0.tgz","fileCount":54,"integrity":"sha512-jHeGuZKRgbF4hUNaJbRR1wI8ZgPJGDwBv7JRuz9sPH5fQqdpY9Pe1GGLbfUraU1GMcCGlHL14/eGKpGS6S3HIQ==","signatures":[{"sig":"MEQCIEnCZcJn1hfvEIOFNiwhdw7FjBc9S8DfrcrYunR9ncbQAiBZJW1gpImSLbVYj04aLCtlABvvBtqyhQ1JwvXFWrv8VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SaCRA9TVsSAnZWagAAeVUQAILZluWwZEttSe+FkKtd\nvH4uJT+1dPJ3/6f9VgPwIe4ktXwyp96XXJy6ZARs8vuLNKWfJ/uRvPvaqZ+F\nZmFgVqhnJJLB0eTo7Ng4VWKYu0yExFxtTfirOrASfdqRQYvaN6AfX82qGThy\nrMHEnVoyPGcg4/7pu58SVJJZ2IPqWMsCP7BiVJ4KMhMXwSpOmQ5qi2Gkvnvt\nDpNMO0ySbGELMhV5NkPNo5yT6INmi5uo9OCoK70kZmptue35a0iDKLwgxUBj\nLewk/D8Lyj4STld+GWVGQvJLvpd5azbyu9JRyvIx7bfWl4B3RWTJVCJ9yp0E\nJjAr6zOrG7PBLkAFezmx9Zo7pji45r4+KOeJmavuxKrogN0U4kkirqi7koG6\nxXlD4kXzeQRQz4dWRjnSKefB/y467k0XYN1pIPD7lrJ5J7XJ0V6nMjo3JKwz\nWm1DnEv2Azl9TAtuc4joB0ZaHZI+qN8WqVxAzskJQTxaR95lhinvkmiedc8R\ndVQlgBklXnLtvdyW2HEfK7vtOsNU8gbPd7px3aI4Zlbm7bQpa2fXuSodlxW5\nfQGcnBXPt+/8MZy1rd9zPKknRSuuQoHYnVMaYkYW7/jV2Vm7XPvPuekKFmOU\nzsb76fNas8wMp0vs/6rmZMlvVr8hpNe30ORXkyynDfBAR7S0Y7tNSFbDHInn\nWldM\r\n=yYzs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/touch-target":"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/segmented-button_13.0.0-canary.65125b3a6.0_1631827098303_0.6294730064264547","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/segmented-button","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a0a7c033ef0f0851b77243290712ef2299987a89","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.80a583365.0.tgz","fileCount":54,"integrity":"sha512-hgMNehMxlDiIyz+R+SZeZxRW9CXMksKCKhFJWJq8j4mtZJiVlc2lYHRRwv46mte/e4vgkOnoL1pALS7PQrxsVA==","signatures":[{"sig":"MEUCIDh19UNmV6fY0/tl8GU0w4wm9hoqYVx34FRY46yYwg31AiEA6zjA0lGfH6nSaoS36GoiDcv+kvVvcZ8W054Vp09Xojk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/touch-target":"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/segmented-button_13.0.0-canary.80a583365.0_1631910984424_0.12213492941850279","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/segmented-button","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5774a9d1b3571d15bfb56b7612b29ffbf91e5ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.83900936a.0.tgz","fileCount":54,"integrity":"sha512-gRjx1PcRSJSz6dR07qvXNYdYmTNz4VP2GBF8ePVuI8KUhLKwVw2RA54ErXdTcYXKKv873UMCZmADmyhErjMq1w==","signatures":[{"sig":"MEUCIHTEsoFF82tM3ywEvJg0XU7C/jNOoJN5iOgKnT2hqjQPAiEArcsMkSYmWXoKY2ZxL2wjnYxosYYgjZbRGoEYjWe9SEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/touch-target":"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/segmented-button_13.0.0-canary.83900936a.0_1631921093949_0.15451971676792642","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/segmented-button","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3a469b1162e994462242a061be5694d40e5f675d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.860ad06a1.0.tgz","fileCount":54,"integrity":"sha512-/44OElvcik9ff1s1z6nZ+ZOLQtjoqg/ANmjfSO5w+RO278cQYcGOk/mMQ5TG72J9umT41dX4H7Mlv4hzosIy0g==","signatures":[{"sig":"MEUCIBc3qSkdaoo6Ao0TRizt+ngPWibIKUa1pcgf/RhFVBavAiEA1AD3f1eOEr9BlWuphabFGcPjRR8uckoej8xnJEt+Q44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/touch-target":"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/segmented-button_13.0.0-canary.860ad06a1.0_1631921792529_0.583058126167163","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/segmented-button","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"afcff8854e466546b654adcb11420db5d25dad01","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.3b8d4429e.0.tgz","fileCount":54,"integrity":"sha512-uiSs8t4H3Q6NnlYSn0FCqAhxjmPgNGEMooVR6uQvWXS65edG2wpqAkvnDXwD1m7059pg4Jr4331a/uNSU/mZVw==","signatures":[{"sig":"MEUCIQC6VmmNYIKomHJXaxGKOf5zUFY5ZzmN6/Ut/gzJYbkZ3gIgCMkianUTNm1k+Ol83T7Yx3BevmC7QCzjptNUCZTMmqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571256},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/touch-target":"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/segmented-button_13.0.0-canary.3b8d4429e.0_1632160088776_0.8381966636507459","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/segmented-button","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"360a81cc7143acfad03c48f3d72c92e5719d5659","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.2da3606b9.0.tgz","fileCount":54,"integrity":"sha512-/kpCuTwl8Bfl4out4DxIQHrRgxd2ZcsjK4JgFzoxpShMheOSkU9lpehKg3RCA3aJc475JI4haFBr6wg8G6YVfw==","signatures":[{"sig":"MEUCIQDjrrNv59InIVRD3LD+61WDZIIOiVxUEb66+4+yHQgxVwIgSwuInu0UbXz5xt508U7PzTjCA2ZongNRvlp35KNA46g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571346},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/touch-target":"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/segmented-button_13.0.0-canary.2da3606b9.0_1632166695960_0.6889549314327224","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/segmented-button","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c625ccaf5057f2bbefaf1a4e14aeac0ddb7232df","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.e8c598d1e.0.tgz","fileCount":54,"integrity":"sha512-dpzNhlDUbjAC7iSBclVobHScCWD6qLJCZlWCtar28/5DKvhXt6tTGgVwhAkKs/h9CAgnKkF5X+pc+9eiqxM0Ew==","signatures":[{"sig":"MEYCIQC/SfFMJyD+si9adia8m01YyeCToX+spM6Onx66Hlk+xgIhAO4Em8fvXCeu3HcxBAstBiFIRMLNkSdGLF3NWm7qLbZu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571723},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/touch-target":"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/segmented-button_13.0.0-canary.e8c598d1e.0_1632172349891_0.2954104093739722","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/segmented-button","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6403c9c5cb04731e11649575606e3755cda53464","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.1340ee9f7.0.tgz","fileCount":54,"integrity":"sha512-isJEVE8c8eGBEww2GpZmFQd1rweCG9UVCxp5CuEyg0tGnVYtVOkWT6slXWEARzk0qFpLETvOKClXsprZQZVs1A==","signatures":[{"sig":"MEUCIGLdM5fWNfQB2uFLZIoj+pKehZLGEjd6VG/K1knRXfUjAiEA+R8rhC76lcHsTjiT5sUvx904elPuQQGIsaKLOwd+rI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571755},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/touch-target":"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/segmented-button_13.0.0-canary.1340ee9f7.0_1632333509067_0.7911028264666338","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/segmented-button","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6285646abdb5a174e113fdc5a868b94df3e65d0e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.65084baff.0.tgz","fileCount":54,"integrity":"sha512-slCVQAex2i6fFbNf3WbYBgPaASIDdHY/UCog9diMPCJujpA6I+3CC3sb1pXZWNsm/6Op2GzNi1nzz8dtDeamSw==","signatures":[{"sig":"MEUCIQDa4ZcaxZXyJNqiGPtcq+RfPFggJKQ7WHucpJVXRAyjFwIgRYkIce9+Q9X3zV8d2aALYzIPC421RWHZsEuHs1R8fPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571755},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/touch-target":"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/segmented-button_13.0.0-canary.65084baff.0_1632432363989_0.9571351320824322","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/segmented-button","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"813afc562c539b13e8fc00a79c5bfa0bfa37fb1c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":54,"integrity":"sha512-FBZhonz9h60qfqrnHhBzYKYqtXqFIiKzAr4KfMp0RssfXttqx6WOBdpxCPpK+YRFlYYoYeGiSZTDRYtcwfX8Fg==","signatures":[{"sig":"MEUCIQCcDIDjFPTOxKHxPkA3zm3DgOXEQE9f1PAeatZvW1SlzAIgc01nilBulsJHKOHn4aVCUgpGCzzvTugcEVk8vLEiseo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571755},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/touch-target":"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/segmented-button_13.0.0-canary.c79aa0cdd.0_1632490950610_0.27558007980357524","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/segmented-button","version":"13.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"92ca6541087a2b45a32aec8e4dfe7f2881341629","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-13.0.0.tgz","fileCount":53,"integrity":"sha512-cbjSzkGms+MB6e7ZF6Toc0kpIor4qFm3ueY8KGRIbpvPoJuHfDy6wqIUhwpfAibSpcaDSnCKg1m+hEtyplZPkQ==","signatures":[{"sig":"MEYCIQDaIAJTBEefUkNfmwiUehv3UgWmw3vR/A/9WEoll5TUxwIhAJbvKE3hVn3MJixoaqybjHFBOptI4zutZz0yxQyZIHTo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571105},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/touch-target":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_13.0.0_1632512786069_0.2889865789572741","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/segmented-button","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6db8a5834ddd03c69de7faa113c86bf5199face2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.198431fcd.0.tgz","fileCount":54,"integrity":"sha512-s/G9ceHsZePFS4QHldnTGWYQzDOQwn02o+2C3vCVGDEw8Qz/xNH+OC9XGCcMCl8l2CS+YbPOw+pnPSb6OISS4A==","signatures":[{"sig":"MEUCIQCYev8suJaBAr/zTicGry8KdwBCxwKf5xmEm4T+SBQmYQIgMbX87igTcQRppUvzQ/ytV1bNmY4MFEUpdXBCrpMyCVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571755},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/touch-target":"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/segmented-button_14.0.0-canary.198431fcd.0_1632512830510_0.6815510694617049","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/segmented-button","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03c4531a07309b3f4d30b9974111f1d78a1a6dff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":54,"integrity":"sha512-zRP6CpMwLgWZ5TXXPv1sUJRYbB7iq7MitnJQYiMwWZExc7gzkvHhzAAsdcKiRzaxGt0sXHdyb+MTICr6sPzK/Q==","signatures":[{"sig":"MEUCIHDIhIP4tkGv5BHRJ52mkxH7KUR7bOTqWSZvThJXjmxnAiEAnsj3XYFksg57hLO/g0RIZDn5e890NIVfPGejGl7FwnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/touch-target":"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/segmented-button_14.0.0-canary.9a02b6ef8.0_1632575496196_0.2044015197500353","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/segmented-button","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"21024cfd3a5d3a0f76b59951aaae673cd0b8f1fd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.758ce31d9.0.tgz","fileCount":54,"integrity":"sha512-X1xipcH+OShlUVZFGDBIR00zgwGDsVk3CIjUyABHgptfYYfpEUSM69RbCeoBLYVC3wlUMn36Fo6gGYLvgMl/nA==","signatures":[{"sig":"MEYCIQCETBm7XVEkF5QlVe8bXJQkvjPdPXM8++QzItYhCkcguAIhANwmY/jOIns8N5Enul/b+Eu/87JTPfbFJ9PYK7Eojrjw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/touch-target":"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/segmented-button_14.0.0-canary.758ce31d9.0_1632763792414_0.41741587258586454","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/segmented-button","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b0dbc16eb674a861085f2f848584c0ea771cb695","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.86b50ef74.0.tgz","fileCount":54,"integrity":"sha512-EScArvU0qlFXtiCAy0dBnubK68/oRE9ofvVuPl1iKnDK8zcb1IhYQalRIZqEPeBZ7DHvwOPmtu0T090A1xP8dg==","signatures":[{"sig":"MEUCIFP8stRriYoY8cuu9zMSoe6ZPkoZkX2SME9Owd/yTjaPAiEA/NXJcUFTXXq4P5D0/WPhsNCMU/kV47dX+CO7B9a4LbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/touch-target":"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/segmented-button_14.0.0-canary.86b50ef74.0_1632851016271_0.043194245612659055","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/segmented-button","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"90e8bda0e6054de08ae04439cb3ec390b4e405de","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.b2fe3528b.0.tgz","fileCount":54,"integrity":"sha512-Il9irqDj6EZlc1ICQDoR0yeIlVJ1jfZKAfImwJ5GZ3rpWIRM99U9SktNqyT6nBv3jZqmDE6yRvQNAfCJ6rK0Ag==","signatures":[{"sig":"MEUCIQDs8K68ro2aIDPUZRwoEPhdFFVpUiH6b5PC6lGKbvpe3AIgPouUizFkUk+43H4Dk3sxMyAb/oCcAG0+dGMuYwNq+qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/touch-target":"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/segmented-button_14.0.0-canary.b2fe3528b.0_1632956249489_0.9410372805419507","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/segmented-button","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fa5d6e43a77718dec5a0d353bcd6be7da95b1cc5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.586e740dd.0.tgz","fileCount":54,"integrity":"sha512-OjWXi2guGfrlUp80NhhHdgX4RE/nJ/HfLro3XS2ErdoYCiuYPueXxy2KxxMiouSlzy2/YIj+Px++XxT2pHvnDg==","signatures":[{"sig":"MEQCIHY2bdKPGfqfJ1QMkxyztdYegz3DYs4zy2DnkfM+oPw/AiA7v/mBN5EAEphcva7SQbN0nS0iqMjziK+ilaFZiLH4iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/touch-target":"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/segmented-button_14.0.0-canary.586e740dd.0_1633019513667_0.13691597355737595","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/segmented-button","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"92a449418e768feaf5616067562c17d784e654a8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.2ac92d766.0.tgz","fileCount":54,"integrity":"sha512-EyZEqaPO3tAHc7UVKxnbp9Oj37AXqZPWitXSqGxlS6afv66YPQBmpFjPpAcGDr8bivJkW06mvNZvlviiBDvyCg==","signatures":[{"sig":"MEUCIQCggJ/GmjUk9aRDJZkEw7zKypUhigZoHZxz2gkE/39mNAIgOM9cj4XlHmhWHbfIAzLtSOk4JlBK71kE59OZ48PWB+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/touch-target":"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/segmented-button_14.0.0-canary.2ac92d766.0_1633462146003_0.5273855746320684","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/segmented-button","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"697f7c653d0bfa09908f4b2202b856f9dcbdfd21","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.353ca7e9f.0.tgz","fileCount":54,"integrity":"sha512-dRysLSVY3HTmUATPCDlIsbTJDZv621HV4lF+kSpABBWUnCM5MsBk4HJ/wJ7F1h6dZmroZSVSGuFMLtVyQnxfww==","signatures":[{"sig":"MEQCIAM3kMuaYTu12Na4ZgpC84r9ypfA2t0P3A8aB27i82+LAiB9nYt6APQ3XxsEWV3vGRwOGrZxGRCLdFDBm86bLiVGBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572116},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/touch-target":"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/segmented-button_14.0.0-canary.353ca7e9f.0_1633718850383_0.6611061642553102","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/segmented-button","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"065d80c8a6b33f716b12fb5a62a4f4112a4d304d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.c78ff0429.0.tgz","fileCount":54,"integrity":"sha512-UeOIVmWCfNyOSlfHjeWbI5/Rd6XVo4Hnh85t5aaoAiBnID7vbExEgwyz87pQ5tgSROehcTgcy1lz1Of8J2vvCg==","signatures":[{"sig":"MEUCIFWI/PycnkqLKWTtNRjjkInO4Tqu53/MKzrTXuKiFcpiAiEA8GX1qQ4PtRzyhS0+tel8BFLDkJJr9EJ5H0e4ep9ooKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/touch-target":"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/segmented-button_14.0.0-canary.c78ff0429.0_1633972959354_0.32539866377134574","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/segmented-button","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be6ea4d929634a1e178655b27cdfd0c92c6ed369","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.261f2db59.0.tgz","fileCount":54,"integrity":"sha512-BQzii1If7xWL/7A132pkN82okf1HX2L2fPHtEKoG9TJWV4plvjJfArdPxL2ENYQJj4ShDY+tp/mazB00/kWu1w==","signatures":[{"sig":"MEYCIQCImGn78shQu+MJJWrsNhOFtYXbgMgrAQLArlsoduOREQIhAMe6FeKRRowr8maixEtxZ5s9iBarWulsoAlwP1sj3ECh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/touch-target":"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/segmented-button_14.0.0-canary.261f2db59.0_1634749214915_0.4723905102004198","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/segmented-button","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d773e5e62e20c043a7af1478e61eaf886fb63c84","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.9803d2dc1.0.tgz","fileCount":54,"integrity":"sha512-HnOfhOAjEcYp3lGRyV4Rk5Qr/KpDhcTR4LrKjzhFIn2tTtZwH3duTOjMZlsvwG7j2tg6m5YykuM4lCDudwp0fg==","signatures":[{"sig":"MEQCIBtRef4K1qnk0AdQ0jN7USsZXJJa83nbUfJin0cxciffAiBFtLNZcr3jFDF+h/v/m8uiYl8pEBBmk5ro95d9vOfb0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/touch-target":"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/segmented-button_14.0.0-canary.9803d2dc1.0_1634757745094_0.6890285205408819","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/segmented-button","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1f49437a9f53273343870e232c4dbba2f2bbb27e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.348665978.0.tgz","fileCount":54,"integrity":"sha512-fRa8FZMbsZ5bkV88zBWev+SPnvfNFhoxJxLLmZiQ4NbqE5BFyeO/fbycC8OPyCSv813r9zwv1arzfP1j4ogk9A==","signatures":[{"sig":"MEYCIQCWKa+axn280syiZGvERSe1yQZxX5aMXaKdgn7/oFGErQIhAPnTIju82637Ms9mVoap3mq5qsESzzI1TCisVS/mlJA0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/touch-target":"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/segmented-button_14.0.0-canary.348665978.0_1634827881163_0.019566829381750583","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8b19d8a8085ebfbea9209c81a186bc7f5dca98ba","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.b2b979a8a.0.tgz","fileCount":54,"integrity":"sha512-lpMHRMrXBF4FJvXWdLHSM4uLv/uvGztAcDV4MVjfRoQu5r2Af0/PJu5Edo061D02NsmkfFOVRbuzEpt2k5iaUw==","signatures":[{"sig":"MEQCIGpbAEs55PJkAGDby2jApACZsn4014F/uI1FNalKzilTAiACdMmmkKAYUZ7FgJzVuTd6ybrLo7vNqP0t3QaqESIx2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.b2b979a8a.0_1635433975768_0.9298666964709983","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"88a44c6ce229a36144a71f089a631c0f5ab2d4ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":54,"integrity":"sha512-Qn8vB5RCcyOpNXggYCpnBoFI4Z++Qi7xIO/DAWFVn8EbSBzMSItNr9276Qm4NG/Q9pyihaYEUXEM4ViG5dEbCg==","signatures":[{"sig":"MEUCIAYdEqjvkyaiSf8iWAXTdPUgPz8y96JAkWJfOTYJyaN4AiEAhAJtoN4rRNR4KgTA6w0BcqeOD3Fe3KXV9QqbpWswmn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.1af7c1c4a.0_1635443605601_0.0621190013411792","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/segmented-button","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"967614f5bf6835b04e2f6b7316d9acdf27ba7452","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.4afd353cd.0.tgz","fileCount":54,"integrity":"sha512-4rUzLJWavfw3E1oGDUtz3PsrUWyQP186Q7QLe4CwL4lO2asMT0Vy9G2P3OFE3y82SZqgej6JGBrmE3EiDQpPFw==","signatures":[{"sig":"MEUCIC43gu70+St0kPFswPNKl9q8+kgWfmtk6WDRaN4Vxh8yAiEA6wiWUCRPefDQEMwZqr+/mCpvZ+Nji2CXz2SqCd7HQVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/touch-target":"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/segmented-button_14.0.0-canary.4afd353cd.0_1635519728134_0.43865560889539923","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/segmented-button","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4bfaba569a809fcd013f8039caf47f431e92ee5b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.a986df922.0.tgz","fileCount":54,"integrity":"sha512-A2OD7fZJDStJteaUHxk6d6mtQLMAREs+ntldr34N5WgXRAzL5djT1KZ+uUVj4LdXUvbn9/qtrOjB/O3BrwUonw==","signatures":[{"sig":"MEQCIAd82AkBmhsADLAcNrQDoYoKmUAZG/o8SFPWsApTGDDeAiAWjCiTI9d/bFPrzaSKmlt8mCr2B13graCdiAEnyE33OA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/touch-target":"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/segmented-button_14.0.0-canary.a986df922.0_1635543336197_0.7181563966076161","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/segmented-button","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2de87fda07b318a153c04a5c267ea6dfdbca25e4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.c3cdff07b.0.tgz","fileCount":54,"integrity":"sha512-VanfNT2wsJ3pyQrYf9ktT/13F5wvGXVOUJQFTBC1YxD3e2//Lx3ner8+CiQsjXyKX8Z+EtcPuwQUpe5ikN+/hg==","signatures":[{"sig":"MEUCIFJSxQPZWvIWoTOOky/6ifsYYgQxn6i7tynRDP1u8DN5AiEAj7i6ULuEc0ktOnurNnzpct8w5UrmTr5J61GYMZ/T1js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/touch-target":"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/segmented-button_14.0.0-canary.c3cdff07b.0_1636484789092_0.647279992515027","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/segmented-button","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"83cbefabe9beb30fbba1822b48596d3380ea15c5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.468392606.0.tgz","fileCount":54,"integrity":"sha512-CgV664neMXz1FUsXk2G/yAxOVtssnhCovPNkDf0++5/xDgaTagxS9Qnq1P9PN5z2NXrT+3kCGSG9msrmO5K6vA==","signatures":[{"sig":"MEYCIQCxxi1VR8ir/t0yJ89TaCDtxTQxTriWcmSv2Tb9uNuG8AIhAKB4EiT+Zke29JZ3addvRmie4FWKZ9Hrel9A/HxK2B+3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/touch-target":"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/segmented-button_14.0.0-canary.468392606.0_1636659641728_0.4441292543191633","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/segmented-button","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d9c72da60ca9f433928b026d9b2d8b5453708e3a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.828f9803b.0.tgz","fileCount":54,"integrity":"sha512-TQ9GdOml/46NzjQRCQ1hcY9mROrZwfNV4dfMx7voNwj1JGclnqMBbOCRxLLqUqHFqymGrxJWfLu44sU4WD70DA==","signatures":[{"sig":"MEQCIC+ZNaj1Mqf5JnbWkhw8a/6VU3vHo8lmVu8N1VzwEmgWAiA4fxsDEOpXDW7Pm16Hg8bEIkW4YCgNQYaUtPd7m4N9PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/touch-target":"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/segmented-button_14.0.0-canary.828f9803b.0_1636660283374_0.08239753099808422","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/segmented-button","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5008362fa27e989970af07a75f38c6d6b23d1011","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.8795cba87.0.tgz","fileCount":54,"integrity":"sha512-iko854PFwdp8YgedKMc4lhUadggDaeZm8XL2X4Lq5waHKdhwsOXQ8fvm8GD5XI+8fhKpDuLqFYyoWosRHJtrWA==","signatures":[{"sig":"MEQCICcPBNIMuUGzmHLvQURBEniyDGCtJmNZw2xO192NsM45AiAXrONglklKfOjzbiSgTMcYp0F7TWgApeiPpq/foOL+yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/touch-target":"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/segmented-button_14.0.0-canary.8795cba87.0_1636660640325_0.03758901154352978","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/segmented-button","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6d47bab0501e9b4e55607fc29748a8e581c8a598","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.cd7f8cace.0.tgz","fileCount":54,"integrity":"sha512-59efLlkVMSD8KpQbQNhxz1X8pAynLEMTa2vuGq/9FXyQKzntHKTyIsPXwLUU307jtB5VJUcueQ52ULeQmJWKIw==","signatures":[{"sig":"MEYCIQCZItOaUckjBlg/lUO/KS4vBmZNhbe9EaVgq3fhQpFwxAIhALWMJX6eTJetKCF3uaeKeSJDVs68xkNSC7QKigFl2LFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/touch-target":"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/segmented-button_14.0.0-canary.cd7f8cace.0_1636660745648_0.37169047297626445","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/segmented-button","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ea37a0df5bcb845cd4334bf2ed40ef88102c5ed7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.207230eb8.0.tgz","fileCount":54,"integrity":"sha512-ZszKXDr2i8mffBBzinlj/UqFzMD7DK7fD9Jf6lDgi3FrrsbRANRLjsjBUF7+ChyFFkatD5WFUEDL1hIl2amY0w==","signatures":[{"sig":"MEYCIQD7R0sVFPEPsR2Q4+bY29Eri4L4UKvG3/jX0PeVpOm8hwIhAPeuKkmlZPEV4QC2pIzXqh4aA7HWssUoIJ8J3UkeNQnx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/touch-target":"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/segmented-button_14.0.0-canary.207230eb8.0_1636669506743_0.13862493067367376","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/segmented-button","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a39bcaa3aea9845f60da4f46ac28d55409c0218c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.991fb99f7.0.tgz","fileCount":54,"integrity":"sha512-EncPBKF+FhLfcmKF4T7yDrGRiVwDRcWnaok4CSHe9Xox2ivGSf6HEZPlTgJjQX5d6QttvJgdtq5WSAgZ3zVp3A==","signatures":[{"sig":"MEUCICguzFlV7307nRveYiVS/1Qlv8HJcwgbjsLwLKo+4CzNAiEA1ppJJraOqGryKXo0i9/I3o1oJcCh+IPm/zWAD3/UyKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/touch-target":"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/segmented-button_14.0.0-canary.991fb99f7.0_1636670220976_0.5115938236365456","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/segmented-button","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8b9a2f9ef6fa41c8081d38a24b8b1b074b1d7d44","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.15db4f164.0.tgz","fileCount":54,"integrity":"sha512-pOcBA8y6yN1cREg8mRufxS5ao/PVWF8Sgrj4mfU5X4+rQulWf/pcOleD8404uxMy6G84YS0YjHwljaZahI1xgw==","signatures":[{"sig":"MEQCIEO2bSXSlpusNnQXD3EnZ/F39VkLENz1hANLQmEIFscxAiAMt7/wK4x+EOZb/t80FUEr/fJjIOZXs2HTSTOJXg/zaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/touch-target":"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/segmented-button_14.0.0-canary.15db4f164.0_1636738221562_0.13294138959641066","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/segmented-button","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aeaf900176ba7988e9f6e3b79bdde0600850026f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":54,"integrity":"sha512-j5BLSl8Q+7/hQcma/TyrDuLMQRysoudO6lR8GJOBpVZ7r6vREi46eue8dSeQpCF/v8zeNvKCnM36QEt/oUk8uQ==","signatures":[{"sig":"MEYCIQD7tOx3d0dTjq/nbgW/Nz+lX2WdjsYlvtsdfGgMth0i/AIhALIgUeXmFAMcdWcu4DfCOl5CdeeuX3bXJHrfloXXQ+gK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/touch-target":"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/segmented-button_14.0.0-canary.8fcad5a3c.0_1636744464937_0.3469620727938756","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/segmented-button","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"45dbb972c170c9f31fef2c5429edc415386ec47b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.f81fb1d23.0.tgz","fileCount":54,"integrity":"sha512-zjdtcOxM7gmfcNTnqLWd6Cg3NktIrXB+qjPMCMnI3TA1mT3Bsir9GDmtXXsji4VlJz8RvfzKMZkEk3sv1kqEjQ==","signatures":[{"sig":"MEQCIA1UBADKBivtwTdc2Ce0xm8l0ea81p+pVbZNbN4wccJ9AiB7/RhRoUHH+vOmL2I4l7xmlTutAEsqPxS8uic0v7E3Wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/touch-target":"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/segmented-button_14.0.0-canary.f81fb1d23.0_1636756854331_0.25045045999036186","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7feb3b4c0bebd086911f8242b59c5583eecad34e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.783f6fd5a.0.tgz","fileCount":54,"integrity":"sha512-I0fuwH3y6jZo9VStt2zYJyEskMrHTteThImMmPYkSnJENbkqsuwjedZALOHbzQ2FM2xMuehSKW4JvQ61cKyNCg==","signatures":[{"sig":"MEQCIHuLB1ivW4OL7oGGCdGzymZXIdKO07yUObz2KiJJMZUdAiAJB8Pd9XbOOsFB7VOzNbKYevKNrdI+sWI1USHsRJDTaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0a6CRA9TVsSAnZWagAAkVkQAI4WKKWs3hXqbDS7hiwK\nsqLmaWivUQZpOdp+8oAykTZ08QAMb68uza6A4cYJ7El8nzcDcPX9E5I09GbV\nZu48beyy4kZFAV3phPEXIwi7uA554gbrIvLmXf3g8kQMjDwjAeVWml9lHNYO\n/lBAxmeWLm1iAY7e8YJa4MJ0hXctpc960eGtxeX3s/1s01WTY5qPy1n0hIPw\nd5wAhM3IkqwnwLKhaZ0EMO1lGO2PmlnX9Bcw4KHRSPGxjFt/scsplhJBFRtF\nXRpWg4nNvIUnJOqIzQ4buRIENn11tPuYrMY7a2KdCuYz3SaNP5pXycvl+h1x\n0GS7yolMId/L7s06KsdG9+ErFQWJZcQMLuiLkJD38leUGv5ZcQ3r4xE1SnR8\nRabavPxvLd/i0ZPdpR/dcS/6idlIKzWzoM9xd9x/v52RuljdJZLWHDgY3ROQ\naTLNctpqU6oZ8iZuRD95JY0YFYIZIVfug0w9nVys2+zaRmggnYsqvLO6ySbx\nM5exbBY0vZrFJwrl42/soInAxRehadgUDcnj9jXp8Es6KW6QOkLSJPLQUQpr\nqeMNrv6tcoc120VSwV6viOD8DS2e6WOOir7gG40lCxRejYNDvz0X/pKuioKo\nT6qfYrRe9pleKV8c2zCkfz7HFruNzkGdbgHscaf+KLsGxGyUTEppR4ib8EPS\nXCBy\r\n=wHcT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.783f6fd5a.0_1637041850239_0.8992536090124885","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/segmented-button","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dcb160b4b56f160ece24e3dacd611b2a75649413","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.d57ec74c7.0.tgz","fileCount":54,"integrity":"sha512-DjZUKGO1h3+7fVzbjH1HtXLiF+A4ZX7+L7BL+GN/vC967JStoj+TNrH124KMgz/w3uXKNeW7j3Vj2IbWhpLkeg==","signatures":[{"sig":"MEYCIQDcWkqDul78nhVsIaXpWihrXZTFnOX4DiA7W9LYx2ZPvwIhAKBQXD5E8ONQesIlotPF8edqbDAK4CVD9a1qpwQ78z2i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mZCRA9TVsSAnZWagAAtoQP/3BlSNYHqMrcvhTp4A7l\nh/n91s5/2INKOWl75a9+R69/eByyf7GyKZzX7DIGNWWhB3NIwAgm3SNCU4lp\npk8cVYTZpSwwYf1YvGrqRXxPXDCswnnAViiw6yaEHEWebnqjtZjk6GGw/wK0\npPdFE76Fag7gN/K7YJipA+YYK/R6dLIm2SyY5O2EhrvxtUdnYEHEj/bgu7yx\n/3JNRoVZdtDmsNdg8wbnwhnNIflaNHUsvTUhkT30WxQIL2+AvbBMc/PnaXT8\ndetgriF8GZ82HKZWf79Lpa7wmkUGiYVJYO+sQN8Iid9VW0IYpLJd7zkLQoP7\nSKLbBzewrCGSs125agN210dUO3+Tr+K+fv2QDU6JlwyxEjJSvXPPclo2xt/D\n9NnQFh/+Fv+vbP7IvhgMKFyjtj1jN52bkKClsK5GwwdduIFi6iqWDlsd6UvQ\n3DjKhVQAH/HpstjS0up3tDIpo78oUlfkSpsVpXxXYb3BVEXViVOd2ivA2kZs\n7eKI12n8Ak4zsyetsJRJ2m3JNexte4zoYBxB8MRXrC47Ljg0fhEgXfvZfFNJ\nbjlFKPc3riFIGATi7KpXMSTiaOZUqHrHVAtYV+8supZnYxDsqP9thU7rfbFS\nmEPkTx2+gtDeeFZFoaDsXsFhfmffNJJVZTiHBIorSqfO9FeQ0xSNu/WCE8T4\nNdab\r\n=0mpR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/touch-target":"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/segmented-button_14.0.0-canary.d57ec74c7.0_1637079449384_0.480346003322367","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/segmented-button","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e1c65be319be1161f8837d8bf179626ccb9118af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.554c71829.0.tgz","fileCount":54,"integrity":"sha512-Mi75Ph3cWtqiuxRKc2IkIQWNfAPMUU/BK86Ju1yLh5h9HFVCs8tOODpJfrAbyNFdz3tNubDzbWfY1aZzO4liJg==","signatures":[{"sig":"MEQCIG08nnHpvJOhZF1ydSldnuIj/Jc1uysCKoubHqa6UE5aAiAxQVloQg97bc3zmC3ZK2FGtfeLEh86SSkLuaZ/W/Umcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9o+CRA9TVsSAnZWagAATYcP/19BnFQI8uMZNG6ztZ6j\noZsISCu/fnNLtrqS3s98FyxD7TvtDQNPrVlIm2mfvSMFoYZWTvFtrwhpY6SD\nTvDkRG9hjh5460aIamvDQaf8wnAC+wZrFHRgmOZAa1JnMwvXRErBYHaoCSJR\niT9hYOHKcGF0v4jwoh+met73dxnaWmTBTJE89plCiUH5qpI256eK9FSZ+ITD\n3JCz7tWTXvGS7YAIpwfhVhG711qcA0aMXH+OnZXqIV9b4cyy6pxE9nBKn1bg\nclFzhYNZs/JaeCZtmxeqf3jtAVZv+CVNLpqtsk2Q5pR6mT3Wks3yJFz6nqqW\nu/hywpmzCqSPu2GPNxKXGWB0IzrRAxD5RuXiwdrYhdEPav+RL8Lc/Wo2EQSn\n45o/2LFO9rCxVBwIdeWY24ITG8bgKJM3vUCkJQcQXSVhG9ZDAZx9DqID6Xcz\ntM1ERKdR/Bg4eFNOlgYXBZlsQfkKarnx71t1bXPQJ+cDlt8norpxC2RQgJw5\nLf0SOybPvy4paYeFoJIVhNAhOGEnYkVcO5Z1yoEm8H9HEFyHA5iADlO6sD+p\nYuqhRuoFPcz5j+rk9IfN8OZqoXrPNUqi8038JxpeNRvrD5DeIP+ilzm4mgBG\nN1YNs4oGk9Bo3jiz0x1GvSrqxJGjSTa3T3uA/LJClbDCklyASG49EQeEuWRd\n5DY2\r\n=msQB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/touch-target":"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/segmented-button_14.0.0-canary.554c71829.0_1637079614722_0.4001495144052005","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"90143e6f5a98d3198ac590eb572d8332c53473b8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3ef470efe.0.tgz","fileCount":54,"integrity":"sha512-CcLZLCISsToWfbjV4aqtoS72KeKg4Ocod4RKmnka165+LuIzl0f+NFbihmo0lvWvvIy/LJceRDGdiWxLKUvgaA==","signatures":[{"sig":"MEUCID6J4sJRxFo9G0qKkWMwaWnRoDA+1dQ9zmnYrk/5OglfAiEAuBje5Aj6x2c5eDZo9LB1VY3fvOlBPCBLxRJhRBnBstg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9tfCRA9TVsSAnZWagAA8CEQAI0DfFJw3sd5wsL059W3\nqea1eOC3cpGC+riwQ7mXdgb8l38D9sKwxCML2qYlrFeIkGuNlZoFtLa9fmos\n4WKvTNl7umIDrWHx+ThIrF5K0pmCtaOtha+o2G9U5apyjNmuPvoaUYEVJBBM\ncQcn4kPYLQ3p5rIl3boT2VZ6COT3/WlLvlyZuz4xfITmtmN7eUAeI59GpA9T\nAZ+Fqdeie7HL2HGYAzqtPyjaEwGJGhTH/Rnc9HgRIYMpeE/JNWmsVzzowxux\nPgUKfp6ZM11ITdrFuZGFbPbb8WxZ2NaWL/F0f0fFRpZ/R1AAsesLZKsWXQAN\nr1h8SXAVOQAj3X0hLEEaW1uZidLvBpBBOpXt+uk/N5i8NfAbpvvwxudxjL4T\nmQjhX7LHuJqxiJUxFSelFUVBPBPcfd4hibe/0P8hDccYQpFOSELhHdLDXl61\niZ6D/JOl3xqPyRaQWZQT6DnKTVkUZVW6PrjMZvJWvLhV23b3zU/T4B/WOi0O\nmr0Mx8M9x7XlAN/gtzCK3iU4YtiXJbfpP/WXNiXM8Gm5yBCLyXLmKVdfk8vW\nWJFGchpO3uEdzuv39CZXI3elDiiH0C60H0oN+gQUQz5ULgoyMn1QvBCYIt43\nSCci9BVLJnTSAXSQQR4o/7NGmCo9mIIP39D8AX99l2bljyus1ZjbCaAzIhGn\nXHur\r\n=m4FQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3ef470efe.0_1637079903555_0.10195856172944073","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/segmented-button","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4a9281deeeebb2e0e9128cfa639afffb601335e7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.61a28b2b5.0.tgz","fileCount":54,"integrity":"sha512-fkORcvGqXnCG4w11lxi0YNMhjFvu0Q9cLn+2Z2wwUF8A1jS7WVAQdoXfviA0YlrehJ6h+sMKgntlne+c7W1JEg==","signatures":[{"sig":"MEQCIHtN3UBWeARnwv0ZLfVnCKuY+UIOoMu0bkOQfYwse+zfAiARec6hSDsqhRmj54DNQZKx77H74XvcL9sAfxzZfEOaZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVE4CRA9TVsSAnZWagAAkcMP/2+juf+byp07wnZtYfZ7\nW7j4dnt+WuTbpdJ/voImInmQIxLGmxckHbqaqma8eZ4S/nZMao1BsuBqhIgh\n4neF+VcZaMUm2lwKlerMDMtiNWTNEqxHuq+qQFpaDtUJKYbsWIhObU+4IwiC\nI21KwupcA0OofporpXjHhKIwXXtRCAH83H0nG5w6gWYYlPZqImiKdmwscvby\nYs7CsoclKP5DzZXlqn/6tYS7u+ggvns01RuRpdVXfD9x+0wE5X+PwZn0hppp\ndeBdIeRuI7A/mjOV6xMjA986VtB2W3yxrW2Gn2E15Q5a21wOmdvLzq6g70gx\nTsyyGct1JzJBtqmg+/4IFoECVQcLe2sMffEFsNDrpvcx4sH3IZHroosE97f4\nUvekty0G+SLn8CuljHkCaPH3UfP7OrukhiuMqyZ9Qb3LLU7fsjqSGJF//OZg\ntyw77N4UZ2wpo0UCIBQct0DyS2LdkEQhOmfsG6NTJuANRTxdH4o9wInyjyT5\ngfhRyZ6vbZURCK1p4tlMUUa0uCLANZHqAo8hzIE6Udilg60ca6h+sTwghMLe\nOIKeh/AVgNrq8YjxCY2mvd2YaP0kxTsL7UhpTHdyA4Fa4fw7yEfgDVRz6mwx\nlyGwldHluSuByP1NJWvRt4mTwe1lg4B+C1UTtVpse4m0409V+ZweDGbBbGmf\nBWHp\r\n=v6T1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/touch-target":"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/segmented-button_14.0.0-canary.61a28b2b5.0_1637175607893_0.9056464012888723","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/segmented-button","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1d9f4d53c729d03a47bca9282f9b068728cc7808","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.fae6c652d.0.tgz","fileCount":54,"integrity":"sha512-zfQ6TQE4jtQOIgjmFsyMdT/pmdf3Ghw+jLjXp7IoZMhtmhSPh1Bb8rJSjTwJeyReLicpI6FpVxL1/mLLk7+nLw==","signatures":[{"sig":"MEQCIBMkTgqEB9bqArcy2EfxDTPc83kgh1JAR34lWPVD8eN7AiBc7wVucGzBKS5vW+sNmkNam2iMO+vr0AIkJvRKQsX12A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6NCRA9TVsSAnZWagAAEY8P/0yvG+UUa7O9zG3PRxm/\niFM7+NzMF5PE90auDdz+xWCrnq6s7Ck/9aES/YvfyyIfrT47NHoVlhs/O6zE\nIo6GZMJ6T1GhTCqcyWaMYz8ETs1HirNugsqZZ0DjuU5V3lyhowwha0rzQ+SI\nUFsTpaHCokFhqxF4DruUQrrtCqfrdzgpgKcQiD+9GhfLdsOZiP2U+m3hLgwe\n7OxbJ0yYSLo993iHYG++AFb3AC4upy9h9UrvghvcyYw+yGG+Q4QcgEYU1nrp\ndOX/Awfbq0Una1JyGE/mYBfPVca+dt1NWBi7UwUYc2r6xq7fqAYbJomX24ff\n6+KEOWR3cUPUX+E+ZQ/sJMqLE+7bBeEKARwLchU4IXAl2Cv+LaOQaHJ4Jexv\nmOfXSH+DwLYFHDtxumcRqbV0CMBfD9GJ2IhpOelJUuimES/Yi1QUbQJhiJpx\nHEvKgzNaY5hCc7OdXpmD3AWwOcYyr7NY8mxbhkRWrGIdx1wFwsmNlqnQgMZ/\n6oHuvQvX8AxGodfByw6jJmhr/K1AHsZ45imO67nmMzGBuFyluKpkGwahoRnx\nJmCB74IYOhaSLFTK79KjJReMUFvCemKks5EXk4B4TjUM7QsuD2YwHWo4flYi\nQ4n2O8LMUQ9HM35HYG9faK6jQNKjFCNA8lUdhYaBAYAWpshiFeWlmAi448zc\nNE6E\r\n=u036\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/touch-target":"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/segmented-button_14.0.0-canary.fae6c652d.0_1637252748837_0.832441357257157","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/segmented-button","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fd2296eaf7e39ac3ef89cc037b5e3c27726a49f3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.978a3b5bb.0.tgz","fileCount":54,"integrity":"sha512-vDNJkbjVBW6Rvsa2Uezd/8gutIU3js4x2KgLsLmNreLC5qF+Qzss3Jh7DlNVQGj2yPhzl8N5g+4xmisSZNKQow==","signatures":[{"sig":"MEYCIQC2BBAd84ncQ/kkL6OwMeNMuIPtY0w8o1zV93dOfSf8RAIhAJnMTCnleZ54Z9YQlljPc1rju7leAiTcp0wl6nMETeol","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2aCRA9TVsSAnZWagAAGiUP/jmrERVIiJ95CetGUMeq\n1L73RkoG5hNlfq+Xo/uZmLH/XJwnkgpgbmFlyNumO8XhsdhLAVZi/LF/7w4i\nUoxNFcQBOTgIByIkM0lL1Nu5mOuNKyGf0DOMX/d4u03pTTTcNCbFZNZqnhvu\nzQmA0Y/FcirZfKByjmxEi819uvRbMzoPLwcvoVINS+0lvFS9rXvgvXCc+OH4\nUH4rNVkmTw2xHhkWWx6ABocAp/iNFWlUZ0I0ycNCzkQigxZGbI90V5RYyAdI\nYVoCs/zp22SQh993Cd4l9mQkoNMaGa5b5MHT0t8gq1oH1FB3EyE2wkz7Gjqj\ntv0C/6cZt80n0rxLXssQWPmJmz2WO5wBWGfJEQ6nP3dgo5pxnBgQP6n8/vKy\nNBwuLriOtcMtz7LTWfuqv2WA0FI1/bdsL74Ag3cmsKW5l8i5/raaKJ79gC8b\niXVeNEcWXArGcEqDJUk+fw3lS7jr0j1FJdNjGURzv1+TFmMntRQwzUqQ0tUe\nKg1bjm/iVhjJJHBW03jgZsGu0W7v5HYSWCISIVrIQNpbNK/znNrpJkTvrgs7\nJi+tFPpXJEpaNEGXltJe/28++aa6tTWN6oNqQ8kOJqBFlxjjI8XsXa3IanbE\ni8fuFm42lxhhteeiQh9dEbPy+cZxqnfRR+E6PiET7qY2kSovxwplVTqzNIGD\ndyoe\r\n=pKEN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/touch-target":"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/segmented-button_14.0.0-canary.978a3b5bb.0_1637350810689_0.6015178488173654","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"50c5815f41c356eb552d1367eac3d48d1daa743a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e6f43cf44.0.tgz","fileCount":54,"integrity":"sha512-9xsSjRPAw+iNBJ3sZNzDF0RGPNHFRSGathWZ/dmvbusNU0HJ2FrUepUAgodZhZePJAaYfaH08i7cfUW7FFre8g==","signatures":[{"sig":"MEQCIC/Y+8FTX7zJZKZhhF+2HeFrpZ+20LrD/rzN4gDPd3RDAiAIYrGOF/kd9ICjpKmE8W1JpXIAJSwSFqCWcZIBwjyBaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9T+CRA9TVsSAnZWagAAkgEQAJ3N1GFLAiFz7IH/351S\nX0TGRsHQq01y12bXNMQV5QV9ONpKNoQKgI08RWg0ol0IHsgEPEzF3QaLXomW\nHfTMY5t1inQOl7wnYZ8n1nssJZ6KFrnt7r3Hx+QxHwV4qlI0CzOJLlVJYm7g\nyt+SeO2hZ4CMogZI0+3xEIQ4ikmRosEgGTrRHmJDz/kHi1qpfB1sK+LV6/k3\nExx/T3CHi3QT7DFaOp56Aze60PZnUlHqYebZhMiS3uQ6HFxgQnLAN7TEiFxG\nmTElc9+fmrtL6U/psaVQAqUKWC/9l4x39c4CyNGH12UUvMTs2j1HbkqxditU\nrMxUs4xF6RsV2whF5lxi6cqjryWTHEbPM93c/zmKGtNgugK64GZNZZOKB0Ri\nniLd1E9d2aytlgte19TCvGz+teixUTftPps0L18vT9KqPYd4EcUsNMRE//lF\ngNBIBm95sZ3bc8qQ2IMWV/ZsYihd0SU5JU28BN40ol6B0S1NWVUPFXh9/nNO\nATAF5xVSF6D077XXgQENj5s7uoOw7pIL/l1Z69KOWqa9eT/eM7KoTlq82M9a\nkeSeFtCxqrYazP7C61AzNOf+AUswyoo2TQuYFlrKHwFoqUyWblVM2oIXLykN\nCd7yM9QERH1SWj3IKnUNIENtrctkuEdmgMLOoj44uWfiXWktUM+KIlF3jfHc\nPQG1\r\n=TWQB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e6f43cf44.0_1637602558465_0.2988981856254258","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/segmented-button","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9be478132d9e799b8081d98528a05567aadf9043","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.39cf14bc3.0.tgz","fileCount":54,"integrity":"sha512-XNNKnfv5fEMCQhTAdC5dhc1OZyiF88mIR0Z5vM2TSC70vvLtXorJ2CoDLrklgoTmv30Ux3IKOjnIjulrVqBPQA==","signatures":[{"sig":"MEQCIBNhabfaY4yKxkAbFj0MvHGPxQyUEg1fxD/jV0LkeCKEAiBIZZxPxypNZQuPU6Re/exCYoMf59ZqnEXGs4DRnnLU1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCI1CRA9TVsSAnZWagAABXsP/AzC6AYUm+FdMSYrr8Ge\nNVVJL349Vyhov92ddh3uNmdD9s3gK56oNhU78nzVpDzaw49Hh+Fjrx3W+HB2\nFs+G7LeNwOYC7JTQLMUjX0oKVc8nGaAtugdey7egSWgUTHKLInvPwV6506tn\nErZAeNf24lJpYvoouLn7AbPrHTX4KP+l+jJL3M/u4vdBaYAzJDi65rFz+t4E\nPRvVR32Grl+fgAKbz0wFq8FiPcQOXLawZWfN226L0hE2SFqoOZgxh+15I4dx\nDvNEerliOBNg8TKlxsrpgDtv4KUwP0idcvarFgapASUdEXed9fLooVWWZOJJ\nCb1abGnks89wFhb5uyTG2E4jmEnWGsQlw/M64+x6DGaz/Y7o9a+lOjngdRrm\njnIa70qMdIGkTYEsZa452r2tt26uaq5o6LkKitMJoSTOy77c870Bs7y9N9KA\nptJxJkpCaehHJXvZOD06FGCXTwlrG3gxIzuI2OspP0av87TwnS2JfmfeSvks\nRqwUsR0zKo9+b/mMZbISsGsjymqUGlRH0baku6kuyZrDPa/ulLeUNAk1tkgg\nzOF8izsHOL9pQ/nKUqXzBkhy5mNOQkpDXKRTZTUmK1C23H/L7JsehT0qtTz2\nFm/LOXpFO9yCYXh4clIDx8MfpRL9K87G/XEehwPkkVqJ9scQNodLBb1dpmQH\nUfTh\r\n=AT/7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/touch-target":"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/segmented-button_14.0.0-canary.39cf14bc3.0_1637622325342_0.9758700018775424","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/segmented-button","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e7f1be137465f34e7c49aed7258d7f0cbaa53c83","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.93134d453.0.tgz","fileCount":54,"integrity":"sha512-PLy7gIXQR3I6tj94p3hZE7emHO863/JYQ+FaGzZS/pJYH0JXYSKg2rQ9I5SORMe4xVJEVsjwQFEZt40rLyCgFw==","signatures":[{"sig":"MEQCIFjEjYuvtZIpR9LkcHmxJmo7asQ8NdBSmPzEPUxurs0yAiAwuXIyjiIpZuwthvZ/DWfYnikFVY7H6hfAVMZ+iZqUxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtXCRA9TVsSAnZWagAAHUEP/3tq9QZr+EAGYef0+DUT\nv/ykk0zRvqihf54AstcuDfsXJi+8kcCqu9M0qV71Wuhs/5UzMb6S+P+5yw8j\nbq8+EIuc5TR97PrmT65WeAoy7krD4SQF0m5XY8LqTY8HsKZ4g7Gq/H1/N0bx\nXrQ5U3TEEUvxaZpzCwbE9WHUrYEwg63agN+igXtTFkngFEFgqNihkhNKE6TF\ncvT9abtlfM2dh7XR2tgAGY6qGjGUPtoJ1JjXClhy5JADqgR12NrBXfPXqatf\nzOiMiRG3Rv6Zc+7cscTvTB/bIaOWOadsME/uoZusceatUGtYWNWYMcNhYzNu\nNF3DZ/xWvNwFooOMjfje4Gz4TQwZA94JyWf2YSOaRM/K+gMqUFvUr6bt2Ez2\nY6/6DP43HjPooHU74PsKSzmuSbC3sbTuNUAqq9sMBhrgTNajHDzNIdOgHoUe\nu8Vw9yrIo0gKRhQfYfSTFOSqcG4CJ4roH1fkEYFXi4m3z8EeWg6EH0bT/wJA\nqKUkxAmdQ838StfHApudfwgnzDPpCd50hydw8sEGAMKhRzh8f/WTRstqwuH/\nWUaFIRrEzvRjuxNjm13tszsVNYjJJXJRHekpzwMkQz6j7BSCkFbtJI0pK99k\naNxUbxmgk16Zvx8/euuQQYz04slbyta1g0p1WjBU7WwWJ8vN0cD8l6OBEtUE\nXvQD\r\n=zWQt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/touch-target":"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/segmented-button_14.0.0-canary.93134d453.0_1637682007641_0.9646552646398421","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/segmented-button","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7b6318e0c5376b3bdd630101f30bcc0bf05eaec9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.bbd11268f.0.tgz","fileCount":54,"integrity":"sha512-JFvjWKcSx4LZc5rrZrLwStlDxxDC+tU3YxRscqLt6X+/TUyfhOGpE0PGN5xNWdZd7KLaQ7XGrR5dOgqcO5BjZw==","signatures":[{"sig":"MEUCID6YF/GwhxDDcDHo/WYYiCx14u2hmBB+Mu1OKx1/c7U7AiEApRGDNUgy4W7JHBZ/lLQgwwU5+etdIMfgBQOCLgnRP4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWwlCRA9TVsSAnZWagAAtuoP/1ovufysEUrcT7DJZZqr\nz5UneDntTDMfsbiXwSgTumrsJKEuiHjBmyUEScinjwdCnaKTwf45IMymwImY\nj2M+3iphOo6kFw2ftueRcdrG6/PRVwh2cS/2aoH4hwZ2RHgta7OBfi9wHBFe\nRyOdkN1A3AYvVoYRpanY/uVqj5Ihj6w+Z04H6HhAIbP3NHpWqVkJV9gyuwN4\nrmk4yCtfxMmQ/MKR65OaXWR27nd5pCTPZL+jErkmToJmYM6mcMsxZMdAsXOD\nE0X1B26pURdSpDEhqn3AAJfT89x2Z4YTwI67QhtTFtl9nnVhrJZBZepkYG5I\nQlS019t628LmXjkRCE6NHN27avY8FmfnyJK6oAjbgddGH7Nly5XrxWEVrELS\nNZq0np+y8LZUNoPdYW9P2eJLEGVujwhXSIL0zFbqYTPpiewmEoj8kP2sqsp0\noPVUHo5JGESLBO/cD6oZdU45yP8CqljwEOXzFGWPqwUQqcFLVC/cQDbEnmfj\nlthaL4p0qxqYJGWBADpo8qASDojJnr6bj//3pUCz2x4VXtccf23U3daMp01n\nN0Hjtzs3GBrUYUMF2HktRWIuNZB/87xYiIGtrl9Di5pBEgTeWDq7Imc9itR3\nq5u++Rl/y04ht9fOfFIkohhVgFXuIDb4W7WnDvSFQGVP+Dzuhrg5Rj15eDFQ\n0ZtM\r\n=+15n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/touch-target":"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/segmented-button_14.0.0-canary.bbd11268f.0_1637706789391_0.9527974143666285","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"156e3f471682f5d10ec8bde54262a8e9253dec62","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":54,"integrity":"sha512-nyJ1nUTvw8azexAPMJOpdIQ1rtdNyrhpOY+/NsikThXx+AL727qlCqRhxw2j0u5qi4pZtSVtvYVBwfQLTqPM0A==","signatures":[{"sig":"MEQCIGlBwWruxgzm68mLm4xrgi6LHrqAQ7GfUUdSnU8Vt6KPAiBZlLW0jAF6k78g7PNlozYUOROtxtkFdvDcrjFALq0cZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlxnCRA9TVsSAnZWagAAODMP/0x3UFp/9TE3ohcvAw+a\nrpmZ0I4WbOiKIFHGRYLGFlXOIfRDMChit3LQfZfn3/gjbD9EoZ9lcTAOkkto\nTBJhDE++iqlESbsZQ+FU/R4T0N4ibi+GIHO9u72fOkP+fBSH6juQnEzPSASH\nm+Tn56N71DqrGERaa5LSrEX5WS/sMoxzRO94bb7yoVwcTjANXb7PjIVGYUZk\nSv/6hNpwyBIrVZCRg4KKINee7tassxpKi3+aMpET7rf2AGsecPzUwJy+PGmS\n/EYsUdr5L0cbDmubc1xT7f7IyoT/C+AAVLqzCzId2Hdg5rCrfEgneXxv8QFa\nu/b3G4EcipSJBLUJZV1nL5Ip9cr/CFEV4aF/P09x44WHrXj/Kz8sorBaHXE1\nZkMs6N+sjfBRJf8U9x80uNHxXVg6SUlBqfH3ii0SLBu3+SVgADgenD+9+5bD\nRAsZKv8lMUCCNWFGlYj/g8baEhPqFB1ix1fVBcoYF2ZRtjwVh1kEp47gLU3H\n1RF7KWpWacPzb2Z6zsBjQX+xnZYt5e9BDQeMsNV+ZV6DOJAIcEG43TEjZlhL\nPU8Q7Gr2u1W+60z9M9T6tpTR5DpmhyhevYZWYgOzqkDJMrf8v/psIAx0FBIz\nZIJh8o1xMhhrZnPU4o0Fwd9ryWHPJ7nxZheHcw05IceEpGN9Ne2rAIrztZMv\nLcsf\r\n=OpUK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3db9c4d3d.0_1637768295594_0.24264227818807438","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/segmented-button","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"48256fe9ba527a6024fa016916ef5a3c3a40c990","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.78305b6d5.0.tgz","fileCount":54,"integrity":"sha512-WwWHr7m/buXuPv6wwAoY6+bu/vJH1HBTr32igONrAKpDvKKD1b6GsCAYm71fYl1ljuz6UVf6ct7s5L40l0Unfw==","signatures":[{"sig":"MEUCIQCqntooiFY05ljtBHfzSJmGTBpuu3UqPc6zXTUp60UwUQIgFYxN5vaoKYW/17NXYgv1bjamTBwkeZ7DeHZTQRXudHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfECRA9TVsSAnZWagAAjK8QAISXnPS6MvwydYacTXVi\n+W0sHSTx8bu0MUtPprD7NQQP89AcrmDNHApdupV76V/uRDx3WXKxQLtv8/xP\np43w9wCC5HaGbU6XCLB/pgvO8RszA5aO4hS4z02yiCQrgvfloVnhdbZVwrN4\n0AU8gTJXsfvxx8wHfMQcMvG9W7Pg3FIPDGc3uELSSyggnmnmRux0ZMxPYVI2\nkDmbiqR73hCRMGaAkpong02W8lGFVcXvjTmqU7LrmlkB3cL51jUByJjRITPH\naNI8tNA/zqhAcXzo/HlC0R2xcesu3TCA4YStSLz5of0JdYkBlc6LqKDIqDXr\n7GXMcLNHEBz9+p+Yxy0wofStXvl+t5+OhLButB0AXz7wvTJF4NOYTBtxNIVC\naGC6/jCC3NrH60u09b5pTbDPRdGxTPSlmCb/ntqljiXk2xd1r7kwbRjIhAJ3\nRVNsHH8fKOVK2EooPv2u217cCjF0bJ7dMiBARpk4NH6NZ/9cU1Jd74l53V7Z\nAiJBKNcvmG+ZRbzom70QPGjDUoiJuWgkMtvDHN4dLEaWBtC2ikXouZjseOAq\n6jixptev0VS7n/8n90tFkf2vzxZDV45dZLeTLepcOpVE0vPspGc3BmhJ/EQ0\nN7Fq7nw1QTMrCpObszRTqSinZOkyKpfFxVbEAay6OVKM9F3CH9/PXxV2wrZ9\nz9Q1\r\n=i7T3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/touch-target":"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/segmented-button_14.0.0-canary.78305b6d5.0_1637783492678_0.679425511636182","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/segmented-button","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8b5a939873a27714730d57728fdb0863db104588","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.43d08ba77.0.tgz","fileCount":54,"integrity":"sha512-YXil1X8PQDDCPDOv4iYJGDUUBpCMtRl/Ah2XunVWt8wPZCyeWEka7E+dvFFBMcgY2tq8a3M3sFeDwd68StIJMw==","signatures":[{"sig":"MEYCIQDOv+fFUQQGPpiUPmwjwlysgUiD4mkAoB16XbylvNH+rgIhAO0SgQOIblnyvrqmgQVWARN0LNxNb1LMwekZOoEVAOBO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqw3CRA9TVsSAnZWagAAV9kP/2SAQeOBqmKp+I1ev0yf\nximxIiIvBP8IzETYnZnz/qH/2hYBOLOLTwNGhopQJVdPdYyDx8haDz9+upic\nQqsH1TskLShTrG1qYRVlOS97ay+CrkVRmwTEhPIIHmnxlmVxwN2wSRa84HxN\nNb3EsPr3fAYJRrH/qT7HzDIZ3rWkASEfhwRDCxxQM/EYyRBVvegJz1dvojCj\nO2NzODz5aeLvG446annE271Y3nX4ulFZuuPJaH7o0i7Xbq16f3zgcL+cPtyd\n2W6zqv/pZwVpKOFOflSiFGkOzVxPXr1pakIT4OpVrJ3vhoL9SEcGo878uQ/6\n0/eDUA2vW+J6Yg7fC0ZKs9aCK1OTspLfNZuFkawidSS0XUh3vprzn2+VR0M7\ntpATo+ifzzjnpp+dzqFnqRDDbFuOpaPPN7vu5uHgsSn5coJMBGpo2FxNGHsE\ne6Mgi436yi0srJEMUvJncttUVob/dKbqz/JC2yY1T14oeE300tfXoRbOGIRh\n9mHB9NGMVgenxw5uupR6j5xcbnDiM+QbEzCPgo4UzIPiV8jJhTdJdvCzLg9L\n6OM7Ylu2N3aIF1eO1AWQDD1wLlMFlXqlyehvnRQ/kBz10u+klzpwAEImKl7z\n2gtTm0brnjPxJB40Ohisr/9Wt39xS1cojfHGNq0M+7OcqZHZsbP8NI4Lejqj\nTeUh\r\n=2XgJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/touch-target":"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/segmented-button_14.0.0-canary.43d08ba77.0_1638313014804_0.775960986355736","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/segmented-button","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bd5239947d08705fbd35e369683c4067db176d8f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.17a072535.0.tgz","fileCount":54,"integrity":"sha512-J1eQ+C/dN+8GyQ32BbSwTaidWZOSRe7PjfvHVgQVmOoVuTUpZOg26ZuqmiUttn87rf4+D4htJV5uSQxAcjJVpw==","signatures":[{"sig":"MEYCIQDVtiycSyIsFKofraA03LmMHcwQn6ldha3gfchtfc0z1AIhANDyndxazBRWgS8k1eadeBMZvswUcSDtJpLaWbgrSACk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsSCRA9TVsSAnZWagAAF0AP/3bRYHs/euNIzef4FHPx\nvjENktLvrkDyKBHV8WrEGSlrv7rGeWiEL+YoLS8BD4RL94MyvjO1HfEXSgFR\n64CltdVhi/H/Fq+Sr35gFmZL4fbpb5cjCghmWvWXtMD0TKXJBDdS+pAByFMh\nHtCC0v9qG6ViVQVaf+sf9V31YwBnJigJ9hZtQ06YA66q2oOVgH7GFcxcqtNU\nLCs82h8GUSO+GIXlLmsxQipGUIU+sbS8gttz4EsjcsfHD/Gohi1FvDQrnjyV\nI/F7ZtiPtqxIwu4/YNYET+CRfpAcSweXg5JOhnDGklzYtcW4by/ET6in1jA4\njYi5Zmwsgzz5vo/ISImQ6EZAzpypgi/hE3WDZbdYO6srmKmblECnT3ItNDo5\nBZf8YCqK6AEmsCfVemfUq//vWHhaUyQ9mTbHpT3z+MvbRoapu8yqJ+Mv4u+u\nyup2SsV+Sm/5ktSSPSnnDU3GR5dQaw6XHNGr4x9+8mI1wrnA/Me7sNgxou99\n3OI7qZ2YV941vdcmCc062k7aNiRpkr1EPcFMhLmtNEGTM8rT3M67Fbg9Qlux\nQGj85VZhYnyi5FgKGt3VUgEMXNz3KnUnel7UY5qJk/eQd/X/KXGhzbNW5L6c\n1t8o1KPtUCCmVsRJeki2DLvWo9jlLVubkWKVJw38HLLxNKGgo8bE6K/ftKkz\nC1rE\r\n=Hv1A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/touch-target":"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/segmented-button_14.0.0-canary.17a072535.0_1638468370134_0.3876803824884023","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/segmented-button","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cbaa9b625c9e28fe0b26e6389616a0d2b0c2b2b8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.5d809696c.0.tgz","fileCount":54,"integrity":"sha512-mlC+o4buquMG9F+lp7lg8QfREQGcE/sTiC+LR7ySUIEqVReKk6dUwgpX+5DT4ZU+r3MLO6rb8eKAwf1Zx1+Grg==","signatures":[{"sig":"MEUCIQCxMNRVJ69gEdnnXqmh3f9yZCZZfxOvgX5hdifDSHoQHQIgFDgKJc98LFS9kcEnehlIpUNOY4fxMdIRmZohh9dolco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO8uCRA9TVsSAnZWagAAe+EP/3C27bqtPRV8qZapqA7y\nwN12Vffi2T+seGIFOLpSlK/UBYNXqTwKAO/8grM7jhz0jYEwyAtm82H24zxh\ntiaDpw+cjNOAhJb3RVPJOddskb4Z2uzhb6vH2GF94tmrZg3JvH57m0FGPePg\ndqz5m1gQkCOhy38D6bqtGBld/3tM768bxStd90Jk5shx3hMIAStx3uSieR4E\nuHxyE3Ir+kpTjQrzqL99EArUz7Lo92s4Kw3aNhsOeZfmmK+Li/Bcv/F1/Oc8\nRQ4AdRun2rw4WRUqx/REWpQ3tUE4DhF+Mai17cvIbp1WbArNf8LQZv64gBgC\nVLvUIz11nDaLgPt93lrfPzt8lfRyNaRPDutMQ2fiJdcJCzna1xj6o6YoMmsD\nzYGTXY0n3L8MrHKh3gxT9QLHXQWuR27ksQLsHqyy74bIaJ/+ZwnyRiBRwaol\n5Mb4a/hggIPCpnh2A/UBMv18NMtSPe9aiKweCx3WwrK3dlbE4T9TEHJH4pOE\nFNZaRQL9th07aEB6lXK7U6TPcfMIeGbmmSbSvcJWm8gxpoI08CxljOaC3Mlw\nD8Jw+IHGhbBmEC9pDvgBNWG3L4R0sFtpmJlb4xhslA8KMdfwREUGjdecMmwc\neQ+IS9hjR3Of23IjxPFLbKiZgrWDKS10YJVlK+MrejbmKEk4PeqsSOkjeJnn\niEbm\r\n=tXKn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/touch-target":"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/segmented-button_14.0.0-canary.5d809696c.0_1638985518174_0.1859097744880216","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/segmented-button","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9bb17d0a711bc25c381c4495a96b47366d25a4af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.b6510c8c1.0.tgz","fileCount":54,"integrity":"sha512-jocu406r3gYwt8QpJ+EX+923qJpNZNP7nNn6KN0V2CKZ0RW03UUdPR4l/Ixekk3FxThuFQyrw+e1/ACTOTBAxQ==","signatures":[{"sig":"MEUCIHD2ifwh74a+tRVX/L06JiPZ040E8G2b829qR47cxq3lAiEA0t8U+veZR+3r2orNuN9/+5iNzQIURB2pRMAo5uogBJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPRiCRA9TVsSAnZWagAA9v4QAJhsxJak+LY1fpUX2QHX\nOXTY8W1RKM7cr5rB0C2/arotI4oaSa0MX+7A4vslRjXd+IA1wdn4o4hTSaOz\n9HyhUmVB6sRUrYLFtXwHNlKtOfaou9W6d1TPr380Y3pAlEmefQ6r8716yCdW\nQCPDX7M7Rip4OS/fl+hnMnG7pvxTBFB8GHCwg1GXAgArFhNq87rMJ08E1inn\nE53UWYx3QvKEIftippzTVlfvsIFHCfO7i4s9qygQMOHuHeac4UnODcaCjkG1\nHSdlhT4FAzZZ+vkD+wNlOkwC+dg7nLWIqQnYNLbjU/npDfKSsZmGaJR50ED2\nX0GEx36XodGteRNvMITFaVJDbWCwZjuUs21BtJfutHs//YhYJVlGjxifaSNH\neGZYLwoTME1I+XOAZ9ukLu2y03fBlWFvPKo08qZBcpSpMzRCOKeKLJJ3zV3m\nXOIVj/bvTbl820mCzieX5GAkYB9zTDl81Z91AQp1qkzfS7VLG7XpDHAFzjSC\nExzyA+YC/nkVq02+fGD2DrCJ5aqke+XYo/8+Ilc1GVSHnhc562pbYy47Hy7m\nXQ+wSG6dpqiuAkleRLt2AfHFjrsPkcxnV35LUMyKnDORhGqjXoPeEwALtzjF\n+M1YsySctbRlKXbUe7o8mo7hjKPZgtNVDZoKnASrQh6jCNymbAKnbKIU4TSE\nXb41\r\n=1erf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/touch-target":"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/segmented-button_14.0.0-canary.b6510c8c1.0_1638986850750_0.7145563816127958","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/segmented-button","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3a5ba8f5baf6c3a722e9cd13e8c5d82687d4d5ef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.f460e23da.0.tgz","fileCount":54,"integrity":"sha512-HcchjDwCmn9Qh9qaKfZgirRJLzHKFonzg3moSjIOLNiJGCHMhCVoi/IVgeWCSbfwMtHl92guoYIovlpOPISYeg==","signatures":[{"sig":"MEYCIQDGGnB7z5zE3XetA2nKJ1MLjjMo66tGf8Lvn32q0EQJygIhAI3clBfWRubWceF16wloKYa5jMVGsBqvYyM+qlANXXCl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GaCRA9TVsSAnZWagAAIE8P/2XRdcNZpZsZ6kJ5Dq8P\njdU97kmhLNErsJeQUF65bzFkBRfbo83RlO2yZ+C+rW29Ggic5IoEke45Pr9O\nN4ffqnhTmQ1plsIMW0LBTjA0LuvtC0zel8mF6JfkC3zH7izkl8SGFDT5CVQS\nYPRnY3HwFqTOWWrkarW6gD2a8Ogjz44+wT7J7926+IjaPIu3+UnTutHhKdTt\nRQPzbyUIBGDqzlBV+iltmLVGHUQnXrR069Oa3ErULixdecVvd1HBInhCWWFG\n/YEdkqfxzVomp+W9E/WRE8d4W/9npqcdqJ7uZBztTRFpyeuhb7scvmSY3Ny8\n6sDFNvPQqz/Aj9c4g4AU7jsE6h/14NbOSgz83jDv3W+zxg5fTLwTaboCgUqq\nvxGMkIQF96sb9VdQ9BX2kPZq5dLgfa4ktVrUJW/sFwov8kbLU9hSld6uJ/bG\nlUPFQuhY3dFWsBzo/oW8dbJfROD/mY3ol6IgNMqq3F55Fr4LleKna6lwfJ7t\nC7UXcCjpSFuEIDahV29CyEGgobAKWYNcupxfPluZIBmAgsoS8KiWskxCDSU4\ndUBYiW91UBhfwRIVw/FhOAlghDCUlK9Z9PlVA5+4Y52Fv67/l6EtjRoMsVt1\ndU4Gu3hkzoAP9icG0/Eaw8PwSigmBALpvwGe/UV9RZD1tgwEG4fZjZ9x2v7W\n0nsj\r\n=foWZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/touch-target":"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/segmented-button_14.0.0-canary.f460e23da.0_1639149977972_0.810197704722875","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/segmented-button","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75943cf0e15bba41530c16ab68b861d49c1c580b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.7d8ea4624.0.tgz","fileCount":54,"integrity":"sha512-PIzPIo/jc7hmCaEu7q5zqEVtk0sL+hkXGBckqbOljK14Zyo5AK/nvAQCQlVWeNvPI/HkF2TEGjQ0Og6f3hgHqg==","signatures":[{"sig":"MEYCIQCeR2fjvqrC1CXPEwh81lI7ebMTLsbMXVrhfyrWQqdKNQIhAMpuCDPqDUgikLZgCCuPAe2pxgfSyBbi6LkZQDCvYT3e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6q9CRA9TVsSAnZWagAASn8QAJepX/GAmnPQY8BjQcf/\nNS5NXXfYyQogpsaxGN8mw6Ev9jbHNzXI8d7eqWjjrFrnbhgkTKRRAKEhiRlB\n22OTHx4cduAe48JcigTQnrsUW40oD4O3J8x9skT28UA73OCG6w72hLmrxinM\njC5eGSagSHJIiOqj5qf4p1JT4t8Nb/hi7saV1hMxzrXm8xQHJYAhwG395nkX\n2DgEgclxAyZXmZLhwB+/3kIp4D06dgb6AMbVmO3PWR1n07Hc2aDt+CG7h2LP\nNCd9Giff6GxkDwus50UCWRgA9e8BS0rFNnKz764ApyJhH3YKOUyOgqIIKQKJ\neuvawwgwKmSDdIirqdHJZepfSl1gQt5UHHZkFhUmxOws+ngv2gxcqnkRrkQE\n/LKetIwQXcIIrL48ywAosUP7gQrNKNglUsAYZoa8pxEs1mEAMiT1Pf0zcqPe\n0dy/qEtRUdf3D+4Neg1eoUccYx2NiEnENocwn6Ag5vqYmy+A8NxnvyG1B5hN\n4PUveqLdm/Z+xNngY6tpstk/ykvlyTPeEVJ1EVF6D+GHD6vG51dgbi3L/QRT\n2lIq7jZraklgCOjhZe8x4ObxA5ETh6yQeH9tCGEBiwN+3BGCeTA+DUsUMMBf\nkIsUpXOd+AesHyfGI6qjjHVjEXy1EXiY9RHMFjcEKJb2tAnxx3BB5OsHSXqC\nrFG9\r\n=Y9xt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/touch-target":"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/segmented-button_14.0.0-canary.7d8ea4624.0_1639164605362_0.6749672562945446","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/segmented-button","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"32f03f1b8a2cbcd6466e4d47c055f79a87f5d311","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":54,"integrity":"sha512-SU/IQAu+AHrMPjAyr8hJcgo2VN2DcSzPqLFymgWQsHok3Hzgquw2Rv8IWejKMEYIscxOSq5AoZJBuY1ksQziyg==","signatures":[{"sig":"MEUCIQCm+tNfkFaFna+fo3UQfoKGkJZ0ZiOmGR0cs0zZrfeQLgIgF35WMoxqrftgznYZGa+asMr177R3IGYLlEYZW/vpaMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFwiCRA9TVsSAnZWagAA600P/2bIM356JD8vzsu3N2Sj\nhkFOw8GkcI3zK5hc7crl4eD9b4mLE/KLNC98Jiob6z+kH16vtU8e4riT9Igu\ntdcEfLDF7ttJ9PgJ9TGUJFe8rymkTO7mdSce7PIuSG/A9Us8kPFUEqsM/rlJ\n1tLwu2vtzM53eQTygNRqi1XWQVl/aexoBbdXv6kxhH57j+mYU4ij7mvzRjJe\nta20kl8DA/0mAEFPMnAR13q5AO5rq/K1kt/P1q6Gfqng490xmmq1wEKRP5Ix\nA+ivBwfUFFcAzR8nPKbe19zH4aiW2CHrJfkYPtnaG2Kb+iq4S8akVDgUpYG8\nzvR6ChnMrw1+1mhC6+4GJRIjhJulmGE8xG4JD43ydBYGsUwbRrEpuRVECMG3\ncLm9jehc29VOT/RTwDmBGW2og/BHqL2nWiuOAB5w8w1AEVip7Ukxf/Rrh+e1\nlL4/XgRgJ/cMm0R3xm50EzZZniQp1UdC/K8pLyTqWeCGjWZMqRNKDDRKya/m\nC1dirXqTa70lY2AeG16zaq3q6xPjsn3fmMy/Z+7Iym7FPRhuNuTK0zlFTEhn\nEOygi7tPzHaQLuBKqV7zoFdHLWPDffCUZsJZn9apZHT7MA90H1f2BnGRh78X\nANsykGdldEhaS7kOEMT7NxDtqR4J3oycjmFz3YpSUHEEHSG0JPDRWh5ps9bU\n6m4u\r\n=G4Ub\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/touch-target":"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/segmented-button_14.0.0-canary.8fffcb5dd.0_1639472162137_0.175527855245162","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/segmented-button","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"27d55c3217fcd221d671c3be1cb896014cbc93f5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.21e1cb9be.0.tgz","fileCount":54,"integrity":"sha512-fhFFEnh9tdAPuxWZqDrVcWiv2YIcpqjVwaPb8vC0+TGGnuVc7g3TU5AmT7ZJU1UChmhxocKbts32B0KKHmiA5A==","signatures":[{"sig":"MEYCIQDm3MpSGk334YASnvA1WfubVLY3UMCVKgBptxsmHPXxpwIhAKSkyqbVnY5ap19I04m2SV63EqOPr9S8hKHvF8VAF2Pv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPM7CRA9TVsSAnZWagAAQ3YP+wTs1XZhsOu11tZ6RPsD\nKRVoGRAcwId0xt7qnoeP4/BIwAY6a54ktD/9LBj/QJFUr/3YvERG3vZ7D7Ln\n2NQ4mMWqhHH+oJAA1ua5LSn0VlshzdnBsW0XUxTXmpvz5NLy1Q2+Y0w+qEev\nCGUpKSZ1L1Fo226Ozo2QkrM/uFuO44nuKIsJ0rc0A5C9tQuAyyKIzdgR4tUM\nSNN+gcli4RIZzLPM+a4FV1wS7EWd1F6hJyU2E8JNxk4MMWQueDKxAVdVcCsj\n+h1QaSuoqGl+dphgy5A2/Qq3F5ViqZ82xSc96m5q51RF1747/cahsRF84QJf\nMSNi1FcKSDg9LLI19rl2IzqI1NaGq9Di4Al4Xa40nXcsUFeF2EX+r0AIJEpx\n0ySMTlELilHcgf4yVLYf0vysE8s8s0fJ5vbliZ+khZcPA//8Nfh3sAVy4J++\nJf+hxCWvmVliWjJQPivyKzRnf6NjpqI5obF3xSdRcZEi/WPgpaazF3G6FTAp\nAN9GRgrBDfUBaj1g6IuzNdOQWwUxZtQOaOUrj1ue6M8mVsbHQ6ngF4E3GMN1\nsbzdFIFDNwHUnbYkJSMyBiqmbC6ZyCATr5qwCIIg2qfFFDgYuIMpydoobdik\nFn9rwa782C126/Z3AbrvzS4v9at2+6bmVPY0HLDkq6TdIhg2ZjG2vZfL+yr2\nWdUk\r\n=n8Pw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/touch-target":"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/segmented-button_14.0.0-canary.21e1cb9be.0_1639510843370_0.2082840140605633","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/segmented-button","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75877cac9850e9ede3102470e83bfeee56c81d3c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.ba78e8724.0.tgz","fileCount":54,"integrity":"sha512-7KynFxCCM3yvrHHW4MfVhdxw+G99wkjCnF/AIonOBTU12YBWoaRY8UJivqOXp4TU4r72JoDnkbpPnX4mVBo2Xg==","signatures":[{"sig":"MEYCIQC5FJo22ceZIyXEDZwPsbcf4Pljxw24uzPJXhT8Blz4+gIhAN3W+68JG+EhQPA86wTWQBs1KH8QKBuelkimhbVQj5WD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumiiCRA9TVsSAnZWagAANuEQAJZoCicj9oU5UrJ9KqTF\nzLJHuJBkDrsr8uVlCjOtKcEPUJr/D8LTKXI8HY5yE0AfmHP+1GFwk6rY4UDa\nry3D+CTy4yjgUvrbEDJCne+xEwRSiX0ZqEKmQi/XHf6ysy3sLay0L5K7Go/M\nSCe7boZmSjKkh9hwVfVItA8B5L4qqGPLa7wgyVxXp+6OY82kKgpj4dAlRkRs\ntlzgaLUzgUqWOmBn7fmPWLRNr4ByB8t64qtD72psy59YX5bkm00xumvpzYRB\nYLE6YFz1hzEVW3UmEYftSHWyDBotiOow7p4lszFEcYJiK2tlBqBS1IMcC+Bp\nLg1UiwhhScvvtj3kHadOjQGAV4Y2iDc6lZNYNakTCAEyX+algYC5qBRJgQvY\nOcT4fTlRP4oEXLVZUioW0EDNwysCTNpPNmOBTg0/VSGkpFf1nmEqI9CMXPpC\nAw8q1Wu8NUToZpq6KZ+Dz0Xmu5lQCDNdgYpSgarRLL0+h4lWEv4dBIc4ApPy\nBgPnSZrKYdClecuyZed+X2mrMes/iHiGmFGYJoSir+2KGs6S9/asi6zqLcf4\njxuNr687J4oJFEf5O7+HtdgCHUG7N2wORhjtn/6/MIJ36iDI2AAsPT/QM6l9\nDiIE+4utOjTyRKaWm9kyKcNxJhCRj4a3oic+79Rk6RIHUZ6xJrLqOZXwVe3/\nnpH2\r\n=kPci\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/touch-target":"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/segmented-button_14.0.0-canary.ba78e8724.0_1639606433910_0.32592996553929154","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"be93987d957dc72da41d5449c20d805858b70f72","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e3e073c00.0.tgz","fileCount":54,"integrity":"sha512-Tqinj7F3KzY+y/y8AW4piEsP3zfyVfaYtTkQnWtynYSVuv563Qt7XJqUIRp6rFID0bwEA3I4FrqhhQbePRbsPQ==","signatures":[{"sig":"MEYCIQD8x9UjjJbmxSD3ndyVF9WhQngTnjbO0j0T+m1Ie8ZJpAIhAIrs1yKsSWrtGvQVZtu79zbuMmY3H9kDcmMdvLpjGhIp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFMCRA9TVsSAnZWagAANgEP/1UN71OFJJ7T+UgO5NbP\ne/gEvlLULSV93EtHVZa0iN3ig8Z3E0THUsXG5/m0uO1Q+045eP5woxIWl3yY\n92TEoabuFqhJ3gWD5GTazM9i8p4CxSgrPrPBvhbLses9R9E9s7zutbw1l52n\npWfmLYRhD5SMp7DOkq0SQgFdp9rdiixP0RrzsPVZtYz+ZWHNtgWQUjmaGUIM\nmNwfFUeMjqmEN/r7e34gPkqLGXYYxMEEkeAS+rRlFV0WyhVmcy/H4UIuElVf\nXA982GNuWu4x2dp6yRpNpNZUFvJ6UfzI5c9ZweiC9TM0NoMO7WouU0GThch0\nIV8j8AmT8QCkdEskCWPckd0tLEKKC7DVQCdqVevolFdZR3qzX/lVrHIbfhAl\nUZkwHETzAdcDmOsURj41Z7CiqCq/mP2mLfvrurmoMuFKhP9WGnICw1nzoyDf\nwRQidbbPpYgIN9wsBhhWJiT96EsB5aRDPEWqDUskVek2hYFwlSoxLe6MwEIj\nXXvRM5ZCV3v9KKlI30YA3DFHKrcBHZTRdJwoE8aOuNceFOLkj41Q0zQ4T9za\njXN6hViKus8qmXhRU4Zs/uceSP3lzkwKx4stAneky7EtdEqk9Hs/+QAji/q0\n8rxLOgGtGgXQC6Bh0TjGM8ToAiItnvdBUrizs7M0OqZhn7/IgHc6lndr1hvj\nRjnW\r\n=7jKO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e3e073c00.0_1640034635843_0.5162441031897442","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a32d48b968571e32d93dab994d998736edf5595a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3366a71d7.0.tgz","fileCount":54,"integrity":"sha512-iA+fsLNxMgkG+q6qActWaM1BmYV2nso5Il5+/1snb4BhNGYoCSYPBj8qJ8rpkHBt9UGZy6dxXph3TjHQ0CBzPw==","signatures":[{"sig":"MEYCIQCdoQcM5SCvkHAavTk/63w4kWzZfXEX9C7RSbZo0g70RwIhAKuRA5kXCl3R4CPWkzMSAPRa10X6M4Y41yQbbW8zyJyV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsMCRA9TVsSAnZWagAAVQkP/09z5jdEYCkwTG53BQL9\n0NY0Donp0WSIl4ahRzRi3b2nZvZUET4J4LPtQdt+LzZ5bZqpCd8Xq/1fPKAO\nhEvA5NBjT4QaVSVbbLYhhjMo3xJznMxaM9xux3sdiO/zXcorp1LAUa07xcB/\n0rgnmNntC9cKmwijr1MY8KiJXo4CLGCc83bk/pQIhmJrpWB6nXttIrY/Dppe\ndtTn9fn1HKjrQLCXBNdjGI9h3xBhSmecWgSyacpUgP33HgxbAEWUqhoY/YhO\nZlPUg7jT3MdAnArGRfzt896RoTie6WDvb9EENIAal/6rhqNsc9NEeegRAB/H\nV5BPN+Y1No0vmzS3+VEVawY5CPKSGamGBhlm6M9teZIHIELZsBlpfPaYbcxO\n20MfirIQzqCIbbhsK3mVEPHyTwcJPa8sdWWASuoFMAgtRCvF46Q7ICCmyIpH\nVRZ4D0A39wnIBwr2DomVxvYiXgVupZo0OJv1hhVlge9FBc2YBjlxnlPnL9HU\natmP5s4E1/i8HFjPGX6rdhEwYEomgMS2oDmakmClqqhuxh9E8qrO6ccFmsl6\nsOgsxpmlWX8LwY3u/l9mPiKVt1ds4ZIfDbfjCBJtB02Mp5JUgrDpRbzdvjNQ\nBfqTaq9GgRqGq3DkYHW8FUkfX6XgIKSMAxjWj4/jK4VLPhy34XRtOxtyz/eT\nIUGK\r\n=j/kb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3366a71d7.0_1640176396820_0.15880659936182484","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/segmented-button","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ff216084245d0c6f259463605dd22cca050b95c3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.c047f7c19.0.tgz","fileCount":54,"integrity":"sha512-jmgQceMjbYkuZ3ISVNL93r9GnloRQvCNiPIaYFDJgBHZaxGP/EPdYhPB20yW8sW83J8wsDTU+h9LAqyFIjcWlw==","signatures":[{"sig":"MEQCHy7zyeM5sqAvYVuqnZxkPqTPSbJG/WwxeHLuVIrwhyoCIQCLfl1PfN2IxWOkYhgA3aiYDOuMkQt5GiltNowSqVpotw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ct3CRA9TVsSAnZWagAAn5kP/3AdAvbiZrEBrvdmKE4K\n0sKfglSjbY8bGcdS1WGIxccHb7xxu+aYeF2M6Iobp2IGSfFqHckkLqS8hv8P\nr5CBkX9aAcYRUf/2Dk5Ifb0JhrU+1+4G8xkzZ/w7XRoTB5qljbh3yimJt+D/\nXvpGLgD1mjO9Z5IkFWTWC5TFVfbrp88uAPo4y0c+ZwtbOLRWZidoFjHChTkS\n83cpfpCsmOTcDCyqdPFHQ1ZlaZ9S74pjMQPNUkjsj4Rs1ZAgY51ktQELCPQY\nqUkJwGhRMaU+vFE1v1LRGRhElwPsPNC6IMKNIB+G0f7nAZfiMLx4+tT047EC\nsgOEbCHJF7WR96dimQCoFfGKcGj6VcUrt/eB5E/iakfzZ0civRM4h4yBHnaV\nRYlEtvCHlPo5stMAnNthaijKC8XWBD2zgUmayHPkacbuAl9APOHW5CQFtFMm\nMyRtEmSYyK2pDFMDKwDsyQxDkzYNgRDhlF/tETYRTKlQRKnnpmITFqnAxfQA\naWKUOtKKmxgpBr/ZwDslHBsH3WNKjpAWavp3VuWdqAzfO1A1Z4G0PMU64Fzi\nyvH0BGescxWoCWwFaiUvlLqRj+DruXrGKa+fpDgLVev4WoPxytUZDWUSIHZR\nzi7P75aUtqr74STuLObVaBMPXQN91w9t70zT+/hs37qNzRwc5sKof7LdvjEk\nrHWd\r\n=FPeB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/touch-target":"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/segmented-button_14.0.0-canary.c047f7c19.0_1641401207788_0.4602263386739651","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/segmented-button","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"160d0d13f39fab0a411c7cfe90ed8ba5f32a7ebb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.05db65ec0.0.tgz","fileCount":54,"integrity":"sha512-ceiQAy6UPCBcE/cPFLeJesDayOp2epRcSKZ2bOjXyNfIX6z0eBi6SMJF7KagSw/ETMkQ3UY5S/bcoJuH5xDJBA==","signatures":[{"sig":"MEUCIQCp1CHQw1Y/hDIwIbEpeobfxmqrxu79nypacqeAOwDQawIgIEsQscynEOZV0bumi7CbQfvECx+5QbshwpthyS4dAXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOaCRA9TVsSAnZWagAAivgQAIPggCYkMrPujT2TbUKZ\nXA5MiJRC7vhLmxBz+yRJqadi+aoN5xTuiOMIMLFTiM6XeIBngAEKSQfgqBYk\ntivz/RoA/4YYHnYaXp5MtjCo7t2il+Grls8RgeSZJUYLoO7MLsegcXJ+m0I2\nmXRq2rj6v18Y9IijCEAIkBOUJ0NAuy/sqzKpwoW7niiVsXLokb830qPcImqH\n7tj68dq3qf7QcQmNA+aao+FalTvYHFzz3hbNsOXw4jHp2f2cFL+0nV+3NJYl\nOrq0tgaoknNNEfvsqzp4Rz28cRBy8mVrGY1hw0+boVwmXQPjCo/gKzdXsptC\n3JtSJ/LJPjZh5rVm348O0tVh2wBKoG0ErP7BER0apaSxFpv4CSSNw+qc+042\nvHRGo4uB7wDvBjrJ7WnUFTMwUQTHfoPHT7v+L4yHpwkapAX5pQLyzuOxDj9p\neuD2WA/gcHt+HD1NyzhCxxVkd9LXzkPFslLFImfJdlgQGTPX6RpUD3aZ/+D0\nxKFm3gJdH0njhEjMcs5RxQjhGLBXWlbM0149VvUP6BBTYVR9XUqcrS+JwH9y\nYdZRPcbBu/lKfOu1LS51RLxnw+NHXRTEP+Ko9uJhIZX65TCpUMrwadu/IYyg\nWp9y7IDxZs8X1+zUU9WOMnA5oWNa/+kr8n+n+IwVbrFO8Cab4i+1c22xHXQH\nJ7aR\r\n=qinP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/touch-target":"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/segmented-button_14.0.0-canary.05db65ec0.0_1641489306342_0.06823472074627457","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/segmented-button","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b5ae532d614bc1709d248b4c3c13b66fa9de269f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":54,"integrity":"sha512-QD8LdccRxCbpjLxFwqPoqM6ROZWfiOzaKi5r0fxZ3AWxjgPQ62inRhbMKqIljiz58iB7+0jjh5RGu4SPkt4UHg==","signatures":[{"sig":"MEUCIQCuLKcx/02MBxLG2F4NLTJ3SLFxRXesY+OnievYA0COMwIgEN4Hu/iKgLVDWAQvwmyrKjB8h0f5SgYKiJdObaTihV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQBCRA9TVsSAnZWagAAsdgP/ipj/me+RSlpZ0vZxtf9\ndvZAOiKHzXon1XI1x/o2hr74TrJML2XYzxW1E1o1NoksSS+PO68czYa9bawF\ngVeBwJjSKK4tK82pA6zKH9Fn0ZiPsTndxSw2+R5pPM7FhdhFGLX1NkQ/IDSg\n2ia20SjboB2hihUDqjry5iZMkME7nPNA1gSiVq5KfavlAZtxmu3L8puqtoAA\nEENqj9NZA8rC7ulpMbILLFhJbEcNJSbZ9eEyciSBUEM8e3mfgTeOV1lqOpFO\nn8zCZ3JaCkX891e9QC7omgAFdv8UfhtBWgyhO58nIfr4oIwrPYOW3+xhXeVi\ncOr35pJpGmFNBpjJgqgVnUgagrgm+G/FJWGAKzjSMbpq8sgNlkwTug0Jk8Da\nivrxKIcNvg+BR3zmTD5Ee/bHG4lEsotf1XQWY0GTRfTj/Kr0Un0Gkdh94RaG\nQcC3ZsgYaISk5VIsGh8pRf9iVev+uJwhVPdRDtuA4GLPsQ7pCoo18i9XPEsh\nOegBLPqa7Obk3CUXF1upGRg4RFuaEHWdIdrOPUAMpGg//qRuGC5XV1AL5s5N\n/u6fIXNfozZsJHh/d1VdiaelK8XiWypd7OgDyFa7Jvq2dQaxttgCSasco84P\nqAaGty7XKTkDevFDeK+r1Spy8Ziwf6+36HPDDElcFauz9fviGvm4wZFzSs44\n5iFy\r\n=S10W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/touch-target":"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/segmented-button_14.0.0-canary.6ca8b8f85.0_1641571328977_0.6042679133298838","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"55cc4318e6bc9cd1a848cacdbb8659f861fed6ed","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.173ee7a7a.0.tgz","fileCount":54,"integrity":"sha512-Jqtd1zVGmHeZ3uI7ZnMqrmcVHAvq6jpBkXe4V9YMkChAUCEsCtW/lFIgyL/I029/qLyxDB/XOxksOmk2/TYDtw==","signatures":[{"sig":"MEYCIQDbx7GE4BV7ciyIR4FU5CAp7vLstUlRJFkwBg7H6WCW6QIhAOkMsw8Wl5JyueyluIIiKZmPBJBWARFsxcNJrODNMVnw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GTzCRA9TVsSAnZWagAAUyMQAINfNJ0sEXWghZ845mgP\nfXkr9HuGHU+KgCHCJom6hTb0+SNpb79A9B4r7H0iH+tefTF1l3E57cd9M9iz\n+XGjRkRZhJC+o7Cmx7K8NLLWebfoNpNUhfdsES7iO4ZAAp9KUdyGjWy9JZJq\n8tdbNQ6NXbGsyBwjXNHVs3RPWn6+Uo0/d5O58BQBRoUPSJGl4CNiJv90Ip7I\njT70iHSAgy+v9KZJBRZ1FSqRZaJMWfMdTkRCbzkW7+ICcSLjPLW5d3fY5NKQ\nEBqMs5yYZqKfgDuh6BCOMbdS0MrlicN+fH7YDy2eA4q5faxa3NTU6Et4+x+d\n1HuJxK6zqlu5wN0u0yzlIIM8JFhBbpoRigs8qi6N+z7vmEbBGq4V8xnRMvjI\ncob7ExUSqbM59wUJV2h6oWhnHDb0Lj3XY+gOIhc3R3gB/IainG/UB22zayjA\nr8+7vsaQnY+3qViEkIphPYnnnba9Xfk7tGksduua6I8VixrARoc4cpHNYFNf\nswFPXmE60ZLNqGU8PxrcA/ymCMq2NLge1ItdfrBwDOKTbGyLh8JsxMF6zo8I\n5g8mr0kL7togLr0Grx9U8i3JGa0wuQ97R2EhGOeF5gobNXUMLB0QqcE4kI15\nuUsyKLRAQhkN/Wi6rpcdiHVxZGquvDr4zX0zom7QYtamXt9+RhjGhWdQrQ9W\nxyPf\r\n=6qHA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.173ee7a7a.0_1641833715133_0.7153950765227779","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/segmented-button","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3d3be07b28349118f5ce6e7ef140cf12ade73fca","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.b704e4dfc.0.tgz","fileCount":54,"integrity":"sha512-AvV2dxpL391LHAsUe1Y1UZOKXDHDC9glz4AfL8lFowvwZsgDSWBHJ0jW149asfaeS/xWSSxONOaOVR2Mguas/A==","signatures":[{"sig":"MEUCIQCKY+NsF4MJqKdNqbFHmowQTG0uRB+FT2P21z4fy1M0JgIgY7u/oZc9iGh0+fMdHsTIOK6dnrV4TyX2ELJEFoGASVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwUCRA9TVsSAnZWagAAQusP/j1asSZcQbmir6wlTRNg\n57ox/bttjGhLIPEmUbzucoKmWbgwMbNqZMCAdXU1vsWBgowkxF0e/eOB/JDT\nPjWKXPN+slsShJ/j6xzOS5aefZw6XytWsk/dJhFAvAzb8toY7mp0LF5WtCMw\no8HZnZeW1m0/wgBlonRElK6OEpBbBazhV07UGIcf3o0RPf/UjHo0hsj0i8d+\nvVVVILTgEqlcl29cy4TXLrEGB4QRtZUbHB5fymeH8+JNgfEvziGAmMaq/1fy\nQ30//VtJVD0vz3VjljHpP2ebUbD64XMdQcUl331I2Ey1lrzQ604IPegSQFq3\niqdb8nYKGhcEieiggMKXPAryHJlqeCxu0ZqnbTKNLDgE9O8TqHiRNubgsiyj\nbsoYMulJPYzJu81A2Iu74D5gu3Jvg71IXIEr4P/f1BGVi0EiJ63yf1MaRPYA\nfRoBgukPkht64dGunRomYS86jZkmFhv2NSyZTXqKQJMF20tZE2dkSyctLf2G\nTtORmBdxQWVCY0HSIYvIsynFaRbtSFeulru0/cyAVEMqg5+3hJQhDgi7M1/t\n1cU96jDJwEpOyQ6UIQFwy9enUpG8d59v3oW8hM62N2bxAeypoeZyg2niHl/T\nbpdJv3CpxSUUb6P7bvuxJkZDfJAveEvxQrnCPk+nPoDZ8POZKvDwcx8ULdE4\nevuJ\r\n=GPyP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/touch-target":"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/segmented-button_14.0.0-canary.b704e4dfc.0_1641839636440_0.5367880232540774","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/segmented-button","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"11f4976f97972d2bd9aa583d5b29fab15f320094","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.c14e977ee.0.tgz","fileCount":54,"integrity":"sha512-AyABKSfqPPBOGzeQ3I3eC5lsAgXpKVS+daD1ql1WZD5u3OQEorqwOvTFQ0AwKD7CtjN3+pw5osPyonsQxPF26A==","signatures":[{"sig":"MEUCIAYEwzc7DbKU6nntl838Fci6NSZnaXcsBxsc0k49r9qwAiEAnV0jDh+dGZKKGtHIY6JivXQN2hyubtEz/YuUbBR9Qig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adKCRA9TVsSAnZWagAAaicP/jSOCQ8tIC8lm9/ghuBl\npbFdaAZYxWdW2GitBR9YBWhxVP0UFwzXKm9O1CZOdMd8sCjiiyGvfPjGwLwf\ngIaF7XNHUjPfD26fEBAujDGxPsUJydTNPSM/YI5PTQ2J3tsoqdAZVZQdFcTv\nU9x1DAWhVrkfxe+Y1z/ceMR4MnhXNPUld7tv4YOUyXKexAAfFa3ISQJO80ri\n3MpkhLCaYy0Ehwj+Xi+hlvvj6l+gjzS4ZfQdqse695BMRI4RTqrJdpRJPQF9\nV1FLGiepF26VD/1BC341oQB7nS4L25Ql0UwKDm3isAoXmdR1j4lmcDpZqdkb\nr/7mBo59CUwvpGclFjAqPumgvkI8A3BdBtW4o6MKRXRjX2WnQ3Pjqr4v0nB9\ne/mGrxqXZaYEk1ch6dHAiQN4na5HMGz5LIqv1CpXsRNDyPEWHo1eKj9RG//N\npG8sf2yM5SzMFfjNGHbk4vcG/kCuvU3GDIpAxntsRtRwFPqE+wYJngdnubi0\n7S6pg35kzE7akkRv0xfTl8PO2iEcqK8ZKwZ+1V7fRQVp6WJacBp/juvzrMHu\nGXuFkNVS/p3nmOE/Gl97qkU3D47UG+FjLNWH1ijy7rUIKrLRdYLm6wtEKhfs\nS+08IW+O1A/MIs1WGu8f8zUCf69TXiEQ3rygOlCPbzwdgq5bxZuGTqbhOzmr\n2L8P\r\n=aPWH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/touch-target":"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/segmented-button_14.0.0-canary.c14e977ee.0_1641916234214_0.9679148539053286","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/segmented-button","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"36628f13caca9b6e0e44804314060358e25730ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.b094eaa4e.0.tgz","fileCount":54,"integrity":"sha512-i9D9uN7kJmGoOI1byr9NpVDRtswI2q0z5TuVDrUNi/RMxOissrou2D72IwESW/VxSA29NbHRrwa2xYIyrZYtWQ==","signatures":[{"sig":"MEYCIQCCukzkihD/AEZz++fyF9cQA1/dFhEEevlPP7QEFpUAdQIhAIp6levfiHc/RNa3ojR41/rx1cMUyfD0zFfPE+EWs1Jx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRHCRA9TVsSAnZWagAA2UQQAJPJfIVEyKrrv4Sm+Ful\noSdaIfbwfokVAiXnNtqFVGfEtlUgLLdADKGJE85jNBnb/i/ExWQU1FVGfUZ6\nCz/X35nD3eog/E5aJaj2UQarcxC4/4eauQW4tT9EmTaidIXcQtGbpad2y2cj\n9NGbOZymHsepnWQ9RnXDlNQKvupsuRvatC0xvOS7EmQJBGslnaoQKmzGbHNh\nc9kJ5ymo91Rf3Xpglqz9tFV/2QKPSD1sUAt0Jc14fivmBX7QLVaOXk5gI9J3\nPA4M7J5F06TU/UU0cK+Pqf5+thBrECce4DG+C8jzLbhWPCr4DUeXIqufiS3N\nl7rse88Qr6Fg0jpM0c05p0En5tEPIUe0lCCQpRQZE9x9ErozzMpUXjdp0My3\nttUc5EPFuhXVBBUSu5eFzqEig03PhHjucsljrAaOjBY5keagOlGCAd9GTLj8\nR8LLI8Mk2NRCR/0I+24E5G7iUE7BDI+aWW3nH1aW4n+D6hm/zhQRTVo8FYjR\n1GJHgFgFFLH5owQYOPdxbLqznFgGPsKW57ke+/h14OEkcgUWye5ZItmt+hyY\nhfCOOR8BO0WTBNK5qTGfilNUcDivpYYhLj2lRJVVmz6iqD0DKoBpt0FYZwT4\n344gbsrwVmPintO4SgspiqXQBe/nyFAHdy+u0wJ03th2zGiKlvQFKP+JP+Zc\nCOac\r\n=GIrC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/touch-target":"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/segmented-button_14.0.0-canary.b094eaa4e.0_1642185799403_0.5311853051657882","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/segmented-button","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9be3f294dad003fd4dea7328f0a6b2436bb15a37","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.390220e42.0.tgz","fileCount":54,"integrity":"sha512-/0QqM7uXkFMQqHgNe1lfQEFF8heiK0M9MbMWjFZs2OuJG0du0UPSRxyaPIQtKveCPU0vq575fUog2gBVXX3Rew==","signatures":[{"sig":"MEUCIQDVNTHzp4qXKeF6MJrLMZFZQD0jHpOG/FdAHvZrJ67dsAIgUB88LdVxr0I9LRNV5iLeBGKsmf9OswPIQJ0VLXsU96A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2JCRA9TVsSAnZWagAAypAP/29wyvo+aRce5FGmgOhm\nmJ7ae7t7/L0GJDvyJRdITjWrFYP4vszafndIv6QzdyOoB3+dqj4QG5qWKERu\niS4GzdH16xOa5TlLN6b5Hzjm1PeWCS9E5QusuxELyvtDOTiMH6IgtvSFnvTY\ncPY4zdvNumeF6U8fwjAmRPEIXaX7+/8VaqYUR6hQPX4nm0cEKsPLj67/vmMo\n8cu5rfHm00wsv+aQdmqdm2mN78nr2WBOKOYGdijsYj9JealQyCg41bUJxlMG\nFW5WJsMT2igZUKVWOD6kG+zP+NAo9MdZ8C62gRTDmXTTMaTkEEHjU8OML/oE\nWSiY5/H6sxPqpDx5oBtEAeSQelnALiQAtfnuk1TQm5l+2o5Det83XAq63VXD\nbeHcjbacV5nn02BEy5/js2ezjKTOZoAdSTm8rY+JmfteeyG6KhRt0fz5FOtf\nHK8E0/ckrKq9dOqCAXw1CCAnvP3S6FQupsCSrTqQwlE7dgJcGP/dPth2NJy6\nuTXMPEVNn5hzJAIi5t5Hj7vilAWK17gSeAT3CEImJQUvaLzH6yBz0ziYl7yd\nV/P/wC8yT46wrnTmWVhaJHJ/Qd9RNlRrBkDRfJ6McnvVAnlXJOPbg+EEIAsW\n4fIAJCkWHSzDqlSjksiFD17ZgiyZwVd7U0k9vC6j40+020rBICyP0xiIwVnX\nXL9m\r\n=Dd/q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/touch-target":"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/segmented-button_14.0.0-canary.390220e42.0_1642438025600_0.5618451979978627","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/segmented-button","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5dbbf50407da56e296a06906728dab47bf7170f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.4b5391f8b.0.tgz","fileCount":54,"integrity":"sha512-hO3N92vjsRURfN5W+0bj5hbtWSJv++3KIDn6HYJPTeWgcuGp2eNv1WYMotNBNUriOAEbV/rB8Vnyk6dF+RhQlQ==","signatures":[{"sig":"MEYCIQCHdLeBiHjUHiGdZy4t1vA95huSOwbu3QdbjAZ9tsadGgIhAPgOC1qIRFU4OqLp/HcCYK5O3EZBcJ11PVjJjg/Pu4/h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSCCRA9TVsSAnZWagAAoMwP/RV/NIFhncj10vAkvOw5\nHwv+LzkmL7CvvuUNPbDIX5R6XI6/DZcwnhOCQJF6sg/+mUU8uQgA3zxumQ+F\nVaASeenb/qbePHmpS5SW8yZVPJznxNSzS+edh7GJ6Ku91NnzYMyIJGui2YAF\nV93O6825OrYzYtbTcoSdT/DYeqjZgavAZPvaH1tztwTzi33rKVd5C+BAPtBx\nAUeDofruME/Tjo23r4y4NZFbibOmO4FUwvfg4QpcNBwCJysjlKsOJOtdmY+5\n6+fqgv7eolhUaH6IVGqud5Krljla3GFuvvfgLKw7Jpq14JTtzEd+R87czqYx\n9CJ8cv/e9qiMoC7s439doDqnrGqySjKdsikJ+UgJYwXA0sTlQFWtEHCFGglV\nKZnBIMrZsVq1q5drt79VxWVaIh0sfpDUYo4ySwRrBTOLeRFKMSaFpibxx9RQ\n+nsz6z9FEr/7btsSFXu7HO9xwY6cM3e3HIgShRn3HHtT2xr8g3NcZGFctXOk\n67CeC3LvTGilsUyuDictOxCZ9zx448HHNyZa4XwlYmwoc9RGJhdOqSQZnXjH\nHk33oT4zB7eVPs6RlxOR83hQUrR3bzzlhWMfSkD9G2O0bxr46Pk1kCN5uMJ9\nSiX19DrJI7ek03u6H1dOcqUNeJpv03WaWKDDaOrIrfuyDpiNf3qVIpaN1FMQ\nY5CQ\r\n=vKhr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/touch-target":"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/segmented-button_14.0.0-canary.4b5391f8b.0_1642636418659_0.21814618553853893","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/segmented-button","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"891bf3c3875ef15ca863417889e9e6f6d34dda0e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.cef6bc623.0.tgz","fileCount":54,"integrity":"sha512-pOyNvqEeoEpaiynfUogjfiR6ag7c9s7bA1pKu9QI1HRlf1shtHCO+L2oyF+VZIXq3IGg+HBqICD5pK9ucbG5hQ==","signatures":[{"sig":"MEQCIGtp3FfXCzj+fuX8njQgqoCUhRSmTyyWIdDVxaWdYMrzAiB98Og88C8vttVUjgdQlqFV5vuD1PLKudBzC+uoaexFXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpRCRA9TVsSAnZWagAAjxcP/3dE1TSbS02b98CGyavb\nz5Ik44QkIv8d1yzcVJPG3UCPZ4uyaRvUEmRVb3NiF/OEPik7YIcK+jBhMjCP\npQFS9q/p8vN219oSMY1g+HTj7lj4wUvxfg2rXYAZ8CkDFM6+kZ03XkOcU++K\nUidHphv4B/x/W1pUFxDhlb5I09t7LtYzkW0YM7EmGxgmWFa3xwG9BZcGfBST\nQAD/vGRgCK8VCbf45QtwRuh/BqqjbA2sRsXusr4KyxAgCkiff7icB4oWsk2n\nOw5sjV1ozs8N+ffdIDV4LFpTYD8dRYqpYsmx8mkRkz4a0m9Lm2OPzesAB3m4\noJ3WUJmBx0peQDp80+zagkzybRBPa3LGuVtrYU818f+cWZ02afv2Yz40HyJU\nc/t7bJ+4K8NrDmjNWZx8cpP2acbnx+smRzFZ/F2eOzL7WDt6NlFONJPHpWBj\nMbhI4x2lPdntve5Mm5czm2x4ZKhVzQ9ciXoXTsykzIDF1A7YfXkRfzy5surw\neXrURxD8cjzvcESD3lZmxvRjWiRltxBs1ajhiMB3iqJz5QiJ3V3+HaRoJzTy\nysD+q81SMbjAD3t+9zO9JzvPpUwim30hc3v8Tq4aJizL6jZjvd6y09ekt98j\nHaxmVmrr1qlBiHZC00lEVBg1HFcG4AjzzXYvP0rtknZMNBEV6ui+YoAdE6M9\ncGnG\r\n=LfsX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/touch-target":"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/segmented-button_14.0.0-canary.cef6bc623.0_1642637905600_0.35604313623871264","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/segmented-button","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f70cb488cea7008b9e10cf5a38d1b02224a343ef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.0379179c4.0.tgz","fileCount":54,"integrity":"sha512-PAmXNAUiFG4AhRJOO4Dh5beDUp2a9ErC7Al2NL3/dOvQuJvwm+tfiyoiFrXCaEqVE0uR9LF0ZSL54oY6KZG3dQ==","signatures":[{"sig":"MEQCIFycc4go8CvD8VsNq1CcEgjtfCnv6jfh+/Kr798BlXhzAiBXSBoxPu+oXm+76GVV7yvP91m/ydjxDS7mv+mZxZSLeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAVCRA9TVsSAnZWagAAhrAP/Rf2sVhF9/VcDP4MIEFs\nEvLI7UA5xEUD61HCvGYg7zt6ZLk8MUtQS56V7+IA8EO1qjtlBIwOWd3WYszg\nHr3FVie2/OU6llBASDlaPSkA8DqmzA19+Eh9dwAo80ElLkeN/XSeiR8NvhRJ\neIM+CY2HL4SZgJg7eO08R1s8fQxSkKeNGTrkKo3rZQLDJsffb7YjNzJ/QIxf\nBA4aSr2Xm9/bFojs/use4rVZFUlbpJM5p78XcfGyB9NDd9we/hZ6c+ETeBG0\njVhu/nKs6+rF6eQVkvaik/wy+wzdhemQ9qZBgaNe0XkCS+ra5cfuIya9HSMr\nw9eD/jK4X5MCTBhPzLQheDnI7ZHSNlSjgazyoR25l/otO5qd5nJhFqp7WSOl\n83fBUMgG2ECFCDWyYMFIAv2320TWH+iEmqGscIzPDs396+l/l1Eix5MYlTeS\nWvjo5Yz+tst30/x/EOg0JbO4ZZmXzyr5Dny3XoVyK3zzspPgPiW0Xs+6dXCP\nktDLNQSeQgcSKXJtAGj2g3Vzn5S2EVIbbz26Kk3qxv80+fd3VyGYhJKK31vl\n2WQ9aaySonY5akWEZQRSQqKj43IZnMKd/hZ5m8p6sPOmSpawyQ/j+9XT5z1u\ndak7YQ8Dp+L68bww5TzG7aSt9V8P4k2/CToLk21XWbfbC9UJP4R3aoweDyRp\ndlfe\r\n=Jhnx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/touch-target":"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/segmented-button_14.0.0-canary.0379179c4.0_1642704917651_0.5229260558894169","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"722cca1bc262c2a985814c337697d0b7970aaefc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e62f3dabf.0.tgz","fileCount":54,"integrity":"sha512-2h8xP5mhBZfVDUEWiaIf7VTalJ3xoqmBdMVLouL3Fc+L9FHmlPjQb+o2skNb69N2VWpdrJ7A6JNb1QhjMU5RpQ==","signatures":[{"sig":"MEUCIQDC6WZvIvtRiQ+5lLnDr5EdktuwDIMIr5S20XOVNuuj8QIgbbjYZ9B5l0jsqUGuI4PGvQstBtHtX0qOQe76AHF0HBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zvwCRA9TVsSAnZWagAAk5QP/2ARBDAfvVRCdij2Q1Xf\nOrbQ8U2/niBcmpmCEgvsvW2BK6Vi/yX0n9tNcKixq8gmKSs6UBFw5UuGiQYE\nEpTWMU4ZCamw3yUglRXRhtxXremPZ8cxcoFoP38eZcWomNqVt/LJQtBqfnSq\ncHQDvlaAdzcDYgTQnKY5iouLonXvNYSxTXHrg8BZD5R7TLs8UbgMIgwIFiun\n9cDnPArPbtN89zSLyKBvvxKb9297X1DsQoIM6z6K4EJFRYCpEanlCEAHTOLN\nhxcve2+yI2BLQb21Lerf8xhx1jqFFULq/kyuRObrZuTZDBgVCIbPhx++9FND\n6UO1KPB6nV6znIcbwlaQFdRR4lC0OarhpfYNJ3aJDCxBNGNk+eATL3Ct1D6b\nLir3/z7ykxITaqneGqPjH4vGcnp8eOgn/8CVn/D38fRaS9DiQzZ9sG86PPD1\nTZXzJhbUW0NrtNKIAj7sjglLxf394laKhpau/5o0CkpzPPVNOYGN4LVfPJ01\nHjUeKnf9EXZgiJUc+QPv38Omzoc6xvMlSLbxCdQ2krIEIgfecZggBA2cEr5W\nqcifncu0/4FP/IwwrzojEK+/6tQodUh5+gdXblRHNYa0B9mT0Gt2hMiX4B3I\n2c0RlRavTs+J0tHWBy5oDZAmJ9fQa9jAUiuJLwLYSgLSflgoNx+IiWKB7LwE\nvk7b\r\n=924Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e62f3dabf.0_1642806256771_0.014820185253950235","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"93a505b4b17c0d7dc9400638af661852e496a712","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3e20c1de8.0.tgz","fileCount":54,"integrity":"sha512-sqYowa7cCStOZ96e4NuyX9jU3QCiolvLb47csE7SxjFuheaL+waNlPmk7M74DIaRPkva0ZehPUee+nCXN4XDFw==","signatures":[{"sig":"MEUCIF68AaghXK/IfcoQwIqjUCiUMVEUuzhiB/xMI5rfSiTJAiEA8f3A91Ze/za5C+/WtIriwbcS/U0FU/DhV75G8yRP7YI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BgkCRA9TVsSAnZWagAAVM0P/11m+Zm2U+bAx6iY8Lm4\noAtwiNWW7JsuLyDcs49KaCBWYZec8SzkMc+m06jtRBWRlkxH1tpcF7nJmHIG\nZt+ouLWBhqxUVkDphaNj0hM3+EaoLr9hxgk0xKIcfoJ92YilfmQKgTysIuCC\n6EeUXRNlDQ5pPNS7j9e1ECF45OjF7arQdfcBpKs5/6uRQnId4WGmLqhJr6Wf\n6vaxlRP5DCipTF3YLuxNTzh9WFSNFUCAbxO2bzimbyb9Wl+ThJlzlqbwY+2V\nqxv3mIu3TqYp2UpuetWkxSMtvdbexYP/LM8iP/27EJnoxMprxDcM4oZOP4i6\n0dFASH5U4V3ZYg2GeFtijKj426W6P7runpJJHDq0riPInFJhSS/g+CVnYvFR\n0QB1aYUGAEodLP35mD2J6K8VCBNRnb+tyVe+bD7v8++mlZUdJfg4uag85VLO\n30QGSlj0X6FHVovLN1svarcSlAddtPXOsugFaZYZoOcLCm7TMQmpwO0tx39m\n0jZS45KzKs6bNDayK3wD/67tVCxdUMbUnL48/jdVz9NI8KE5DzeVm/YzkgMq\nRt+PDbsS39i3dHX6kOw0IF0Enu8mCk0aOvE0wPKmLBpTYgz8mLjx9fcy6KzM\niVUOfyHCb6vNhW/qOVS8QJch0eNimIUx9pJE9EcNV1yIAPL5CerSe8yHtwje\nm0e4\r\n=ui8V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3e20c1de8.0_1643124772055_0.6899265107141117","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/segmented-button","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"107b3f8e3234ca5a72e248b48fa61a7743843157","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.9f9d928b2.0.tgz","fileCount":54,"integrity":"sha512-lit9quRjqpkY40Q4TCZY+UoFoLkKlwwianWhugGGGEf91qNGfFu5/nmw0rhjKn/XhOBV+wXxerR2KrxvUzW02g==","signatures":[{"sig":"MEQCICmh8DUBjcbom8fadhslyNCXen98iGvD8RFW5vyvVNlQAiBigN3IBUhnI+tr+UpaUFpoLZGY0fDoas80m6/iicMnKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uDtCRA9TVsSAnZWagAADj4P/Aj1SJFiYAPOAogQKy6I\nHkZ4GOkGH5lRXEwHPS92y6kocsrszwlfycsxakAh690TvxZFibq87TBPF+yT\nfpZ9CpYEoo2I/Ypem49QTFr8vfDBMpaPNgm4RyT/OU/eZx1M7I0NYWMUeIfv\nKq0mwz7l2D90aep8i9MLUrbxuYgaVQnYVsfO18WPivs8nh5VTkKz9HxnSTDV\n3YekqJ5bDxFsQYD3ricQybleRpA93cQFh4aKjYNBXzVS70ylwyRhsngowKZP\nRrMtQ41GJ+3qhStkLTyYzk5YytK5ZMBtNaISfwyr3/6xbIsmp7pCyhUOpC8C\nQvTfikZYLdBTSxLtX1qs6svtsXctEY9pNaJ6BNoVCHEfH56NyCJyCwZ6LVPE\npnpa+RnSXB+eSOjT/G1YuqdxDxsKQpMm8ch7nv9pddYx4WHVVHAiGt+8vFon\nGi2pGY5xLzTB9Rtsr0lyV8RYFWW4cfXjTLo3nJMaAGp2MoayBETe71KnWWV4\nNQTxHc6yGiXoOG8vg09kkMsSPcSOuDdCMXRIgtU5o57WLlpMuk/h8jWJBKqp\nWWMJkgtQpBwUUneS8qYB/bEemqPLQaT8PdwG0PnFctJnTf60ZVhhWfrga8yu\nqKeThJqrL2eN8F+2zUBypE+p5+Z5sipDzYxOkZ+SRecM/0CZ/PoU5F8cygBa\n7bPU\r\n=Eh8U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/touch-target":"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/segmented-button_14.0.0-canary.9f9d928b2.0_1643307244794_0.12730439105046165","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/segmented-button","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75778291f7db5794fe41ab59db2fb525ee578efd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.a2bcb065c.0.tgz","fileCount":54,"integrity":"sha512-+Xwcd9BN5+bVP/jaMi06/d+zTLHt3sG+ZiaaiAWMs6HS+rWbfN2q+kkCZdLGWkVM7JEGheMxN0iZbH22wmP7Uw==","signatures":[{"sig":"MEUCIQC110L2G2h3ZP8a0uK4svAwAUFrmtYRKtLj3LDEPPQchQIgIDs1SKMtVG6hIUtdQ3tQ9UOuJqvnPEoJYuvZ0rmrWQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYXCRA9TVsSAnZWagAATDAP/irJP51Qot2Z1TLR9Qc0\nnyTsl0HIk4V121zpK19FvSNl8+Rrm+cGuMq8Z3jA5GnA3urK6GhNTrEjyN6X\nDjkOeSmy3JCRjhsFct1xRv91iu14z8/ZeoXnF9KbJtl18V7cs8C8NxMbheaF\nh8y2LanbwYk/zjj0bnG/JGCNOHGYyY9wUobc/xc4kANdiafMOsAKPX6KPK7c\n+aDn21slqpfkiUGky0ZSOz/UYm6KpD0+V/fj28cAP79ZLJnBdQrHdwymOsJL\n03OHiMQie4hTYWOF2knF6k7UicTnnrG0TpsdrhCN9XMX1AoYCdTkPWzyCR0j\nBANcEkCpYFKDihFmSVKhJzjdOdd7dRGJ6avQnjRDmyNJ7eY6okcnwgCFcCxY\nucaR82KAAtLfDIb+SxjaHPfIuNvlQKnDV6qhN/SBDmHggsAmn5xcPWU426r9\nHPwIUNzz9me0Z6Cej5lTd2RbOmjE664jswKmHkP6agVqa7rAICB65RHX5VV6\nvGVvp2o4kvG1YJGaPyevjGMoDTI2V0cd/WxskZZ40OLmsAPh8dmTdPGsojjp\nV6Fm/6uqWzAL3CTjzoflwYcz/Ay7g9fo+a6l56NyPmI5bVflKal2g2+AQ2bu\n7IEUKdlTjrhJljw2+bd45TnMXrltvEh3cleI6rLH6qgSWUTX/R2SpOQ8ekoi\ntcvL\r\n=Skvy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/touch-target":"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/segmented-button_14.0.0-canary.a2bcb065c.0_1643398679585_0.20495689931779015","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/segmented-button","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ab16bb3542f4c1b1b40b4a1bf35587ac57fd7eb6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":54,"integrity":"sha512-EYDXX5iTjrH95x5frLRDIv95fROKxRGRBR6v7bQK68n3muxmRdMYnFug+9aGuEuSeqPNFmQJGa5pBmif5zf7OQ==","signatures":[{"sig":"MEUCIQC/yDtYcoq7lmZuAK2R47gTTN1nw27aK+E+RJHnfoAxEgIgWmD2fxE8rH8A2eUxQGo2vVRDQ1YOJ878inuzomBZQYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcaCRA9TVsSAnZWagAAvmwP/jYgHHno5otPj8rI+MC7\nh5OejVcNFoEg143ZpHmV/35a3/01eNy5nsU0C8bmbDaX9wMSmQ0glMAm5sF5\nRXemv9uaFzrOZEAuXW0nglPwv46W2RlTfBXaNXtOZYy/LQcxOcDDwvaEmhol\n8Un1ha3fLUIjtXDbVUAmlLrSua7Uhj4kNS6JydNT1FjbG3DWFt4E9Eg4l28d\ndA7hEw+9jtZsO8J7wE9XKMPcc6Gm/0y1mUQgyHlw31gqG9CIzz1UD9Y2R4m5\nun3UE3XaFTqr0HbBpnbu8YzvCPVzZTgemXqD29JqAgv7TlxuEctgjbumVbqJ\nbgvi7G/UJSOuBVR/9vBg9832o6kMOoVCeQcOiI2r4P7cNBereLBVvEHHi5PR\njDwC9GMRKPStoK4IMK9Q4vSW9SfPjvxlJmPtevHxpQLP2agg6IC9PbzyxijG\n6la73UiIpyxC6lwQWfKZa2E5GSMi0aFE6m9gIgqEsx6iax8wwYeDj7Ykdri4\nlWTMekz6Ai2j9Y52KfZnMYYMMYAu6CiwcxbVVveeMDtbOCp9McAWSl+hZXAR\nu8pOgXxGKgz553XimR7uFY3X9kJLIUWz32Z2OlJSGqYiWbbjhrUI3ENIniS+\nKOzHx2gEiwXeMxGHYFnhnADh2H3dlC2yZA2KDK/tgfEybwHyDEgbtUmIKeVD\nI/r+\r\n=tbN+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/touch-target":"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/segmented-button_14.0.0-canary.4e66fb2e1.0_1643398938451_0.5580109989947208","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/segmented-button","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"82890d9e8b643b1c10d666b862fffdbcffc6b058","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.9736ddce9.0.tgz","fileCount":54,"integrity":"sha512-QfQ46zCyM/aLUpYJ0AiOUHE3RoUCNPyg8IlObBrktbxPKUOhM4N6PdFOMid/lk0QKQxLCsphVORuA2qovUVIKA==","signatures":[{"sig":"MEYCIQDtny9+gM2TWwF6cyGungqenhYRtlLQOwD0dePal9/MAQIhAMGpUtiuIF0BDQ53BVetdZ60grVBkBti6BSks+K6R0a7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3zCRA9TVsSAnZWagAAomsQAInJFmGWp04HDmwzX8MH\nB8s1bId+oFhj4RuIMBQz2mCggjJ+Ezj6uuDhqQu+8Id/vCg6my0bHK/1Oomu\nnHol38aY+A08gJDikkF982i569N3BFO7QEc6RlVmZbCZki47uMapaJ+SKZEi\nUNAfrb2rnYBnTuOPdGKKLs72GNPJM/4P8SN4lJozHnSohcdNboXyG+ePIjft\n3eoeiUkwqF2DpY8+wqopAB2bKoeq47fDDm549I+G5SofGRjTXr526dc6E1ki\nDspLy7U5oPitUVyXfDTxaOUiCvnyZP6Ccj26mqs8kW/rH5xJbJJOKSjccHVj\nwT6fEgCV5QqzXVJAt6UKHfM/S53r/KwL2qS3ec6OpToPOuzIvFtZJPhPuCJD\ne56kksPzJAOzQmfWk8C+kqzVZwQX3MZO2nvnNXlMGn2fPB7/lHGnWJNTWOA1\nF2mI930ve7ASUoD6K6LILYfwiXXMGMZxAgJu0Pl7i0ubk26CEOX6CVgLlR67\niOfTChv1dBiJ1nJijIZELkIx+a/3dwteJpwVKgQalDJFbsmLQHCFg+5e5ssu\n0NRU0jq6H3u+8wLx9K85V8XPCbPRI8SR+Irb6WA0lNqFZ8FbLG7wfN01kTUe\nuONkgXsGVxFstG7wRgJB1AQdreXS4J591bpsoUyht3pbuO5zOq2eTTJsfxtw\nsLTs\r\n=cboA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/touch-target":"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/segmented-button_14.0.0-canary.9736ddce9.0_1643449843552_0.6854539710216303","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/segmented-button","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d045d5cc90d7e4c3ff3f9d15f04cde20b0b8204e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":54,"integrity":"sha512-pbwn29+04Zx/qO28h5bkezbpcP/vVlduqMWj8LGebDtz9Tdw5Bvf54dA37g3obFKiyexFGcYx3v2KfMCZ6weLg==","signatures":[{"sig":"MEQCIGBpTeoTs/TfAdTGoVnwcbEd+CxpeaZAOv82N6++or3nAiAQDFY8mhPVUGUpr+fg2XWG+v7nWjXE7V40mkUrDPntXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W8wCRA9TVsSAnZWagAAg1kP/2xyhwlRfCcI4FKEUDTZ\nknMS9rdD2YkWdVKbPwcbRmYJbzmDDT9wh7k4piWfqFXYghLe71gA8Zt9gN+U\n5Lja/Kj+UdHfcuVEmn3JXSdJ/nplJfQzm5aU3zcli21KhpDkmzGzPafbVOEZ\nx+uUi9iAEfJxyjMg3WZYtrX3pAprOpwKKn+4FEHUzi8QAv3C+wkbAqWtjeQb\n765Zcz54Xg2SteUv8eTKMiAcsriH5G545yqBQrWzjeVuFWDgnMv/xPq8HKBp\nGcJvC+qYpn2mbXdZ9hYr/mF/3hPaPbGUXtvomWtIX3GfD3qN5LAxOAbcI6lw\n6L65w0U2FHWzCa4mmhnvPLVQvPeS0bxGv/8pxsAF9xIODrlvkUnD1mHf7Zmu\nIwJBHU9CRGcL/0y0ikRDdwKVZyIyUr01Xokz7uEZw9lGmF9X6A3zwtGKGODB\nPu/6UC7NH5cSxbR9Ff8PHpPypZVX4ZLinWcKNHkj4/KlV3SWvGVHG/28Go7K\nCorpgsMIsC8ot67wYY4CuS/7L1TlRsEU8lzA36lW4R6RBNN12wRnsR6Fc9W/\nyqbayQF7w6olTEkzDkGHBySMm2h4y6qQhA9n0AmL3l+Ni4G/oZvv9Lhu8b85\npJOPoNN/GoJvJ5oSofp/Cl7fdEjYUYJ087gbiVzsyDA0+rKbumW6NTZpYcx2\no1FI\r\n=QDDs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/touch-target":"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/segmented-button_14.0.0-canary.cc4ed13cc.0_1643999024082_0.8832338271798577","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/segmented-button","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2156b25388e1e628430305f718a98a53358df6ce","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.dcba26fe1.0.tgz","fileCount":54,"integrity":"sha512-qiubRmtaj/biDXWT3RXV9P4ohvl5lIJxmh9ONyEjcCSK46BrCQ4t2siHG4cRkIosX2oKkk7K8MQqlN7wrPInbA==","signatures":[{"sig":"MEQCICdr81Ihk0DQfYMzmc4BuL1WWhvaWdu7aXV9dCA6RD9kAiAMoazHvOoJITmaqJZ0Oum5HM5u/t3sEX69vEx1XN9Z9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aFuCRA9TVsSAnZWagAAdT0P/2m06u1z/N4yBHMzUGh2\nUojOuDYIqksKYUTC4dVCS87BMnohbOEYMmV++3W24FBEYJ24Q2Q1vz+MKwQM\nataMvorlOGMBf7zr5Scl+tu7J9q275f6IYHgRInF0+CnX1HNDh3s4zPm54qo\nMatQBiEbQ3nJ1xzTOecegDEnE/RS+iVEj9AB5pIFYL14UfvQLf4I6dfzaAmj\nYyv9dS9OQVp2jXKnKiN03o7zenOS/XCz1CjSOO4rm1gkgdLiyeTUZL6VdVCG\nK4PpqI3P5M1GCTEOWBLFchQvNlQhl2q1TtXVHWKDzAQBpCpZE/o2R4EZvc9R\nZ09lt88Ez7b/mjc5yLgVVUVMyL3CgJAJXfGjl/lzpJowlXQYZgArLVEqrJ7+\nCqUD504at8xD33weoQz5pRH5q2a99mJKXz7WD16EOfCqILvJBnG6B5aiCzXF\nnzacMY7rTW2UCmIPzQ4EELCd+FQIgPeHTncHXrpQ1g70jbb6K5abRTuDvyYB\njS/kU9LpDfnBTyZHCKqg3Dt3gGMS7mSe8MTsRb1Lw/p4dU820cxrqgQZ8GzG\nZ/AsJSS2PNpCVf9jft8Ro+6sKBjkn24sl1GxO6h9wgjOGjLcaASYrV+C5gc7\nKLOOsOKdVKmw0OC0rfWbZ7LfC5wdp3dSlXw8glxfLNNS68sXSoQJqoGMMc+Z\nY39S\r\n=hq65\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/touch-target":"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/segmented-button_14.0.0-canary.dcba26fe1.0_1644011885965_0.0018528521661678177","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/segmented-button","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fae554ab4123f30ba818f4dd52b8ba61acb509b5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.ec54d9046.0.tgz","fileCount":54,"integrity":"sha512-C4V35jWhRIKNovU7XL1zDWbftKxM73WXU3/TpwE5DbNLYKYADx5SpECydj4mxNVCD7IEGwEi6MWJB6akmFZ1kA==","signatures":[{"sig":"MEQCICkeFRMF3AtKMDAMUaYxaCI38nbGRy3aN5RnCNsLU7vjAiAGyy2P+QkFfhBPNoC2HRmQuXPRV84luWGJjsibP9zbLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8bCRA9TVsSAnZWagAA1fcP/jkIDRzGYnNz4TM07OWm\nn0MShqGjNKe5nrFJQNwfmG9j8UGQbFifbP84knQYuXGsxlDV5hFqpnzQ7h1Y\nKiA7JYZvgk+7hPAJ/U8WIcnwqEVlvXbEUej06aPm12BtKg5Y0N8QcOeEIlSe\nCAx7+a9NPXjO4IDfmwokD0Nlp0rsymkaJ6wdh44gOyYtix5dtbQlW5WElnN9\n7gaJdgneo/Q1h0NEifnnvEQ694UVI8cowS5ioJaSMlGBNoZoWJq6O5wLI6KH\nwWzDwGViknd4pmqqhuyEHWGC7tlC4GbSG3c9TB2C56x28psVK1JCGvxvPScQ\n36D1bhn+6DAwypEAexrTT6VYvoLCtKYKhCdKqgkiP8wUnJtyNCQZLYcJmlXe\nO+OPctlf0b6Hpes/lijXcOqVIbsGHLsB1pkxETe4ZThNINJH29Eh5stf058h\nMxQBpvLZAHudKYs3Y/Ui0BEp1+vQQ3A0snW44P2WGdWYSzZCGcBWXLr26XFj\nrIZLc7Bcke6zJmz51uQE12jYeDcs1oD9f5lcGSBs7GPC+Tblq8SS7ohB49NW\nLCgDDDvYn0Y2ajc8JMkDBKYeXF6gLEtLcJ51yByrX6IM073G7yrHGI75wkpp\nhGJQdmU7LOy81b6gvW7TiXE4qRsPuAaCH8RvQ/p/yhWftIiQMomJzswpB/8u\nmHXL\r\n=va3X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/touch-target":"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/segmented-button_14.0.0-canary.ec54d9046.0_1644248859723_0.1367455670181017","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/segmented-button","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a9dfe9f6f4b5e9c6b55ffb0351a9eb4b4befd446","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.ea9b5b463.0.tgz","fileCount":54,"integrity":"sha512-YumDR3lQPsGx3eKDycQA1hlcAo95iUEu5Qpy4Q1GkFqwLgqiZJ/5FvlTwHi3JPurmV1Jh/gA2fI/lblCRxsaBQ==","signatures":[{"sig":"MEUCIQCOE8F4e9GvEtmMrcWWnV2iSNkwvFzAjEGncE9OhlyxXgIgNYqgnos24cwSMbR/P+K9qPDdesPh/7h7ijmL57A94ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//dCRA9TVsSAnZWagAAEvcP/iTqELXYW7nuHy6KQVUy\nXkwfIvb3QGKFqvffPScV/cgvEa9EgT2Rcmf0s++sRKSN657s/nqgQLGWSJzd\nTsNSspOJOGt5PAbTz3QpdAXMY5UBUw5JMy+qaO0JpMUvxXcUjUCEbuLK/D0C\nDmDlGaGtqB6JIBEUOY3Nr4gKO5VqiA/qCr2YOUyeZTZ0ko+l8CvbAzVjEcA9\nyv+jdY9s5uoM/FlGsyskiuVqFIQdD5SGmlVb688a6mjQmh9fDBiaVpSuxYIk\npTjgFwR6Cn7b+XuKs37KTxfrWa2jvtKOD9qer3o9B7tpsuG2MoKpvRUVRXwW\nsAeEQ1QpodfqtDwpPVMlsDf4l6YdYb76DuByPvuT8L1s8qdQc0r9EhJbfTf6\nCJuEx/yROu/4mmpIE9ahx6sPTl2z2UJe6UQipEf4qpE+7G35kix2juoLWirv\nZ1xmQMynlbChJAiDJMovY9lZHcINgKuPEPjweVL+k5sTiclzV0jzWpFUFZCH\nM4p7JN4ZmycgIHd6kT4T4X1MT20/kMlq+5NtkNFtiMdjfOm4SNmDKpxgCrA5\nGdCwnkYg4Y1/D6s4Alrj2Rt8giNt1mwcBU0nlRutgpWQazw+VVypvDwLwKKb\nyyXbCPsNSQFQj1bTbKCG5FvStIIOK80YJKuF3cWrNOLxAPPnXiSxwPHGlUBJ\nSzxK\r\n=jlhK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/touch-target":"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/segmented-button_14.0.0-canary.ea9b5b463.0_1644429277775_0.27882881306925866","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/segmented-button","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"547519ac8a8eba619b56209594784bdcce81e053","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.96ea061c1.0.tgz","fileCount":54,"integrity":"sha512-TfpNSTe6iMEXWd+JIZjk79d5UjzbE/8ee50W2Ply3zgEWbSoG19YZwRjdTYtRrQizl7B5KB0+92wlHNplA30qA==","signatures":[{"sig":"MEYCIQC4jNeBhTuN/SgHDYHoqJbsu/MRR8ZJeLv8Hs8qbBgvlAIhAJLLfhUqSZT23jEhQr7m/s5kefVPIRuoWbfaSrm2ygoz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA87CRA9TVsSAnZWagAAsQUP/0HXe3he56i715NIDI40\n/5aFVUMPD2n8fesE9uSygjei880TUHCiP8gBuBl/6H5j9JVnG8xJy8JoxvOf\nUKwQfFX8EYVwAkDCa7Lrn4KhVqcEFqH+nudlKlVmqb2+3WaS1k0ZIzCYyPf1\n7WDDkSUIXMjHs0iMemrav2DntN8B73qQnWpX3nnZQS8sK3p9xDrMojRITkVf\nJegBmBML1cPFfA/IH91y6pANMULpv9+mQ6MTdq4eGww7+MJ/eC6sLs9flrrF\nkweEqt6skjIYe7xPmDmGROPhnFC5kmXmn9G6EfHwqlemjyKyEgIcN18p0hb5\nsJCshvpRYqWyGzig9aPOnylB6VD+tTz7y9VxIV/0EfpIueevQzZ4442Mlbct\nidpWvcMXSayWC7jcfJn+p4lJH53aV92kk/3EPowN2iWzynpGmKtj3wKNEebH\nevlqfDSGyDKtPPmu3LwvL0+soXpppqYe713LnrZ4UcrlIyjtofvyOlu3Q1jR\nUWi1P5k7aUqdXp1Tc+JVu5WymmwvK3pVZ/SaVQlMHjGKBurvPPNDWkGp2QMm\nUXrT+fR9MLpTzWIRd5pPLiHHs17PK0PC23WaV/LSd7NJwAr4nySuTqcbMCcN\nNwfRzaDGUrSupujrUwhlAzEKIwszcf+0o+gFX40rK+2zRhQGkMtR+PUHvJya\nSvDt\r\n=VPpd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/touch-target":"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/segmented-button_14.0.0-canary.96ea061c1.0_1644433211596_0.17824983887154744","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"18b5b324d7e3bf79eac8eeae370c467a80f46ed0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e00181e59.0.tgz","fileCount":54,"integrity":"sha512-FOJrn9vRR2oUJeQRgY7rDTnsFsaZAbVObx3B0iz9q0BZRXWO+CGLrv51SDOMijpAY8KTGMEP7tE9Fqtd0Cc4eQ==","signatures":[{"sig":"MEYCIQCtD5KwPvsIm0n/94nzBIGA35ULITPx/TkMSr0Fp2gLxwIhAKOaMFAAvpw0++qneiWHSRDsWLttTnyxZmF+6qShMBfL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXB/CRA9TVsSAnZWagAAP7MP/RG0RWWiLszaLbDctoFG\nW9CR84naB8zofariwd1ZV8tt71RQWlCAuNUARXucVWkmhqTvw8g8TF8fyvXd\ncsRWjTQcwVz7wd6pbhIAOJ0IcGH7YzV2Q1FhQXHLLRp7EyuFPgjB2xKyh3+r\novQ9z79nQ2FP/0gD7TeqWyontzaSa3eqg+NYJ4UK49ibl7QCa2t0qT1X/Cib\nBqiDhaOUfwosWUKB5afXzLTnte48yRrJOrotoKmTJPfZ0aenIN2hcxADzWcS\nElaRXqjl572juTWfC851xkGQxRtszGz+GiZBcMRR9d59FJbTbu85GpZoy8U5\nPtjMiMIGDNhe9T6lVDEs5/Ya6EUNEQC8FWotyrawYshwUhonhIxGyvuvVEbg\nKpdfJnA2ngz6p9YTlwKk241Ib51upRR/evHOavFNbIf3uLXtgVmaR7ctnCvy\nTQM/avZOjZZV/X3Hfj4bhE6MOK1ZmewPqsCVfkbI5it7yxn07T3sha4KvtoB\n1IbStVyOXDlLUNh2aKMeKvbvFg9OJ5sEgOOtBg4aVViJ2NP/UZFRjKF5VDca\namTk+efzoiIfOIhWxNnXX6F0sNZsRg+eM2JqXFpXLgvGZLMeMTU+7coj+7SL\nIfX9/meEH0ZXOCrzY6NiMHuLAwtXRmuBNmgXiYKXadnbR1F+DctOUlPgV5cc\nTGKN\r\n=zw++\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e00181e59.0_1644523647348_0.3897278586972348","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/segmented-button","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9943a8dfca5ced27c5dc876954248eb3c6280ead","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.037285f9b.0.tgz","fileCount":54,"integrity":"sha512-5LAu6C0cBcDG2vp3OioLk+ZcMwvrekkHIhxLQXUSNLxt93aDIcIaZEUR4TSaSnfPDfyI1NYT568DwC4/qxlMCA==","signatures":[{"sig":"MEUCIFQsTqke2dbK3J/kF1cTcBopjO3udiEO1RBCJ4cizhoEAiEAtJvuCVKh7SA1aTumLeEgQCo/612mo6DSDEAjLsk+Meo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtBCRA9TVsSAnZWagAAm8AP/3hvtcHGe1VeXuZFEspQ\ngYxxeg+PJ9+ojPQbdY7j0MkA0ryMjZK9BtPqB0aZ9aTiSiGwYrfp+dyOtTpr\nlHThkXcRANzPIVg4VVz/8p1ebWO3+2Qb4wr6a+tAwEB28vl95IkAfNcq5Nrm\ncPEn6pP1/r765Jb4N2TtKg2iiLn3DAAq0pHuDgi1ES6nOC6MRKZ5thU1z+r8\nbcuhnPIFbS20XRGnMop0LktJ/EkEqiQg0ovTIa8St0dR/6ZACVwXjR6mxh6Z\nWwUEeKKmfL4+Q8bN5dNuDewP4FBvQHftyUuvhhHBjI729T9i1L1cpQmz24NJ\nVGuTuBpiKcCpEzALd29LDMS62g+Tsi3p+BApcrtpku9EqROIuxo/zj0AvDhD\nQx57jQyvzA6HZqV2Vu6KyC0kKdnwtpvYF4s33MDRapsDLP71Kh6o7oZeHgIl\n17fZuxW/6IFAtkd0t7nih7nDAUK2wkgqxxXGygATCW7od0+Y8jwbeMIZnZGv\nkw0lIrIoDeVnqI4fkKOUJ8fOsrFIoa+yDAcAMsOOai2x2vVWKNkA8ov1dY3K\nDxcEp113LIeFd4PyPK5eOTcZs1NUS9EzWmIQeW4hShVZ5KgkuZHz5l0T0pnC\nK0JQnD7iVZKfCM1BVhDh9MEFbxBe9X3NQQm+B5ArZiRRrB3IpSMmUdVrEpGx\nhCbd\r\n=CN00\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/touch-target":"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/segmented-button_14.0.0-canary.037285f9b.0_1644604225160_0.055257979432367765","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/segmented-button","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e415088a1ec7c6e8494f4ff7074f6955871c996c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.1aaa68dda.0.tgz","fileCount":54,"integrity":"sha512-2C5ruOD9edCby2NhlghirYgjN1eg/gLCLk7Iy+b9/O5q/Ch66Ait9uejToQ8CLUAsRxMwsdbOZzxj4Qo5m/ShA==","signatures":[{"sig":"MEQCIBzuCHfWwqaWach9kg1zvTq65girRCofBZIyywKDca6uAiBFXJTybqnkl/IRaGJzQHfICehRYb+gGz6N1H5L50I2Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVViCRA9TVsSAnZWagAAqDIQAIOpDxrVs4BWGeSb1HC1\nP7CTTw5RMZjrnw4qZFM4BIjvLSKAnMQc+k0b4egCEv6Ng3UkOBRZmek7fsth\nYau1wq37OYNvyqq6XjhCjaMDUwh4ybZ0yYiys44Q1fa3dhnQwEh5VS3UY+uK\niEvjneXmwNNdRvxN7Dt1u80hpGsdkcFyC7lQtglTmQNhY3nksxywgXF/m9iJ\nAjUkbzUCUD/aEzyiD9YUItCvB8gkvJ7J1FQhfL39wBWLvbKNG+OxY49WlIcL\nXNojrUIcl2yYmFF8Sqp6dokixuaxk9Ge5KJdil0RW8i8qIRhEGnSn61kENnm\nyK4v+f6aiLHY5kpe5d1ANOBwxR017td2nrK53Fa1oB2qimok4XrLjwNPbi8g\nN44VssgVRlpR5TQdFA/3QAU19EqMsvcmd21fYimlrQbyUTVDnVS0cZtgBUG1\nunddMHMPcjHKCqe5DfRzNAN3smJ1R2d7sOuCc9HwuunmeK76MNAiZDDRMG+F\nIN8nq8+ZtLADoXXVvQgNqAJQyROg+pHkzRzFm2bNLbLMem3jAB1Z5LedyZFt\na7bmh7NJ/g61GFhwh07y7vEFwPFm2YrmLAKFOnm5TkoEWz5mUunp76aQU2TY\nui70F9/tsjPyo00/oP+ItAiyUystIvhLaLT92TFgBKMfsl9npwK7m2GrRDcm\nKXrD\r\n=+piB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/touch-target":"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/segmented-button_14.0.0-canary.1aaa68dda.0_1645040993951_0.21873494292214102","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/segmented-button","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c6124781c8bfc91b747456120ce2c44e845de8d3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.ab4aba1af.0.tgz","fileCount":54,"integrity":"sha512-toOus8sQaxxzzGimWfEZv+9oSmOiDGKPqB8CD2Dqy5IztzAcT1CO4N7/Xu5ErK5S5VRUdjlMcgGq7coR/JcMfw==","signatures":[{"sig":"MEYCIQD8z+9IPUZwkG8J52RYl+/O5xfkzBjRAL9vDyYyHvBk9QIhALHlO/rp5BGO2ENz1pPubZsYjVpiPDQ3cki1eYwH/NMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQww//a9/YKiOrvn9C/KOXsol8p2aGXpVdm/aXVL/J6OhpnhKjx4u2\r\nfseFw6Ay2Jf8EUdkxoyh56++M0uIiTFvBXNtrvIP2cFVx5vzE/iiDRhWk4w0\r\nJ1TU21tVQoie+Yiu3tcB6362/dEjxQYIzHMv81b83rD8ELU2SjnKAYTW/PCy\r\nhRD1acPkl6HRIV+QJUqi23G3OQRysTfS+amlNg05S/pEK44BKQJ5ogEua7Uu\r\n55rox/bxxCfJOMPo13WB/21TSZ/QvSC5j3bcxcV+6pm2ExebOAF2j5SoIEUW\r\nTphmR5E3fAcMa35VJOqS44chbnLFr5Cx6ZVqKE1LiCyz+LIv9D8m8pPzaU9Z\r\npbjcHC6tCz0fF9xAVLnXkJfvJrWaljmZxO70R5QnpcOWLqS4L+WZS9XyWAJY\r\ndyMAVXkyGUJoIiTVOGdt0H+IRNj4Pe2tFRbhnPpqNSMN1y0MjP4Bk50IBIfD\r\naGuCTyNiwHAMo4UIVFqUs/Za0UNMAh3V49lSCMoMvi+e4bXr0ZHnD7mTX+Sp\r\n07sOkoniRMSMN7/ZQLPppK1C45zL9NeiPH9RY+zxGNoMHv0ov8zko8Exgfv1\r\nB8YSVhi1hrfY8NTzP0q/pwCCvc4C1z1fbGlvpZDSZF/GsC+rofyilwLmjXuN\r\nGxxA3io5CKhuz1t5f07E93TMBngRPliX1go=\r\n=PVOy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/touch-target":"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/segmented-button_14.0.0-canary.ab4aba1af.0_1645121824590_0.5939927110199004","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e39c08e76aeaeb8485fc0f2ea863995be70304a9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e58552c6e.0.tgz","fileCount":54,"integrity":"sha512-PoIec4pTTBF0pZOmFz5HbLFmi1jnVlzmMaAhC41c16eCrPEAZOdjPgbaBTvAnQpw/QXSThcB2qfIttpitoRmeg==","signatures":[{"sig":"MEUCIEJ6eNFPjeB9DN8Ymv9pnD7KYJ+PFp1R2yy0BvTL7BH7AiEAkVgayWp5OIDKLpZ0ibojGqeWBuaOZ5CIh4u4fjX8AFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9jw//QuhK7+f5mTl7U7YmkLVtyxbBQYFDVZDm8MnisTa4Tg1T2mZH\r\nOK9fxzmT36pNBBK/duQc9Yzy6XCZKRSHhlVeR7SH9jY+X/K2oaEA7qWXzPTN\r\n/ZJlJpQEJVzCFV/epXuwt8EqIqt628Up7wlIHNgCiYvZbmg+PCZxfo9XP3yL\r\nmcTY5Ra6aXhVJIx7ko3Ne3XBUAsX9g1mK3GTPBYLJFYxO8jna/5KA+cmGTI1\r\nsrhKcA2zYRwIPCBzKqe5/mTY9w48LUKOxArfMkveBH66BXHUrDJVF4RTTQWp\r\nD/TQ1nvsaBzxCd+6jB+ym3HjQ49Dz8Xr128WFTmgPNOLlpilUsD8dIDDP3u7\r\n/c0nQd8otfFkSBdGe5f0c/Cdr8AefkFncE0YHJTjAZiGrD1TwwwR0YDnBEfQ\r\n1EZJwxPf+hIXhHubNCELlUfRWmntoM+6JeOyuSUICxFAKzkxWlk4Vjc0lvUQ\r\n6YLoiqsVWmZ9u6UgSLhHqjVwexz1F7+PgL1ou3lt4ZaQd1Pyqaw5tXcOY36F\r\nfJ7EXeFB3OySRxdRd/6zGUszy2OGogjOfwoj0yUdJ3rWMdiJFJXPX6ZG8Zpw\r\nBrUVPU1+z7IJChDNnK43M5QS6q52E4WOiwaBzaQp5BB+mfiN1+7QqH9uburg\r\nCrjfTiGbZzvwLkUn+YQjRnPLIz4wsg6YEJg=\r\n=6D/B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e58552c6e.0_1645207491966_0.9453346898398685","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/segmented-button","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"48574f07162bc0bc62c5d4c79b3d6f6c144f3e60","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.868793776.0.tgz","fileCount":54,"integrity":"sha512-I5lhpoxt1g+AMuxVdXxtqHgJPCb5mvpQ0eHCliizAdxC9cOZ3B+OAUWBlPwk06YU2/Dlw3XGh5vfRqN/GQg2KQ==","signatures":[{"sig":"MEYCIQCmyUDCIsv1QuCOLvyvuUlwNpu29fcBw/+k78J4oBoo3gIhAMr/5D1ngQuI0FZSZtKnguf3aQqeAREqko1Gmwuokn0p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSlw/7BlIpTm4TIH4NP/7r6qs3g7oEK0jyJC9HThRW/q6GrU/tKyl6\r\nbmZc/5ZKxb1d0MiaG8vVO0cBRWp/Ydzakx4FcTrO0mU4Qp05XgFeiAz++rtb\r\n78pJEEdOaHdAUrgeAPEUg36BeKNeJJJkC1lYyK9JrNF2LS8ir4Ghqy3k72Fs\r\n6yQCqMfq2eCOVjX0BECPrGv3W4Wo/nzJzr8EL+jotnmiqH0DCTl7rKgiiNH+\r\npYJUF2sHhEATFayfJyZ4QPBRgphGO7zmsZjzSD5N0/CO/HD9MnFvNCtEwmrN\r\n2vl0oDKBTEnqUnzM1cn8+78HvYtMUVcL1Qjjw3UpkyIGd6af0skcEMfqnsXC\r\n12MDuNhcQh61b8LWQHdJQFmY+Pd95R9TFHpbN2qvIPjqPTtYRZvNafW7ziB9\r\noPidJxkzoZTkjBaTtkLuiVsJ0QFt95ioI3AP/gUs5hJSe91NROujVL4FH8hl\r\nmY8FErKGtYWAbWypDQ9Au48IXUUQUqHHTz74G0wUoVchC+D/N/R4a3x69KRN\r\nlu6QeGdDvJyi+iP/HyGTHrst3ImfXepI1ono+4aaSKfAAqhPC0pcOPUQj4mI\r\nG/bvoEOz2RQbFqCS5e0UzKs3xi0aV3uF8ssv4HEKOah7/burNTTlDoiOYZzY\r\nsgHYq6AhqZLgFCwbm44M/3zuESbua4SQhas=\r\n=2mEW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/touch-target":"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/segmented-button_14.0.0-canary.868793776.0_1645558605686_0.34015002971691155","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/segmented-button","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4a0ac1fea5686a2f5c3fc8980361a29d3a33538d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.fdc37a445.0.tgz","fileCount":54,"integrity":"sha512-YllxroflqMlws64+XcEe+6n0gnJw7FmJlIH9L1B4e4l9z+6RrGc6lbltndRqZ07hhKq1jM30HbDCACSBKgXBSw==","signatures":[{"sig":"MEUCIQCaR7g/SQKiuIS1JwBLQAIdqNB/2Lcw0Uqnz6amqI8W9wIgJvF7lO+J4WhFnwHY6ij/52dOaQ/6MWIT4YFSuKGARtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreaQ//ViUigEyvWNDZMJl4OHcp1whXsd8m3kqkyR/ain+7DrrPItxc\r\nQMI2cehvWPKEaCnjW6qJ5ymSz3kpuuUo/0E7NRnmjheTb73ecncL88nBc5Dk\r\nqYHeCaJtvShtlpxIfndlHS4rGj3tL8wo+R4ZVCFh6UtFYxhINmJj9LjMIZHO\r\nLWf+/WR8HwnjlbudzFacnuE+1YD7ALmHB8wOF/GrZAsTZJcdJlFsyqiuL119\r\n+8knM13hS0R3FGRR+cA7Oe7PmlrRwqscIIlKL6X//kKWMiZMowCkbshOZrgH\r\nw9ai1UNBcHpnVh9M4wh+l2osZooHlgBxG0sz7wZ+RvuMx2npeF79OpLP2KCm\r\nted/dtHcA2WnYLoTrn/RqiIOqKgBNAXb0UbN88Su8tUeLjZIHOya9rB9a7Jn\r\nJ+/bM/Qa1Q4x8A7VM3RMC3WZztCukjr40Mxs9IBiIvEC5qpAppB3LqU8uFJF\r\neDzsMFe4bEdSSbu+m7ktyuzj4lHTeHbOcpEOX5diD4GHsnIHT1q81GYjTkoS\r\n+pJixIdVDi0/sOojA5JNwQS+47ZH0xj1S0fOWtT4yxxmG7rPVYRgB7a00lBI\r\n3YF6Vgmj9F6uOD/eqbCTnkQGXWqWTPdZTvOhqt07siUGo6Rd2tKuHmeg160R\r\neIglE0jEjpSLbs+QiRKD4UKDOWEDAHQJdOM=\r\n=joI4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/touch-target":"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/segmented-button_14.0.0-canary.fdc37a445.0_1646074010563_0.8016179489297353","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/segmented-button","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e49b30e667e4be814f4be8f6e79a29867a6b264c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.43c7d87dc.0.tgz","fileCount":54,"integrity":"sha512-ynoGfQBBIqw3M97iqJRfqCJwprCgL3GwIxwv51uL2V71cTKqQ7VLaJ5Cxm6hDva5+TpRotMIHt+8ngqaYIVY+w==","signatures":[{"sig":"MEUCIQCuau2QDTBZpdZZUJMQqzxA1kGB5pBA839b8akqBc2m/gIgJYeU7OFaN8FarGGaNPabbJLdZ0xmtMkVLa8J295+1CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvFg//eyvjGd8mC+EyAOUhcI65xN5OWzAGPLU2hSRG0tfcl1HAi/uy\r\nNsy+70HSJvHisChgaRNcvJXTNRRnRA6t9De/rRIFF59Y6KsuZlHdYo+KaqWz\r\nA1boXA+RnxIW2LPRIXpC93Qj9fXKMCyLAmQ4NRgSxtQQfxlh5vSu98nu9G+2\r\nSYbdEC0iQz6lnPxjeNOJrT2jEByy44Wcx6CKdTGYmt9+kDf5MpERKF0dCDKa\r\nt7pQPH59PaTbfRDCIBAg4qZB/5Rp3SZ/+SJE7VJDLSZZNAhaC2G5MGjABxTG\r\nrChjggsbzjfhTSXrZuiIX34bQ04lLs4/JQn47roLoJ7LnxtyF8IGmyys0liT\r\nSBnQeJ8hWEfEVDk2cerg1RDsBR18D73rclNKFrYlBWjDOAjD8zdol/0iVsF1\r\n0ujNiu2UVG2nLdRVP4IT/jzD+9QyQgigH1boj1CbgrI1rdADNb1YM1Iu6PHg\r\nMh2DwfmCurVa0e/m7WrNOahBQNz63uH9r87r+Z+f/jpevaMbG8aaGZWZcO3t\r\n/zHpkAT3la74RWicyeyFv7DnU6c5w4sZyWERtJzkmCj7HzuyQkbxR7/RiLDS\r\n0tMIYqFPlD/Ph8HoUrYDfrYOkxnSBUbXfqzycPr06plwcgWWajNHhNCOcTep\r\nU5YRnv9GIPqKDNYbU9WOxJT5Ccftxint5lI=\r\n=Y6WK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/touch-target":"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/segmented-button_14.0.0-canary.43c7d87dc.0_1646148833089_0.022155804347903763","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/segmented-button","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9dc8b48c3079ab1d012d7b96ae89fa45cd164f1c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.23043acd0.0.tgz","fileCount":54,"integrity":"sha512-xTb9qq40jgZrpddyFyav/4Saq2kQkedKvWnndSYXMOwTDBaMjT4Qa7pJ54AT7KDu9QfJWdcBJN5J2JZP4xbAcg==","signatures":[{"sig":"MEQCIGp+4/3orcKCDv54REyd9sOvKW2u0UB2+fDWzJjtfr69AiBcv9Srw0VKEcSnOnVxec9sQaUQrF6hYLtdGa4kkLO2aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt5g/+OezeC3ovHs+dWZmnj7hBkQM8RusRRqL13JahJpCqNrswMsSV\r\nHg2wQnEMiqvIawwLcbZzLgatBujh94/lraLVx35FzIWxT3j0o8jU7S67LZRm\r\nROEFtkGypMY8QzkF2oePHQ+gWjD86pMiTEfIfC6FZrrITXat5tzxFH2UwRf6\r\ncvgkh6CLW39PfkFADls2/v4nVFF1cxGce2DTbeZVEKwCmYv6jtSL4FbNkdga\r\nUiWa8W7pUL6/oKi5uHr6CVfSFCe8KxU5Uvbq7AS7XGIYk1fO5yDgOsAIzt70\r\nqBS+7mjJoh5uPMx+N/swN4vUCfo3NVuMzA+RIacN5tHO0t7250OgDB6M+Z58\r\ns1+4eN5AAYv/0/naYabjAcyKDhMEHDC2/qzmOUwYiyCjsIIGzUXIyEFDr4dy\r\nLlbzRBLATV9Q7GBY/EzPkyg/r6ffSt6/eiUqJ+AASA730ngpiB3EdB1tfxxV\r\nNQzer6gYZ90fkx2SFmaxrgtDJVjuSC5P03RviKrYOKkEINFyHgpFJcyzuI1m\r\nPTDVTK/fYwV2nygOCvWuYvaoMkVys6FftpuvyDmInQuyE2pkHI2YjZB6yq1j\r\nuqWaN8FbvnHnKMWF24Es1ScE0U/DQxUjKWEU+bHFBwPicy7HEJBdaLq0fxov\r\nJkPyGXdhEN6RJsnQwWXqftlRg9ubS/hHM0g=\r\n=95Ga\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/touch-target":"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/segmented-button_14.0.0-canary.23043acd0.0_1646252885172_0.9659230921121502","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/segmented-button","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1c2923dfb62141a97b2889299784309181ce4c94","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.6505e61c5.0.tgz","fileCount":54,"integrity":"sha512-w8cnZFaRAJ6j66rsM9eXjt0qa0hoOthlmKydpO4XZ58D/X5GXFR6t/p+ecP9lzPtduCWfw8AnOrh9qMI0ndcTw==","signatures":[{"sig":"MEQCIARUKVQJIhsy3lc89Sautk5BpQoRDzZb27zvqDr7KKh1AiArbRM7dkBeENw0NwrPiiwPx2tFKAQJydbcB0R2NLVfFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEBA/+NfHwiUczZ+UipBCJEZhXIuQpqF/9LZP2ivDbuuOybrJ5DSCg\r\nZGSO9fgadxtwJphN9qiPbQ5lWaxhZ4UIiKUFG/QihD8/8LS9GbpltGJ4m01Y\r\n9fGWvmVbyic0rAsTh+0zoheKbcMTLUp9ifWal8/TaisLu+w8XebfOJjYGCr1\r\n23aXteY5TtbtnZS4iqj6koQ8/NjOSkFWTn6/Qb8dMtZWs4qeu7ls2Va4URi8\r\nIV+J+dDml7JN/iK+Dg1Xh1VnoJAtkpEEpn7aL8OkhcHDDcA+9x5V2XvDvWFJ\r\nc4yvuR2xHBaqT/aUNMbomokbtc29rOR5barTBU3q68hezNqqBduqv53A+rF8\r\nD9CslmMwo+K3kleUiNxxSkbWAOsagDllAJh1SJRAhOOyeE0uiKWOVkQAvCx3\r\npXjT5bKlIId849bxVfHMheIXMxXMbchl8m+72qJenVjq/AZccqwYWuFWvQl1\r\nC3izrxfK4cW9j3xVZogCHZfh3k/6iuwrXn8l1oG7WNk0AU/0qlkp6kw9zrzZ\r\nrLRs0fZmBkMA/hV5hfdJtxksmDWqWV96JepuIcpKj4IoXNVhGjwiJewkjMab\r\n/b8TSbj4LWcMUY+qF+7Zx5NsDuGmKWdThMZEBoS9FU1RE6PNnWahkaV68ND+\r\ndZspi/sftuIrS5ynJZQ9F86ew7Ad2vcJ5sI=\r\n=rS0o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/touch-target":"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/segmented-button_14.0.0-canary.6505e61c5.0_1646337687582_0.8306238070549818","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/segmented-button","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dc3cd86d0450ca72e44296b0e2f360fb48491841","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.16c166154.0.tgz","fileCount":54,"integrity":"sha512-pMRQ6A8ruy7qtkSNKyuvH3kxn8ljTVMR92WrmccjsIQ53cJXuATrzdGsYmadm/ITR/3I6dRR6zcJgLp/mLK2Qw==","signatures":[{"sig":"MEUCIDTFmyJMyIH3XWi4KWXxWeDvfBr4dqVD2gjHcnLW4wJrAiEAu+9ictKGOCNIuM6Gqe+NvwvoFVGNbQwpfZMgWUqnyNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkXg//WWGKUhltbHQZZpVNaGraDnsrNaitYAxJ2X4G7xjBW0UPlk7J\r\nTCCuWmCycChXLUxS2v+MAMG0SbJyPujnYlPON3UcNWzpxai8T8WHU5IYCl2o\r\n0hcfBy2USu5SmFptjJrKBw2DEkW3OVCNm7aTIyPR2f+7J25456X6m2VhT1/5\r\ns4Y8wMUGblUx9PklKnkB4Xe7tn8zvQ0FHzoyUF+AXuubz+ExMa42uiDpkrYu\r\n+b3Cxx/HP/qiow8iAO7tJiRSy5Hx32p8zV83iIzDPbXa6/UVdRjYoO/5byO1\r\nbvgKi+N8s6QfnS/WCRehiL72OmOLpZbYaGyVj0WdxQFjEI7Sl8EiZi+Ki6k0\r\n7wTpZ2pWjSzxqGcbhO9XDqaZBkcUNg+vufglkq3u2xnRSFLiT++2GWcn+nMO\r\no9nTioTxK1gqJG+TPdihhcHCnkWvz32YXhpGLsFQiZTeZOvTleMq4DAxLXn1\r\nzqtExWsdN2bwE+vDRgXX+SZmEy03Vi1APK/VOr0+pajHlHDjb770ODgC7NRc\r\nrSY13K8VElpygFUMJ/HlTYYrUoQbgSHKpOn/BrPB1PeeXQHHkntuTQ/rCxYc\r\n2L4NW/n/i6rWm4b/l/mmcNBtKzs1uWIoFnBdqHSyrOUwCszeSiYpsvJnf0gN\r\nS9cpnlZ7Sw3EChh6gDdxZcWoxsigSymMUwM=\r\n=KwAd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/touch-target":"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/segmented-button_14.0.0-canary.16c166154.0_1646781783424_0.36810759399418713","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/segmented-button","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"008dacf04230e7112e13e1174e4c85f220a76721","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.bdf1d3771.0.tgz","fileCount":54,"integrity":"sha512-9+vMdAB4kvs92dV6a2PIYk36UjrCYXmArt8UvpOPSa8euGzQ93ZoMF8M/k3GNUJhtabqqVf8PdCGOs42sv1Taw==","signatures":[{"sig":"MEUCIQDu0KwDTT21fub8TKEoeDPsDlx7SKdjaxyglQtdjyc9OAIgDWitXE9wna72mjEiHlwHmhXkpG+u6oZwLF/gOE5WgsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1E+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6PQ//fQ+ysEd6ksDZfkUE/H+KpPcDfb7uk4g2T1lDUCexzmcWRvOF\r\nhR8flopEKLuqb1HXqn8IvkgMvrO9uzH3Y+LPW5+c7CC3Ubs6Yy0zp5bmqG2i\r\nlIlBryWQSikpKNsA0opJcatGlcQBQTlShVka7ITyMHmnKiw5T8833YXxdbG3\r\ny9CZ4+TBb7iW8KgpW5J2Lywdzxmcu3n633z7a3cEWqMTzdXZNCqQVmm5seKn\r\nUHGWoEuCH7PfkGgiukz62PiBJ8YCwqlopdOHhKe6yAsvI0+vpM70Q6yFTw70\r\nthq2TtB8PIazjAXti+G3F327iN5A/sr43InPU8mepX7oX3TK5paQDKCpwRQL\r\nUbe2djMkXaADp/tTlBUJb+zKJaxCoFJliwYrzGxFtmydyQhLcdQpmfExjb/o\r\n2wAbfsb/VTqu+uKu/wz8iU8Z4W15cpgxCHPBXOybXIkRClDwJUGP3ZsioP9C\r\nWYX81rAZOUQFgJOoPB0I1MznndFf9rTMdA2MiAa6sPVjawVujQ4Ax8sM3VnO\r\ndyI6i5P0ukdEc1idh1+9PaKW7Za6YliLexig/G3xW7GvxNP23SQuDGyKu56W\r\nXen8lsDdv8kkDCFlTXtNK4hZPb39hXcjZn1PXwwz15saHAnDW2v8gy6zFG9Q\r\nU8oRl4V/Pk7AN6kc7l7Qv3P5Awq2VGnPBAw=\r\n=bUD8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/touch-target":"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/segmented-button_14.0.0-canary.bdf1d3771.0_1647268158461_0.6917511366958562","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/segmented-button","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6abd98642c06307b785a8f2c6610708e94fcf46","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.cf4292778.0.tgz","fileCount":54,"integrity":"sha512-9t80fkM3BQoHC7bdJ6HzVTaL221LBZx18tha4f/ijX8JPtMgCVZLWkszdSoC2ooRoCLXpHB8k/G33RbfeGpR+g==","signatures":[{"sig":"MEUCIDjRHuoFXyRdfUBKRgiDjVIMHUUPduzJZWJzpoP5Hk7bAiEA7utGsAKM3EvgP04AfyuaX2kJPsGNhGf9sf2C/YxuK+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSxw//RQ8eXu8NDHygGeAKLy1p9G8YY+xPD5rsIG/SGheJkZMWwifd\r\n5QMqCugit2B7zCHu0+PjqC0Jzyu/1DL+GjZJr9N5iWGAsioVUgww4etBgmIJ\r\njb8VLFbVHA6+DIJiBy4f4hEDVEUDlf2aKtGk5hzErfU7oQa+1OXc7GixeKS/\r\nwWyeFMQEgGVnLu1tuVpsmSgAnVa1S5ndOnhyxTvkdfysTzdh2N97mq1Zqc7o\r\nFXhPwSlHmqnCvxkD7fFOo32cbp8YEvglSvJlTU9KhEUi+PaQiZ+E6Dw4+Am+\r\nUUouCMsd1IL3QFuElbJm6KH8mRUe6wM023rBghqo3BJfoHJwmuGQUhZ8zyr0\r\nSeU2tA8V3/6p+49umllM5Jy4yog3pdE3OU0O2dhNQjrbydAdpA0iWYnY5ypC\r\n4VwR9A2u9Y98Trv3tvfANnexEH10WX5A6cRgBSthHR/VTF8u/0AjEuWRHPCo\r\nU0AvAwnlIoj8MpyC8DniC/tYlnYLTA40bpBMfvf91bjfws/jmIdT4Kvw1djD\r\nlfbvvtYcZ8W5bF/UzZGK7Tx4mbb81udYgxkoF1i1D/dzFSWQO7yhmrvFYeV4\r\nps+enDJ7e5wB+kWzmzh5hqRRD5LiFo4tx27mxs7NdNjdj/BDimETwEzsfu7w\r\n+GJ4t/KlamIH3sD/5e932JI3vMJgBPkk98Q=\r\n=MyO2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/touch-target":"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/segmented-button_14.0.0-canary.cf4292778.0_1647304217472_0.5282590204972584","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/segmented-button","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0c80c0a5a549a0155b0f745c85745de42fa9eca4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":54,"integrity":"sha512-mAzTyYjsINNgq/FRcgzl8gC88tg34Bfx8nUOASFNKWE3AAZwAqdgszIJi0jAOBOkpFOmpcdFJ62vWly3l1YVeQ==","signatures":[{"sig":"MEUCIHd7a7ApRQeCD+iEsj6l0hy7dkXctaMTbraYRuzcUtgMAiEAthRWaUqf3D2AmRmjoJxtdF2L9t/OZ6tDqBW2P2XVOg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqExxAAmnXGBCpzbhabk16ZBzb/RtjlU+aGTaI5xzk70+tnpl9C004f\r\nhdNVfHDuiRJul5OuLlaUXKBMG4a2boQXe2xWy7rVucCn93Q5y8PTOIv/pOUS\r\nIbw7OM5G85BqgIlFTBCC1/xiFT1g1pViKN7LgK1ICctCgvsUtzh2vzGeryIJ\r\nLGNWh97RQnTmFqMjLbRzHEbfa+94uN7YBPk15wxGMq2UWYUEe/ls1BrT6b5q\r\nc05hHsU4iL0CWSiLqO74MZZN7zNRw7LJv9yHqlpKdDgtga/aDUWlxfH7R2vx\r\ndEPYwtbZ/vAdYpxTKzIDrtkaf5nTkjTKe2dkn4YBwAcktbemDHoFSPgGMa4F\r\ndhAZ3R7bsIsAgETkshkcZ0D7rFVlas4awg5qLX31+nLiDwMOO7277i59hztL\r\ngfx3Y962Tt1QcV8DF+6+9dET19UP354rwtgvDo/KhTZQ1bvtyIKvrJVu1paS\r\nOihShr/6D41WXbO+efKQZCYGkQSBWksjdQ/fKrbjbsXE784+ZNHN35RgWY5Y\r\n0Gg2fzX/ThsXY4glzCRz0tpeYBpowgwF/P17WVKzedBXEKdUIf8n6z73+/v2\r\nTH/SVD+R1p99cxv1nH2RIBlTSkQJSgHmes7yywLix1U3CwVFe1fbcd8qbVy2\r\nOPWmaxW2Sxr3DnIHHaV81P5WtpeunIhZPzA=\r\n=Wq23\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/touch-target":"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/segmented-button_14.0.0-canary.bbd43e0e0.0_1647463843806_0.7125186614482781","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/segmented-button","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"349e8543ea2dd8f6d4853062877d66509e68aa09","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.1b6afad86.0.tgz","fileCount":54,"integrity":"sha512-jCDFv7LmKZTSHehtg/UHU4gCHB1Z9bHLpDF+N7ni/QLOGz+fAUCVzLjT6G00qTu9ICIdXkpjD9bVD5WE6+k4uQ==","signatures":[{"sig":"MEQCIDymSPXqg0pmnQHXG8oPTB75D3UKu6c6jt1q5X3di4fEAiByEA8UOl7pOGuAB27wJQKRtOvfPlKLewpIrlKDgyaLsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqppA//WlbPyQyeYzJR/PeRxI+c3eJNI2Kgk9YATqlXN3OoCSwMHAkE\r\n3H1ztCVdNhsCDp7wZkQtxY9mKLfQUScRnFWRqEt2wcLnCfpRce/yd4oPmOGd\r\nWCWuIl9KkUPJXoj/Glx+orT4M5qOUi4msNA8pyPSnS0Jm+M81JfRZYNcGVws\r\nWGhzsGk9/iyTtJXKqf0rbx3iORY1s7LqDPeAmJ0cemfBANs3S7FdrDsunNrb\r\nl4ALnCrT4+Ad+Vc8lY0z4lRaeivkGxTSGSAGM0zE1TIG8YGkKw6dsFj0qyt4\r\ngImczm6+i3njFe+WQ9HcgOdrndBpRH4wbY+k6OBYRTbaXU6yI8NCdbZhDMxd\r\nvdxpOUx0rh6f5nIqMa66Dx+VsIY1OszQlDSIKudXxaHBbytTYi7Tqo6Q2aO4\r\n911APExcPkzOk6wDMHDigeUgRulqQTFg7T/qvVJ5CxsgCC6cJ0UdLchViDK2\r\n2WaubOw2x6dKCU6f62VmU7FN5W3gsApnnb+UmuW3tFl1qNbBoVogIKfGDFgO\r\n++y4mrT8sKm1sGclqs6olVA9s6tLGKty/u8e1aWHFiZ9WzVhs/dhdbN4J1oa\r\nXkK4vo7FVU+oL8jOeawBakSWaPaQtL9BjzS5wC2XIECr5h9t6XmqgGq6gzTo\r\noYnOE7nn0lzDUTNnPV7Ec4Ed93f8n7lPseM=\r\n=avki\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/touch-target":"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/segmented-button_14.0.0-canary.1b6afad86.0_1647464656294_0.14815868616669525","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/segmented-button","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"97029502bc9608ea2085d1eba5e378cca4742f82","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":54,"integrity":"sha512-NG5tx012a/WNYkG/Akt9lNJUAz59Lpq4P0BmAGd4OT8ugktz+MZ8K+RvDW3Xn0yjbdHDNihajMTg0gU40mOO7A==","signatures":[{"sig":"MEUCIBwZJMTn0qsO9olkmYCTh3uRu9wX9Q4uIhDfhwLhHn7tAiEAuJBLRsGfudXrq9tUIQmMAOUrldJuh4C2h8EbIURqA0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSWw/+PgPU71RrC4qOSl4uyLEH4PhOgTYSG4NWfuW1RQaq8Me2i4uy\r\nK/taKWMllwOP3u+g2tbZzxUWAF9L8Ik7wUllh668jFcvAPyoRMNDHhzibukg\r\neA1unVfsxwXru3XA6RcDKRPZTL/J6WhbiXU7ZGy8ZaOaz24OSjUtCN28h0U5\r\ns9Og8IgB1eYO4eAGlrU9od00hTIDByuKLBgUegpj2QZfo0tb3hg/c84pPSXA\r\n6WZV2N8THHhJVzdELE4X6NhOEt8NNIInTBQfmR/c1D3VLWBRCoJ+Gmfs3dAd\r\nL7ee45V0H7byGmebGPLTg+1q6UTVoCMxLYkfl4sIMeX08IQdqVEhirNKLVxb\r\nMWB3rmHk4dT2rHAdPxlAGvYtMhq8Zd0zppM0tT0AaEClXWf9yJ7c9g12J/x1\r\nyGJJykF5qnKzlfj06ew9B+hBJhNNSTH1BVJ6azM39Gu36/OxoxqsmWgBVtUJ\r\nUUycjdKQ3gXgHlCUotcTJZJUTpBxUXO1TTvng5Zx7eZukG19USoKtJuAD9yk\r\nbiMf+LTNhhLVEXcLx/eO/zJlJCg+sft+a7ZrUyfBliHvdwuEXppIV0Ky4B7n\r\nJjo2ufLbAisFj8aCvEcYvzaozY5cGk8vJPlfHhx1sL0VxJfukva7hTDZlkmo\r\nsImprGWHnHY8bdtAeX/swzoRNNF7podnfeQ=\r\n=VDNz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/touch-target":"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/segmented-button_14.0.0-canary.bdf9d4af9.0_1647465512553_0.4669002352268663","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/segmented-button","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8c3c8ff119d8e0ea06b1b15b78c17a315c55904e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.32b391398.0.tgz","fileCount":54,"integrity":"sha512-hw2OTSekdrnhrD7sUmGgVL4q6RS2kwVDfDG2JBRWdBQceDmfH9Safqtwt9USO/2Owyk6itWEUL7WLlHyIL3bVw==","signatures":[{"sig":"MEYCIQCdq2h9FxRI5JliH5v71hqJp3nFSHOspPkFJbjxJxc+jAIhALvbljast9zhRz4+qb5eBrSJ/Dnr7jQG+epGImdXGn+m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd4g//TUuBJC2uOHL2yyzQBaql1ZREaTNSaIs03xvHUnQbjblpFxfr\r\n3ltYbd8mhsZv3U4IUg7oorggdIo7dYLwOqxXjFUpffoE4oATdFFAcjEyb3w+\r\nzfgDdv8uwVW/KHwv1qnxII8LRTD6FtdC0M8UZY3qKYs2gLoCJImUIUouYHdv\r\n/3R4mx+FwR63lf71UpE7s4b1rBiHhE0Ha2/G2FnFc9S9eTniSBXPaRDTLisS\r\nJQzQVeBNnhnOdixt+ompc/19092GPFRk/cZQk/W6ZVhUZlU4PuJjjpRvZJ3l\r\n6Hkyxkk2nAhhuAhEPdLFFB7Edc36e+krsVJG28PL2l17JXFQaP/F6g5netTj\r\nY7vDyd7vYWb8g6LkmEWZUTCR9Lrp7bywVtYI3w5Tmts3fb5Qe1M37nke5VsB\r\nnIMshDU9Qmc7HLGmplca7LJk5WqX7FBXsRFqubDwrJdkAo9BQLFAtmwWfZ5h\r\nyhhVDGEgd5Z+WKCjKINjR7QxgqQO1Lr/C8bNxenrl2H9NQ26jssrq9C0hWr+\r\nt3QizwgMdv9McLZgUROM1b6OO2yedmLl/ULwxLVXM4tgsxcI6KufH6xGXxl0\r\nQdDRddcMHCexB4hr3iigK8wBz9ke9VqjkIk80m425yTNLQAe5WrM+J2igrv6\r\nGchhLhCacIuJX5RQ7YiRGAC1jAbNRvG3tts=\r\n=dugf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/touch-target":"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/segmented-button_14.0.0-canary.32b391398.0_1647539995274_0.5119000547501835","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/segmented-button","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"677934ec690afffe1e90b6321d9780f837fae9de","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":54,"integrity":"sha512-e3wUhGmCYCeUqR8BJTjdkS+bjJ8qnOGeb+H9aNGi+58SPUVUvvOkkQP7HG1vaqb5dAh2a9aR0OFTeCQHjIM44A==","signatures":[{"sig":"MEUCIBEq3JsXLOGD0JJ1Qe9N3HD+EwcgcqiXaLeWyzbjZuN6AiEAmSTUm+WlZ7QXbeabGkhfwNUNPGzEdTTbUZBfk+T15V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCPw/+PHiN2FxVfUoWMe9QShnPtrN84fC1GZg/46Mvz66u9al6evwS\r\nSupF/gvWupb0faj49NcapPaCCKL5AT+R7zxSJAnJpUWFtzVro8Hl96u86DoP\r\nyjaO0SYVJbPOFXsj+4wi+w2WFW8PAe9UELJ07lo23JyZpb1erEibXysbZMJv\r\nItxF4mFRgK0VfApiSm3dGuKTXaRwdR43fvTabv1iFjMiW38Hb6AXYS3EKewz\r\nRpKOZ6GEctysU1EfKyAIw2wE+8E48nbS/5HxlMzSiP0FFae6mpu1Qg8kcEIC\r\nuH6xStNuaEnF051UjAJxbX1LFELIj12NLni4kjiV9iFViPBh5imVNVCUdK0z\r\noIjqPZKYcrG7VYxwwndp5lDMhvU/hpDh9MSb7jMDf9AYw7gjb7ykXK1kvcjX\r\nlVAwAEIouep33tnr101Q1T4JLWZSi73VyFCYOudrNGTYT0WuEbHHoyiBIoYq\r\nuJidnK6UQJ8rSekjUNChn+/sm6mGoafGYGxX7W+ArIdPmq6EOShTexqxhUhO\r\ngs1JPAmdGT0LokO3dHbSFStXeOFeTp82bFChlPZgU6HiMN3vd9u8fH6qMgS9\r\nbanGLMiKSwu6kJcxLVz178Nv0UEIvJLJsxYWtST079q7uidZWag/oJWwQcsU\r\n7hs4OvxLnK5TUrkdo85Iqbonjs3Hz5reaAE=\r\n=ZYDx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/touch-target":"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/segmented-button_14.0.0-canary.ae8a6a3a3.0_1647621594677_0.6135845452600679","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/segmented-button","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5fd09e6b32135398a3e2eeca7bacf5b850271558","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.cbd9358a6.0.tgz","fileCount":54,"integrity":"sha512-PycJI+8j5MbCoJnk+odt8YCW3H0tdIr9cC0ISPigOW2vTQClO5rESfdh+CXr7bBf9iGoxxZg+q/B6l0VHwwx+w==","signatures":[{"sig":"MEUCIQD/qylf6qF3VJ/kRovGZPkdjLnBf2RSbyyffWOKA6vWfgIgD+qO2Sm3d6C6y7qcryzpK9IUsKPBRTMXGuEBo5R9Urk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzlRAAlAzibepPIX6GFsuHAFxBTZKK//PjbXetXsYpmuyuFRrTI72A\r\nIYsZAcOqiDYREWs12WDWjX4JF82B1Wmr1Qyh7UbhRCvB9MpOlkPIbhsJsekH\r\nBtG9Oad53CjVlgMo6dxnbRcV4F9IcV1AY0Jlxr0cjeiRn090asyneeWKph7u\r\npwpHkqerevCtGN3yFhG97HRSIZUnS/2Ejr86zvSD4saARKM/gf2gG9xTo2gK\r\nD6jxTBUviZNMd5dhhgTJi6suwnM93dQiV7vp9TI2EN6Da4EW8rhYFrpQkCHz\r\nkmwTALzUQKwTBwUblOdqQhESQ3S1aKNa2YODKTrVX64WysK6zgwFxHQ9YrK3\r\nmCTTXYfh7a9xdhjpK8qIBW9ci+dQF8Nzb400Dao31y5P+X3HKHmtnb+yhkqV\r\nhPdskRkJbvt8//qz8iUIbDNTHDlIDgQ3sxKurwPF1x0tzF6FPFXFoYNUXEQv\r\nu1kDR0QX+QLIJqmL66UyYd2CGOa3+QHYWBg5jJ9JHd7aTH+vqolQPIAJn05t\r\nPI8v/4QDr23X3gRH6wqO8VgXEqZG9166Acf253Xj15f7sKjxcS6A4+2DWKGO\r\neJgmA9hJMOlOm78SWxpClFD6e3d2pU33gXrpokJW9wq1waA/bbdNbnWkmGgk\r\n7qzWHK0V0O87keJlJE8xkgxWBhvbV667JsU=\r\n=Fgdx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/touch-target":"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/segmented-button_14.0.0-canary.cbd9358a6.0_1647643965145_0.6895046084194738","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/segmented-button","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a59cfd1439e21f9522888756004fddd904cfffa8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.dcfe49c98.0.tgz","fileCount":54,"integrity":"sha512-P+4Y/2VXNceItdyVQkyEKmy3MDvsS/qGEC9nTbFoYTyTpH+pfeYrW7WD19EGxJ95xHKdB9nVto9qaehD/JG52g==","signatures":[{"sig":"MEYCIQCnXHmmcD5Na3m/q3g0Ubf6tT+j05Ybt4IUwxXVnTmabgIhAL9gA8D7H0VA3JN7nnX/zfzkdjAnJBQCpxctXqL4PRF6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMedACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplAw//fvDA+naQY2LDbf64yokk5PzJ8mJ/+Oi/Y0alNLpDkoNc+WOE\r\n1oa6oo4C09bUHa/TBPbJIsOS91DLYI5jSr7ukgVukhF13QlkIE1IpjhTZKcT\r\nkBralIpM7yEK+QxvDmz/g7hEgzoZCfSmHpk+GC7x8fWTLhAGIpVIlcgr9Hpz\r\n7iH4n3exeXMZEMZZ9EU+kJEBJHs9TGtbXFE1P7TwIqDRWIusvRzHKucJM6yD\r\npasrT2SnO0HN7Uc2WYkCbeqt4s45+SuON3Fs5YVYkYMqs/cp1VC7wHMS0nPj\r\n/U52i5wMLv/b80FAhsX/FXEEED9LqsZ6lOqoynGZ5ji+BKOrCqc5qkSgkWcQ\r\nq7RG/0+pa2yQusYtPRMTV1oChD9bcokZXVOsv9GVq9V7DZ2lx+ujcfORpFOM\r\n/BSYMyRKoYQzfE7A2zQv8YrZ087IExOKymjHntRFe0oo29MYHYUhwXtjLx3o\r\ncDeE2S5+VgjHmswHvVbsezjaodVFwNyZmIEu7twtHKH/LML/cu1sigF2hIUx\r\n4X0n6sbpTDf5ZWCZTe8QzU7kfIN+P1/ahiudTVtXE0VgDE5tgjYPzTUKb7Wv\r\nqa14qmgEmyylXGApPklb8NnL3SgCBLLSXmExiGUoRD6ullxBWJkwEeRlStlm\r\nxrwx3tw/VSbq5tluLD7ZubVwB8WSKzMrTK8=\r\n=5oSR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/touch-target":"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/segmented-button_14.0.0-canary.dcfe49c98.0_1647888285676_0.7250131435369549","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/segmented-button","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aed65c6ad692ec5eca8fc5612e048d919adabfcf","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.f31a833fa.0.tgz","fileCount":54,"integrity":"sha512-MVxbi/tz0Oz+UHaBioCHXi5Ie3ELUIJ8FV+HHaw2Dn46A8CPipyr7WKydUg8bERkOfGgthLx/ri8tKzO+Z+iGA==","signatures":[{"sig":"MEYCIQCTt2wArAsqPnHcAXmslv9RQlYWjn/zO0cjHu+uFKsPUwIhAIDgwcpRSc3hMqFr227wHHDgfSbTso5pMQtePr+4HW/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkrg/+JfCVAUrErnc4cU3Po7o+eDsI2umiNPtsdrmRVKt0crzX3Kc9\r\np1bcg52gYXxGCTwoA2gKmVtw7aKFd3vJ8AgUQQoHh7+akY8Eqf9IlzVLDLTp\r\n4FCUMjk/0hbRhn5MrsZMhws6+C0+ftbRI8pYMfasAvF21HYBXuBe4/gx5O+z\r\nlVLYOE0KNKJGxPUvp4HP3QBZB8Yz7zSfCK8brbLK8P1LAncrLXIGzpHuqDLN\r\n2clIDqoDhBx3B9wnEesRm9OA2h9CVBrJqFGpi2tuhAaW1GTkkzrs09+c6y84\r\n1eKG1Ni5fn+QSc6K385Y2bWCuSyYXzQ5OBj4Vcl1H9TeemctQk0DnHkv5WL6\r\n/JnYUiXjA3FXefZCePC9UpwWOojBJ08oIJKg0AxQU3M73uCOqkuWvNw/JtIN\r\nPzuod7BgnpILUWoUXHRjCpDnazG2Y2zjJnh1eJUE1zbQtHSEih8yb90pSq0T\r\nlQPPbjIQ+vvWozbwi3XMqMr3ypyGF/i9ke6nbpfP7/HX0T9KTuWD1ZOEiux4\r\nI/y8OSIaCTzyR7QMzdht0MbvUuzehOMja2CyWcDGWq57gYpx9QabDWnLegpe\r\ni4AHYkLYCQqS8RNOHJDQvGP8EnxEisNhpfg/hy8fwXQDns4cNsOrCae/s05y\r\nLia96RxzYIQSTph38eMdpApbGMoNuK6xN6c=\r\n=uKe+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/touch-target":"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/segmented-button_14.0.0-canary.f31a833fa.0_1647996687875_0.9005450936652681","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d1d3f9d2539a21d7805526132d251cf918175c7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.4b92e210a.0.tgz","fileCount":54,"integrity":"sha512-oL3lSNyRatkMWxEHuuC7B0tnEAS+Zc5EZQ7dun6f2ex1iNHu5i89wbp8j2QRL3DCFwfqHPj9nqh8TQ4CJgB1hg==","signatures":[{"sig":"MEUCID9/B3hx9TiKNaz7MX7X7qkKAp55JyuxbsQAfNeYS15UAiEAmkqexlMN4NrTky095v7yrh4zhnhHYHxCsVUDQveqZ8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJag//Yb1TCt9JQSnoamH0m6iSLz8qDqSw6kf3QluUdbzlJhv75158\r\nx+i7D2CzdDz/bQDcHuLkZitmPZ5hezB4IUwz7+EqRJr4IPpO2452tHFAv2W8\r\nAaB74Y1m9sze3GlHZkAGcps/36OLJ+y+NwHBsyLtxHJHnhz9Nj/B6jsMJ62o\r\n4rCFyr9W9K5AC/eXPSiKBDdljFSy6kxjBrvO9JZ8GoPB9EOlVb2vLJrOzta3\r\nZgAOXEu92LDuRA8uLorKt1Rjf+Coig3fcBsdqmuXYy0dEcUKx3E/J6Sjt4zz\r\nf7EoICEyTYPjeKqt6b4Hrj5UiQicPKMbLbx8EuPutWtEuJkkFdybpIz0TmZm\r\nfpm9/24H912ksHyyPtWGLb6UyKMgRRxBj5DXwnXNiVwV+aXCN1aW73Z55HpA\r\nWgSQshFV8aOatgoj/Ug0xR2iT3v9BUdS2SO+0m6K0GYSfw3tAblS1tepfv5i\r\nyGK3Nqjx0xVv86pK3QMwjLGsmHuxSnNTUPmDvXCmanLCyfodOYEt+R4pz5Wp\r\nZCRWCr9X8o6f+Vce3kb3S8f0RqfSy3MBoUrA0FdXyRqHov4+wFH/Nrrx3ta7\r\nihKjhcLIgGUOQ+AD7tHg/Oz3+tZ4DubDMxkmhKx0JWhaVVAtiJd6updG6VUX\r\ngUgCMCIx88KR8snV8iX/YnjqprDcer7H8gM=\r\n=oIxu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.4b92e210a.0_1648153154510_0.5871487368594479","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/segmented-button","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c1e1aa66e83c0376eaf822cbc24d2ea544fd4a09","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.a657abb61.0.tgz","fileCount":54,"integrity":"sha512-52gI+0cp5NvV7FZQE5u88nru8K90nY65bCTajhqlGAxd6nu/VroZ92i/bc8RbzGa0d0ScvwvNQQlGJMPpg1TTA==","signatures":[{"sig":"MEQCIDAyysXfuQSPxyyzeZXdAPCjYRf009VzjEwlTFqx7sPrAiB8ktsl9L36OEmHetGEIDK9FSXy/2jqB4wuC5DHeNYLug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCwBAAgh9nq1UKQ9HQaBRLzAHpO+Y6TYRod5xKv+vGziv7F1YX8XAg\r\nvuKRo58JBK1dm7I934kWxOeNPKq8xml8dfywZyB09XtoS01qMYZ0wye+x7ji\r\n++hb3E2cPRmkJtPkWKUsLvrpYP87ABIeLrxwvF8lJXUy0WpcP0rY8y0Hhy3v\r\nkuOD6lKY8jzSeMEZZJN0eJtE1LDQJDQWut/Omc6kS9YI2zR4iPpkmOmqPObO\r\nmK08oygt0/qAVFy27Ow+8PKyyB6kBjchoQ5rDd8iRdzGv6aCFkLQx3nKqcEO\r\nkf31WABWVGQcCWjdhvvGjnqWj55WZBxP+WR19NgKySq1Q3rFOBxH+Xr9YYWS\r\n9lf+kkblINJvRSis+vkYv1s/20oBX/y7y1G6asrcUoTm+wjCWFcFQhQ0qRVF\r\n5f5c/wMfVjk0q5k8PfeiAqLqzbcpp/QT28ZMJ9g4feAua5AWFOQyb12/ApCH\r\npW8nXXIKd/YnT2rCdPBjf5XI9S0aUYI1sngmarC5C4RfUJR8nhgBHqoCceFE\r\nI1z3IWHtaPFAo+G29R6QB+io7YS3WGlOYw5QSQBqlD1PmGQIjkOxH2gNwP10\r\nYcP+HhRfpKEyPmCBa+GhN9hnDJdI4G4pC3gZfvVtmbxPxiOFQBqAa+MCioq+\r\nVB6caiBPT5/TWpJiM4b+npAKNOvhQR7PqvE=\r\n=Rr8z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/touch-target":"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/segmented-button_14.0.0-canary.a657abb61.0_1648154435977_0.631357722247353","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/segmented-button","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"de111127ccc5e9c432cc9a1c89f746423219df9d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.443f63f50.0.tgz","fileCount":54,"integrity":"sha512-hx8av2RpgqalsOy8p+jSIfTu3UaUXG7WYTTIS5gLJBE/pEbIgxZWM0LcULh+gB/byCJtEbAoB59hj3FPEgU3Tw==","signatures":[{"sig":"MEUCIGwqN6u15izR0eltCswWFghlK3PNdDYK41MwMTn9L73bAiEA0CqNASbDfGRlLiOLLwBd2NWhy32fk0ZeIf0ugTYmWVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrluA/9F7ahctbooI7OVek+YlLy9g49hfe+7ngRhD7TTRBEJCPFKJ8P\r\nad+DzKZxhSt148XdQo8t4mzxQEtZ1QrVrx4E0RPx2V/B2rcH11Xx4qgE6pip\r\n2Pk15GasRAxja+xhQaxxZrcVj1S51+R7HZNc3rCy8cJiSClPky7e/Hkl0jtu\r\nqliZSoMaYlCs2tpAInNVNEOGsyXU8Q+e7vr7z2Fg5w+/oO/m8IMvarBcu/c/\r\nwbU7mXR1carho7MFveWFW4oUJrxcBCoVvvrbCdep8Se4zsz25QRyl4j+uLDO\r\nUtrg7rBZPxk882B24huIJ//GpIrUsFaNMSJHZtogKonV2Ek8Cd7+1IamR82f\r\nIZ2nKZFRF74l8+VNz4VkHJdfUHYNbNNGPWo+QDnIBdeR0tjXsik2tVQxYJh7\r\nGn1DYlr6hpvy2xm3ecYq1pnYN/Luqb/gQIGO9pVecXEfAyzRQKf8akQCoipM\r\ng1q4QohgkVFJp7rroGVpllGf7FvLwNuHVipB0sxaCm9vVK54bl1796uDAa7d\r\nYFkumkDE9T9bF9PelpLjdNlkib3Cd7fwYy+hx/O374daMS14VE9qyRMRxd3F\r\nwHeIKcy7yhcYuxHCAL2q6nRdaB+zy9HxRAYliIvMRYaPoJQeq6uhga8tASDL\r\nDpJUM46XUsGbSGR0zMe1M0PelQnnaHMnA1o=\r\n=NPut\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/touch-target":"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/segmented-button_14.0.0-canary.443f63f50.0_1648249515818_0.10078979172142222","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/segmented-button","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e726e59b312ee5368b7da60ca9f25d0ec99d6963","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.eb382f318.0.tgz","fileCount":54,"integrity":"sha512-krk1K/Ni6e3eHoWUMAb+cugbzVxyTpUIovCpXMtwrbXBPzq+FR0TYUHhOOjDHa5t1HOTTKfsndNMHSe8+axE1w==","signatures":[{"sig":"MEQCID4WRCpe3qETbt9fe/7UnjYkZZGtsvA6JMDAodeFPgC4AiA1D9mH6ts60A1725xATdhz/GqI2on3f5Pv6u2zJrSO3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0NpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopNw//VDFGySDzhnRMZfHExf6wCDhuVJp4F/6a1XEnd7djifxD26mP\r\n5ZuRR57y3Nv2Sgimy36IOMdue8mBO8ejIoq4vpPlx/QZ6ib30V1O3wTJn/LP\r\nej/43uS9w/XD9iu0TSSYYHksyfRVmEoJAlqn5bFX3LjHxNyiWKgLHbBRRk4c\r\nzb6aLj4MnAmbMPVMq3Zd4FmhCen2nG6bYLrvJA/I0H5sJDIwlIdDoXYc+pBY\r\nqJQ1vbcLjxTovJKlX3hzfVx3gQd0xjpNesSW71vAA2XRDptF9wBN9umJIFY0\r\nBaaz4TpVtLvppeebVtuSLSwI9r6Y35Nqg3JI6EvVwIqU36msUA9OwryVLczi\r\nbaoidb2DI8EB2An7zQ4/87gbUvwZSf4w7f0dCMKJHuRBvJehr8Fj+mBycazW\r\nGfoCxzVFYIZO1apdbDCsyy8wPM7wm1H/Vt3d2uuLjsnrOr8jcll5SpRQ9ta9\r\nRX7d+bJYRPOosDgNgZkhDdsO3Ju83BMRv8IrKVQ3OT9+TcfokVcL5xzT28m+\r\n8PKzogvFkzll60GIVP+b+/gIoUMVdR3woXDBZT0rPIqrzcC4leB0cImpzl54\r\nnKJUugeas0R9p+pAEKSD9y+HqpAebn0GTGpY/XjfmQmAlqSOwmqJyHdvYOn3\r\nkni4ZFRdrRJjsxQvQ1/Oy05XKQ0VUiX3vpI=\r\n=hEn+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/touch-target":"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/segmented-button_14.0.0-canary.eb382f318.0_1648575337710_0.7468024758824461","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/segmented-button","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"602a81d707caa74621b0f16f11c84ee096764c7e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.344d52823.0.tgz","fileCount":54,"integrity":"sha512-Jg/+FJ/xtJzeZ9A+R9GrcuSixGkStHzpXkhtAjB9A3bI2iY2QI0yoCxqZmbG2NoykaDZ0hA8mgf6en5yXOKMsA==","signatures":[{"sig":"MEUCIDmhpUAeiquD0hfiA0TkvMoeMAI34dqfba1BPK29C+/UAiEAzr2bLMcrTnUlK0NwbTFt6VowT/EhTJvu1I5P3IO3wcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCpw/9GL4oJJjTg6OcMlMKEN118bm1+nz4LPcWE2h4jJbUGlWC/CIx\r\naBLdhR8/D9hE5at12F1MibHu+/RVsYM+XsNG1XKO6pK2DoyJITmnLeWo/pD8\r\numntkm2U62v2GMmAEyg+XHDlknni6P6JL6pyeiySI4/DM0PXG6xA+zl3C538\r\nhGH7XT2uGvneO38VKKeT46YVSv1IaFTjH3s9RA23DGVu+J8sIjXox5XIvPCq\r\nVqoThJRMcOdDm49k9VWqjTYhNO3qRY5GcxVMvmJ47G8aBvTWxfhDobxQAgiy\r\n4lcn/XBqcHPSG6wFpEJmLlCLiT7mFDneX7BfRsmcne0cGwgLEgUxw8XgAaXT\r\nFzlJv0/f8sba1WSvy2UdsTKcw/cDCLCBZySh+rRqPbT/4yD0L27avPCPg2jS\r\n5aV7NzOMq+HaWAz5xVRZyO5ZUNLBvy/TvViP+PIIsYQUNxL8qoGf5a/C3q/g\r\nPU01Eu3OrnkmLSmpGoYdGWu88tNi+R8sUdmExh6MTb/HhnR6HmEX3g0XK43V\r\nlJXy3eSCkzPdqty4KoVa6NgutdOAqT3MqvESL7BMJOpdk2vXO2YOzJS+Rtcq\r\nMW4+MstfelYLX1xJdu23g0npA+8Hg6Z8a/+FuRvj3oBiDiiKAUh+XuQQhZFP\r\nla3yOqSXFnNazlwDQxynd+fnXLMYRVf9YH0=\r\n=cdiJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/touch-target":"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/segmented-button_14.0.0-canary.344d52823.0_1648579438277_0.14448539041074104","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/segmented-button","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eac1360fb19808f1fe78b83805adc3ac7b90ca82","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.4e372fb49.0.tgz","fileCount":54,"integrity":"sha512-z9dmATfEn8u9NfLefNdQaqADwpiVB+//yUGAu7mCiZPPyFt9Fr4Lv3q5bzaYhmGtT00r8LHb4YRUIhl9QXdoGA==","signatures":[{"sig":"MEUCIG2IF0bGlgq+xvAIzj0pf6Ph6BsxAv/pw3gIHS6ehjb+AiEApSFRLay7Cr10umIGdnjOPp8w4GdInz2mNXuWSTtIywM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkYQ/+Lku1hPJvTv9UALoBcz0oJ/NSI4xFz8xzClLmcBRIr0vgtG4P\r\ns3gz2TRxdBP1sOe00dOntxnkP0oDXJRLwd4SuHU0ml6iI9h7nh4gal+rE+mP\r\n4xjNbx2VXnEMQtX2wtoYKwgOfjSjNMiV2xo1iUlofEkJy43+D7CzS/Ry41KW\r\n8mm77Y4uqesgSvCTHPTKRj/IcKdNhrEGyK8swqBpQNj9rjFlOkv4SU+tRF1b\r\n/vt3377EY/otriC75CLNseJWJW9OoM/GfHLQoi//w/MC3xvsz8gxiojpfudW\r\n0OlhRcUVl9Y2+kqICIo0T8ZqmX8MTMqCY5IgewUlyCJjiuSuiIvyRY3/LWjI\r\n2AeHUM3Ops9WzPVPPPlDfp4cA/diK5qaZdjrYlB6y20ThCZZ9HJhw/TptL4P\r\np2GSCSFvYNCJsN/FszU3TiDOpXNNWjqmMC/jKl8HvSxnbEZ6rWKpkHIkbshx\r\noZj2q+eBU/5TPmT4y9Nz9nsgt2TlOSwzxRrN7ek/8MtSAhY8ystEqAJ12lmI\r\nxjGuafDbiOO09g+8ntA4yJ5NMCKyvrin+OGqbBHBf5Ya0phuKAqmpewhXui8\r\np2P5tpqQChn3YGnWi1owRZ9S8S64S2P7AFmW4UiVq+IoYvPQ7Pdu2O5+65+/\r\nKSlgNpF2I/SZxRgwF8mii+Q7bQqDyocDVlg=\r\n=eX2U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/touch-target":"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/segmented-button_14.0.0-canary.4e372fb49.0_1649363617755_0.7734717478800317","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"21cee0f9d26015043dd1eb3cd1d6b16fa1f44557","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3e30054fb.0.tgz","fileCount":54,"integrity":"sha512-q/LuyEOscirMsmDwXJ5wY4IvtYFVC/didlPi/mJx66vyqvoGhiQKpgDkwUpY+Q7Ex9L2OKlcAKWRhC8lAfb2iQ==","signatures":[{"sig":"MEYCIQD2iSSDQdmXRRe1AgENJfVB8fERnx8hwP1viblnAuUfEQIhAMPX4f2Yx01FRG76moyPL0G+5MCfKfU89EDDZuzJ5RgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbIQ/+PXR8o7Dshk8A8ET0ccg68kTrdnfIonSaeou462kFp5ORf76O\r\nZvGfUQE9Xm1b1qgOUhggExxMl6Hn3QtOlt4Q5++/47HXXTk48kCv7omNjBfG\r\nLhN1J7dpLBI4tnuLMsjS8o69Ip2xLl9LGEZ4EBNzxhowgwCqWJDPwZ0TUG3G\r\noFaU5rR6+Gf6PQQ0/5//6ZYF7IlAUY0W7175q0wN5mKMSVDZS/FD04xhwNz8\r\nXoNNcd3Z7HJSt8RZKRALu3H9TBRkYrek7h09LkeYeI7mnoOraxxV9dIupEJs\r\nXOmk+g89LpgG3HHWCU+uYGHGKy6RFYZ3jVXTH1peks+4LY67JFaxbVKmN/jL\r\n2wAUn6ONqGX7Yi2p4KEXJ+rchkpUfHwJVBFwzTBeqBfi8WxphyWpop9Uz4zu\r\nlkyAuxhmGDgvK+orSsqHDhcBmdFM5wguJYE337vZa2Z0BLEAFn5oRwzdn0BN\r\nYq6SfolrjngU72xUTvK9TMg0520QTN6DfJRvGtZuSl0WMrkRPb33pAJZt7AY\r\nf/zpuurGl80BwwBCmf+sFTIt3e3MDx6EuPBCIiL72IyKfkCF2IU8Zkl6PkRM\r\nSv4EgHshZPPbCn7o/RnHV9HWCGZ3pbkkdzgj0YfmdBTo6u2ky9gTzcEYcwCm\r\nF/UJ+iMLHJ1tJyHib+dHDe74u6JhvnPlA7k=\r\n=Ju7M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3e30054fb.0_1649888096707_0.2480768708526011","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/segmented-button","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"425f1b46f48f803c61c45610cae41e0db2755ad0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.8c4da223a.0.tgz","fileCount":54,"integrity":"sha512-uEcS3RpcWtGegBOsVUxYY1k22R49lJnQl9ufqTSK+2KyX9Kv4slIpBgWGhzAU/h55exTVpQlqkBGMEZ/9oJx/Q==","signatures":[{"sig":"MEUCIQCGB0IiLX8gmeHlmqZ2N1r1PO+Xw2XDwlC0dywlc5nrPwIgDgw6XPrTsoQsYyscdTYwopYeFeZeLar7LcaUm/hj3Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxKw//fMONNfMvygJ15bOHyQID6jnBocJfp+rXW0mNF8uJS/VpZ4fF\r\nWYfEaKPJOtyv8PLBjw9Ji4nOXF3XU59inbHyjPmv7DnIzP+srdQQQOoYBIvF\r\nyGvdSq8aRbwi6nQzYobjOtg78D5+WT7vy/rbU79uy9bI6YiTDAAX2SrjsnEF\r\n34slQxCVyJ3z+wt4/kn+IB/H1iWl+z2xqAVgBpV6JMCiZp0FipE5//o74Zu9\r\nj6MpWo0as+WwwC4RpQRA8pyC7M3Uiyk3kSHQ1KZxVBzJmnVLfsVpUqCPoUyg\r\n5N6cMfTKl1YdZ60unrb8GwSHWTa4idbINWHOE2pWmV5DwlGLlraLGQqa/CNc\r\nkItGh61SogSSGTK7zw5g2On2B1Z7jQBhou26ut/GKrIQGs5DPr2FbE/Igcfv\r\nXeZe3xAEMfpCAYW/0jQZKlB8kLUQ5OjdEM6hF6VifS54o7xNkSvWU/r+3k1A\r\nV0LW7j7omB3qro1MyZ0uHWBRDxUw623usvvQXtYmjc9LdGdpn97lfhIbqvIk\r\nSDt/fBTW8Xakuc9XpxOeWIU/may8eR6FdigQKwGwWYLBf+h04LUMIJewQoWq\r\n8mj08PtSEX3C11PSEBJicvEwxoH9Ilzvbk6S+c6VRYzWVctwFicERwdpOIMV\r\n1qMYNJNOqYsN7yd4L3uck28OiaoSFgezw40=\r\n=Hp5P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/touch-target":"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/segmented-button_14.0.0-canary.8c4da223a.0_1650381893827_0.00824349126067414","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/segmented-button","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"86cc1983bd5024a7e8f8445b5ad5a2aefbc1b9bd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.7de8965cc.0.tgz","fileCount":54,"integrity":"sha512-bNHRBtCYOU50ASMchyRYCFL5TeEfFTMw6J9Pu/sEpsaAkjnWouFaJS+rKcZ4JXhXqxQh6snJqIccR+qTL3uH+w==","signatures":[{"sig":"MEQCIAJxi403iZa1DSceV3RcUmjdfOiyuT3hwjqbzqpqSBqIAiBIXnUfingfXUxTZQN/2qPn/QWFDgo5nNuNYGyZSu+1kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTpxAAlDcf87kDGel/Rx48eMhm7mKG4p86CLQcjlFzmLwkSCEisKpO\r\nCtFKWvOACvzpksDh4G976wYQWZ5DcUk9A7HKEyH6X8gF+c0Ec/YSWS/pLcoF\r\nWsdIoiQCELvBmtnFwl4L3nweORvYUCbDC0c3iBA4xay84nhm39osZNY04/pT\r\nxohRq6k6r2inDhn3rrRCwynA7SPTfUVFWGVT7PvYjoJDM0MOy/wVxPWLTscG\r\nXdcoNqaRCFA51yqGEJ+ZeH/X1rcYCARusUT/wWiNpREtGP9ExPdME6p9dUiQ\r\n0nzAL/UjdOJc6zXSgPIA3ejMncVGyOJ9PU+L2Kb8xf5c/F6Kt+YWQIgZrgOG\r\nGFmkAT7sl3IIIymZThl1ftifWXsrojzqGTUJGBajkftjxwpss8DymsieE6cC\r\n7Dq4VVpVon8CurL8TbOT+UrgCpSoHqtqAWuBvKY9AiQBOIsmr1MxnJSCb9Wu\r\naK+barfJzVpOCWLBOlYejrewsFYr2Z9r9IObH7C5Sg/EiIU9sne2Io+3LkQ2\r\nkCYNCVERryhcNLhNxT1+SdsfJnfutjd4puubTOzNaYKEWv3oeeUXGZWiZela\r\nrqPuQTBI8fQiVFrK3pX+cxxgYL724PZAIf1EjZs1iuNEZhum9peaRDXO80+C\r\n67lG1F3IjDTnVW5e2tM61Hauw2jNPYQ8Ys0=\r\n=Gls3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/touch-target":"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/segmented-button_14.0.0-canary.7de8965cc.0_1650399844166_0.060877711412087976","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/segmented-button","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ca78781c7b6a002539d76daf8018f8aa36a026bd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.641ed0851.0.tgz","fileCount":54,"integrity":"sha512-G3YFMUSHyqlnBRM0tmbxoZZ7AZMm1lbKYvwyz4dBIGS/D8vYYBRxymaQNzZWwbvFY0gVON+PPJJ4Qhzlt2vfXg==","signatures":[{"sig":"MEYCIQDbc1csFTUt/OZ5nVkHp3Ksz70RZ7k3HEinoqNwC68LSAIhANjrNWwLFM+UpfuKOcpq0jKe9VYLfXsrPvR24OV0t1ic","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4HBAAkb7mDUC1vp79GpYGN9V0E6U/ETDqQy+z1sxVgnT/lXPlL0fH\r\nLFJxABfTTVQQ+5uuxTbhgx1ONhyjR+y6z+JC+3YCkbzQmsUdH3YTRXWcaCl+\r\nuA50dVWWJRRa79qbpP3sf/J2ypP9RbxdXzEs4vlMWJ3R377SmndiXC02SL/W\r\nOsPKgm1MmyYsYJzgL2dmzC2JKN0CWnA6/i7d2z36aWS5HxvOd2yyJiyWPaR1\r\nbvm/bFhnkHijUCk0W/LuYo6nVfp/j6JZGX2nGrKo+wQ6C7yojfLVHZgWU+GV\r\nHBRw0EjY3GuaHHLwivkNxHDjnlg8L5kACgTYojkRXkSoKEo+UtpPhfFGnRav\r\nmVVQKB5YyHqvPQ+JmLCzl0n2N6YoAQcv7vr9h1Negk/+/ysDrg58FUPIxLoP\r\nk7wN6l3YsU3xnIMqHkhcfR2eEYgG5rooZVnryEiQdynQ2gXs8KHKncFW2AE2\r\nOkpz6qrpQzRduzjhQpyqXSPo+kqS/bRuC9wVD7IyPKaobMlJefuzJip/dVht\r\nBEGAnsV4TMzTB6tXxkZ+4ohIjBNjENPgzunPGkPMNXcOvdjeEGDB3V+vYSjw\r\n0BVcEOYdvBvy1rkMwtVGmQnSh2Ejdh7paTYRsfvodUIh+U6XfQlLOUpCexjO\r\n062xRolFIbBb5BlI/7OppCYG/DGyLynp5hs=\r\n=WKmi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/touch-target":"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/segmented-button_14.0.0-canary.641ed0851.0_1650470784610_0.7013897285936774","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/segmented-button","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7b4de90aeafd1f3f2a6a6685b321ce776df8f4a5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.e88f83024.0.tgz","fileCount":54,"integrity":"sha512-Iwg25NXgQd9O8KhvGtoduzjJj9k70r149KNG0YEthRwcSCfZhYE2JGHMrk0ujETL5I242IXjsImRHTB/hmaO/Q==","signatures":[{"sig":"MEUCIQCR4N6JLUgMKcB7d+Y8eHyxMUvEF4eapHruvNM4A0PHDAIgCO7fxS+r9T92RuLIRFRtVgS2MsymkdQQeMfpJjf+xlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEdoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX0xAAi3rlKWnnrWMDJgZhsqxu1+GGsFUMHCuMpNRuFo5qMFx9EZIm\r\nfZ7EeRxlg3WnDb1QB/Nung1PlOS04pCLlvtRnmCPTM+517AeyDl9NKmxhHIX\r\nxJgrfvw2ccpkqO4bbZKV6oI/ZeuAhFJFphGSIHtTNamtPTEwvfdNsEq+486M\r\nA2vr3YJekUu+J8WzhbhqGMyjTtd1DKpbIYFft4WZxc0hYaLK2RRPZAdcR+Rw\r\n9u7gm9AKCP0nX91fi875mbpbzzba7YtzCaj7OQxAOgUmqNIuSTvHcVGJ/nff\r\nEtKvxQrvM3q9O5jKBK9m0QdKtFYGJGaP76ch5/Gh8jWqyKtw9MGFTOX1sXc3\r\nnfFKEhT075JAFCkMLXbnxI0cT4OcyuIUl/LPtAm2bkHKo4hW4zoFOykH8WCJ\r\nCcni8aY4h3x/33G5HAC7ntESaoR5xLCTrYuRY0vPWliDC8c/QBGeBG6pVAp0\r\nQIsDvUof1iPASV5HQ4YXb4hFInezbT9v6jIQb405Y5ZB4VW/VbVbmmsWbPW8\r\nQLwHiTYyu9/lypEmuzCOIFVq8QHRpP1Iej9PqAlqArQyYurc9Oz7NJiFSMHb\r\n4xxjaP1ZAY7bYl5bF+bgH5EF8+q6sdGL9nJPSWNfjsBKlg9Ocz8Fqp3x20ZM\r\nzBowjK+NyuJQSxXdqfLUCGqqbaDfF2Wz8qI=\r\n=Isep\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/touch-target":"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/segmented-button_14.0.0-canary.e88f83024.0_1650476904349_0.8430788398478581","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/segmented-button","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d1c19db73af84c18f72bf14b186cee146a26bdd4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.7321d6254.0.tgz","fileCount":54,"integrity":"sha512-24SXWQ9ncn8snNBrrT5zulqwu5ARaXccr5Zica2miKjL8JSr3gunrFQ9iHkIqG1pfsYtEtNldZ0UnsMDVzP1cA==","signatures":[{"sig":"MEYCIQCwzfP3p655jtWmsKynw5Y33izJzu1rRmnDrv+0tqDXEAIhANeYnhm9M+JIim7dJg7fpdO90NloiAJOQ8CcBmpWkryj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDNw//UkLqWTPoAEjumOdRjh1JBxVMnpBjOQOXJOyD9Fjyvmyek8Rw\r\n8RBHe6ozax3AqcUupwMvoQO7/oDy/BhEjtju1QzOzPayDDUY/uBKnL859Eti\r\nt9ENUq2zoq5JYR64F7NWZGSuKKu3TO+Y6xcz/OJ1+zWhpmMy8nJKsoPZa2HI\r\n32jPSkR3MZkWvOWqR5w515W/D0N6C7rZYzF2ZC7Sci7CQ0NbozjThovRfNq0\r\nFVveY9rb/NvZCSxQKK2zrbX1CXmFfwmi7e4qJcX1GArPP3lDWRlGsaJBy2Vd\r\nCRW86RV2iBNuVmq0EtwP2uAam7yp/+1UmnUmXstJEWnykKDNDMZ0ZqXq6j1Z\r\nmGuiWJqGSmmO6x082ko96FsXXg5OOoBh/XFKJbPixA3dJj6PrMXC6/7Pj0kH\r\nKmP9ez1Ib5F+Cvg079Q+upZ1KVneHfyYlmJ7kkXzqWqHx6w5tTdapVsyopXu\r\neOt8gSKcxsq7zHTU1tZA76UTgzJVzJ9ITmyqPVkwzG01jObEJcHBT/TKZPIm\r\neKJjPyqKHByOCPTgcX0P6jnMg/2y+THbyUsV72gBj1s+zZRDfOh8INpFcx4l\r\ntpkEByogpa8ZSNA090/SOq5Rm6plTCtxhPKFP3gETUU0GinBd8JO+uKNe6ev\r\nyiGMw5tDYJQ5LRBzg+OoAv4cuIhC0RDiR6Q=\r\n=egab\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/touch-target":"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/segmented-button_14.0.0-canary.7321d6254.0_1650485520762_0.0018373454069109396","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/segmented-button","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"91c93d4aa6aaa398a3c914c8c7f2101bef51e3cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.3ab956515.0.tgz","fileCount":54,"integrity":"sha512-5NrW/dgqTE16UyQ7htiFYOu4eHGNUwsNOVHyueeqiFQ7a5TObWddUi20UFmoWA2R49aOsORElNO6+5TTwHAnDw==","signatures":[{"sig":"MEUCIBP+E2+YktQ5Kxte7JRM2+iYZeXzHl4puYEIR1PifzbwAiEAzuPDOJ4m+2z+n2cVQL1TAbxSLOY/Fq6TvStVsr2IqO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5eg//a0E1jV5m2pPU7mE9wLH2LSipxDGb/aGsFn7rkB4GWTEwhD68\r\nPZQVver4TXxQ5hEq6AxctWQBw+w9L7uysFikYKTGa6UKH+M2ZfWJf98Nl2u9\r\nCiPPwW2tlC9FgQNK2zFXrULddCcpTO3AwNByI1AKhnYzy/PvGluuORtQo6Jp\r\ndlad/Tr7Ns2J+LtbdrZxYvpSPHSlItzg7yH2SVM3XZL+O9DGJe04MMZUAZrU\r\nks7IJ0MX70DbFV/oOITCUHYMXj84QOuHC0XqUD9hf/MgZc/EO6ODlC19wmk5\r\nShmZeh1V0dX8Hm8ZORTTnz3G/SgDOFJyFgPqQltjEaCsngQqS5Tw0pdfa8rU\r\n8ZDlze8bHhpRkXfHLYJv3cg9LxCInvGSUlpz+17FbybSTGqZKgLbFkpCi5as\r\nQI1whrsuQYOlew/qm2+a8YW17GatS6e+Ti3mgnJ81PPnzfqIIuoAkV0sMVtj\r\nJA5vs6es23FmJxdXQY3IXzVkIlvCnL/u31bppzSKJncQQCRTDkoUaGHP8U0o\r\nhOb8Qlkm/oR2ifPHWrtoha3aRWJpPwvktJzRgMtYvepVGmRHWWJkNh8v820R\r\nwT2y7Iv+SAXW5SrtJCyd751VVu/j+tSf7H6mDvYmB5TLp4oXhUAEqF11HlsM\r\nfXRAeFpweuhY7pNzyfOZK/8Mna4ag6O1wCg=\r\n=3yNU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/touch-target":"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/segmented-button_14.0.0-canary.3ab956515.0_1650898956009_0.6875328418172704","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/segmented-button","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"78db15deb134c1db54cb038e910b3eb3e2933ebc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0-canary.53b3cad2f.0.tgz","fileCount":54,"integrity":"sha512-6KmWTFJoYW92q95PokVsSN6BdDljv531atYV1/VqAALLbxBE/6Y2D5a8DAD3FotwHvjZ1jKSnbxoXeRh+QBQFw==","signatures":[{"sig":"MEYCIQCgRqX9rbeLjAMEkXSa/Eo+an9iMWZUpA1/RXeDW255kwIhAMDTr9vjsNh/Q7AFfbNAOwDCJeHjgjPZOCRmvvFyB1ND","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG2Q/8D2tQfWZQKY0jd6q7/BMqT798QU0sLrgL1pnaTyHb+NVVQHtR\r\nPyudWMHW9iPt9agDQbYeuEE0IhTc9RYD1Pq9HbozS1kXxeqks6dCU3dkBcMs\r\nBJCgb8bEYx6AoPbAArOYFfnFyBZXub24/0w+sXuXmajPREOAxKfmnjbVBERb\r\nmbJw+m6a9Z+PvW0xt5WtZBzSNp6+HU8mwIuYwZe+0TuejtZvvOZtzozUT7ce\r\nFFQEXjb7IoOWTu2w7RfhyDkNLM77hx2GEs8F3sqvH3bPblu1nsukZyvrE6qj\r\nmZpRZ0QDw4QBQaileZaBPSDTmMEoVeFTvaXobEa494NficZKVtyd/me9nKX9\r\n02sH+f5CtiV+Yu81Yyx9/2aG1Wd3p47bsI7S5lSo+Q1/PckHj15FHYS41nxs\r\nB8njNKIO4hak6hGcIJZ59kQDcTP1TZfbzsdTocVBZLFOggywAwWUvkvxPqZE\r\na/xhBJpvuQjxiQNF4Vxd2wGzNyZ3seTPHt4lCqP41gVdqH5BNDYf4h6QoG1H\r\nMOwaVqDTgGFFb82Cn1hxtuVU8m6+UU6RBOGzN02JOh+Q2mfoga5HGUsEx5rM\r\nv4vF2NFzjLgMMqGsg/YAYJ4B4HojZZ5HbL5blqoxwWvRo08v5J+Xkx0pv9tG\r\nIdPZ/DctcB4X0eLNdu5P+34HrKcgDWLetIA=\r\n=NVVw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/touch-target":"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/segmented-button_14.0.0-canary.53b3cad2f.0_1651063564286_0.35620363440154357","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/segmented-button","version":"14.0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"607140faa6ede2690624ffe8a3e4a25c8e1c8d02","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-14.0.0.tgz","fileCount":53,"integrity":"sha512-6es7PPNX3T3h7bOLyb8L38hMoTXqBs5XX8XCKycKZG2Dm4stac/yYMKKO/q3MOn36t37s+JAVTjyRB8HnJu5Gg==","signatures":[{"sig":"MEYCIQCQSIW8aeo2Swq8gc7lRP6tO5kMM4x4G7a0N7Hb3e+ICwIhALXq5xlo7YGFRpyG/2OC9dYoioGyKyv9AcrY49McOiNk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTShAAnzsoIJeYbpq0Mz7I+F6Gtxi8rNbyU3qDbtPb+PmnksfFiNbU\r\nrFtEPF3MJWUr491oLNOOtR09jrpvyjs7fBTI7QqUWJ3sr1ZTsucYn7yH7WPU\r\nIpYGbl9s5pgJheyNf3dtdjwU+Ffo4LC9o/zzQVbq5waIzzHdupUlNGMpJVLf\r\nDhLgAfAPhFIxfJgTavucdoDQeQJ4ty44qcZLm88bfT7W6A2ZHze4V/dWRfF3\r\nZ+U57Ra2ETvjAhp9Y0dEoYceOpKOdkHnrG8h0HPkQwwgZPkA8ABTgbuBVxbH\r\nWZJjX4EmZdjenvUtDrR1shcxQGJf8l1sWBMjsaZfNoMeLYsoUpYhMdJAuLP8\r\nNl5UYfa7FyGATMWi1mq5KAHfefbE2+PQ9R5IyQSbEwERyphQu3YXnYURQQus\r\nYyYeSZ1SMnJlmZSCw/O8PZBe3luBuFRA5idwjyrsOZlSoR7KwoFh/tVUkbCZ\r\nbFFzhfbZoesqhNmTf9uFUhjnOrRpIZ2k7PKYFQi2fA8NJNiurHIAgzmbNiSg\r\nTh4ld1WFm79y+m3MTo8CQpoVmM2LcRljYbJcMGQ8L0aVejPsZvE6LWKhNoQt\r\nwMCP5DbB28ogoT4mrmkWwtKjDtb9IaUV5j81lN6srYV+YUgDZ1W62+N0Vbv/\r\nIWL2H2DezyHAjoJ6Hwhj7GEMSA8tytjjXLM=\r\n=C/G3\r\n-----END PGP SIGNATURE-----\r\n"},"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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/elevation":"^14.0.0","@material/typography":"^14.0.0","@material/touch-target":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/segmented-button_14.0.0_1651165001640_0.2879545319413075","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"043a8880bb9252a5a565d75b4e300d42da194604","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.432c815e5.0.tgz","fileCount":54,"integrity":"sha512-LMHoRIWaXlGFwHrIvVwo5yJ/OZEuUn2eoabXhtMzlaB0OGmRgiLqAb5l+x0GkJWA2FbB19I88e6QsLcbmI/Emw==","signatures":[{"sig":"MEUCIQDuX9GwHg7A7pOA5swPU4Ev6S6DorPjQXHEZgKx3a45dQIgNcLDLzUvIZ93zfRUepgAw2dIPWWpBzcI1+nvekNiAT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNoA/8DN+ga+3BVYFmZctMshH3j7TGn294ebZs3oqTgZLNcRSzUcSP\r\n9S3UTjCWieKAl50K0emixHpW+tqtlaQTqJirLy6Y7TPxmMrWG7cQL9wIeJXV\r\nJ2BBj16RtVz0Pzv0j3bYRsQGOIW+nqQpYPtQ/cD0UYSzRSIDWaQtIZMB9Nzc\r\nM7Z2AsNlkvsJ5TyAdY0lHIQHqmydGtTEWktyBxktwdedBV8zfWbqxaxDzkhB\r\np51R/mvdv/OPAQdgzOqMzvtv/6ZcLe+WrUoDjJZLQtFgNXGpWyXG5wN3Yiz6\r\naymHgMUOOjt1tGlHTA9kIN2yCy0WLdfQV1az7PTbzzYUgFDfh9BCpNz6TZfc\r\nl8M3d7oAygc28gqEqdWwjL1uruzlw0DfMNXFmU3f9knwyJrnk0q4D3lzgDTR\r\nZ9Gu74p+bk7FSHW9y9jG8NfrLAsaBwXXjloa+VbRUtG3DuHRHAdRGrs2mSTE\r\no0Os9/fM8atww9Xwo7g4Er0eed8gN3p5yDSexupr87gkNlXyFC4M1x2qfITs\r\nh7ZRsKYDrfXXMTf5jrn8pkqOiGdnUkSC8EcvOq7JGrQAJFGG3vJ2+WYG378L\r\niE/t0so38ndQ1DuGaYwG2TaMGTdIuvzUDzIwoKM8g9gVCwQVuw3oP9wAUcdI\r\nFRcoUGX0tG/Bl27CYwhhi3nvcfbR7rL6OGg=\r\n=1XMq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.432c815e5.0_1651165064076_0.3299809584004967","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"11e001e02673ee60150cf5ae89e5191f34fa0b5c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a0f01f669.0.tgz","fileCount":54,"integrity":"sha512-pIWmFdZFk3eZyeqhDI1pEvnhlkje2AaKxcwherzfTlE09sFQqr0FagseUpPLQyirZEOaEkM8mAaKDx2yU2k9VA==","signatures":[{"sig":"MEQCIACZYlMS2W65lwE0SLcpCfX+cacWGDTwSctIJg6OQBkCAiB9XH19gLS2BhzeNnN0M/LsYIJrJ8TFQzPIJuzL2PJi4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp20Q/9F5Zh5j3JWXYJF1rQA3pki+ka2XLKsvMLRm4ewA0ihwax8jrx\r\n/D7f/n7YqKahbEs/aWcd0/IQ8kpzdxU/ItG519ohNetQ0TEt5LnjzABL2hpA\r\nTlejwIgdtLuL1E01Zz9SktDxs61MZSP2KVo1uV0MNK83rnXq/fZD2KW/7obN\r\n46r+9MelXCTdjozdr7Yn4edXNFNcjpP4dndB5a6ujVEeA4karUCCixbQvzFB\r\nI8iWH1WVrX4WffFRW/T6CRTZ6g4aG2HQm3esO99W4FumiHZ2OvROcTXxILNg\r\nCGRvnKxVJERZxLyw3Yple3wT2CcTvTjfIlDIyYw3cM1Ji1LRqHzUmIlZiyFj\r\nn98xvIMa+c87lSUPGCnvzX181KwQEiZ2WW95btlebYd1fMBKB3gJ9pzGEFGB\r\nnOaEF0EHurxf05kI+7ZTHhvIhyYacjeEI/i6RQswKUyKPH+L2TNdwxR+9LWT\r\nt05wqC4DH9MlHsSA22DZg61q5v6xaFukwGylAMQHwJ4yBOr8WWAxPZ3+0ndN\r\nR0nnk1m7HZZjkjjzQmNtHb2Gjxe/lSeRfHHLmJKReiiyvSrkvcXORMxkfobH\r\nZN9HQkrz8x+0fanT96SR4andNKuQ5zz76Kbf9p4g99mC2GRcfR8cQe/yigHQ\r\nMPSpobhfxbbCWmY80fUh+lHXjAvcUUktCg0=\r\n=Ujmn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a0f01f669.0_1651868122857_0.1457482647010544","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8da035c590400c3fa22c1c1d710cf3279b55c19","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.276cb39a4.0.tgz","fileCount":54,"integrity":"sha512-gx0YaEciMASyEtKiy6mgeMKU9E05Y5rl+t8imdpxhu0yGGRtgXGDqR/GkG/s8t7YlTbmJ1hCGXCH+Lbcpq4EkQ==","signatures":[{"sig":"MEUCICA/DVrwDXbh9jq6okLIuEMtz630xUUV8wn630EPE0PGAiEA//IqPXp2CfV/ok05XD2AwgM/QCPmtUilDGAH+ViLz5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoakg/9EAP22vAeFPLGt2qGZF7i8zTINMXkjqmMnskb8K9wMLZ8l2zZ\r\nlUadstidNu+c9GregyAmWBUqNJ4k7OqJvb/ahCg567Y9bvN3e4f4/qHFdt1l\r\ncbZAxH/CTkMjJy4qrJMhePzYGXkRbofvCO21e1fv0f2bxvI4F1EaZXT7UlHj\r\nhboqmsXKz6Lvm5qi/IWTMbP4wcajuFZYFXgqogy9rsHObEm8DviIIANJPNYs\r\nc/sKQkMWuCh+qDXmqh5qaJTSOFJHh4iTLS9v/qcAvwqkvIHv2Ahms06kNvMn\r\n+GMxPuO2idSMJVaH6ocW2ksoCG6yUAUCs50mIbJVIvc1Se2RuAPSIoBqV0iX\r\nPiHYo2Ocu4uoVdoj4pejbE8Y8g1sAzZPNwZuvSenFpyXNmrrZ3gdYSfU5qpS\r\nZzWq7QblH2Ih3eGhv4meHomn1Tpw9GJN8BZKbVa95qClHjCBidU+76k5CUH6\r\nMPAl4I/NN3v1cuAC4jpyPccj8hxqTy1Bc4LUip+5VRtyFjektJlqwAxPSWwo\r\nzKK7hMe8IOU9geJyoQan/gXHM5W9iIbV6WAxgvLPKmK/iqG5jvsScoYdoQEy\r\nas57mhIK9fVqW49Uz2/xeUZxw+/o4exSa8STMxJUGlp9D8WUyvVg6Y2+S+Xz\r\nBzy6FsTkCFtrnOunI8pJ5byxuXHRWLPNqc8=\r\n=1PXC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.276cb39a4.0_1651872734584_0.04561125707194447","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f1e08278ceecd5b030bb6ba3c94db13b20f3feac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4fe98ed70.0.tgz","fileCount":54,"integrity":"sha512-N+VeDEKBgO/EvW7W2nNcN8CVN+DY/Y+uKRv734xzU6XGarHx+OmRRjK9HzwOhgRgWDshMv/CqO0hxsaf08R2Rw==","signatures":[{"sig":"MEYCIQCcJogmiiEomN1WrZV1jW8qIGw5e+2c9m6MY1tfGtjF6AIhAK6UCtm5LgzNO6VhVBFobuPEZRehBK+A/EKcgnX/bRwZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyVBAAi4tEUxkMaWWncNw2o2RBWyOng1fbIYr9BgT7g3fC/9ULucMw\r\n+0nNDG2TdhERGHIUwXHZXrF7EcPqw08AMOZ8o8L3yj4GgS3SW1Fr8KKQndk5\r\nCsjdHPVnHuJDq+MiqvdAwa2jicKGddv2tsOgWcn/1jKw2YcMmGYio4oAuDgd\r\n60Mx7IKDhtib8pD4a0CwEuoSxcZIU/MElrOqYFvLXilqtkwg+SASlQ4FuR04\r\nyMalOogZfuJslAzkQGg/L7zu3GDeOTKFffaJsldo0YD+x541+1x0ob5EaDih\r\n1JIBa4yOxnNw+Iebz6e8ZgCsMqdUbn1euhK5lzekiLnw36Qf+Cuim4OOYHp3\r\nSNwlGW+0Mym8mAGEj8UPlIMU7WPOKKCz6Mak6PspkXDbQerQZ8uTB7hIO40D\r\nekMvFB1qwWwRbaGqUPQGvsu7JiR8yfHPsWMsEML6wg3CC/HBIE+UPw1eHvOA\r\no3kgh5UlZmeTeXSG6iRaOHrYLIepaTVF7K0c5bpA+55Cy8PjgUqLps73cvk7\r\nHime9fKK5/SLtI9nL4pZlVX+ykmXQb0D9/KwwylfRBNZUjb69PKZN3F9ZgBl\r\nOmU9RYOdWZTR/CF/4bB+b9FcpdIOAP19Hzfd+35rr3xw6IES1zipgTRMBsD6\r\nJzvv+/S3FANXKCMx1RTNZ1ZcxgBpOxT9O/w=\r\n=xH6Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4fe98ed70.0_1651874204816_0.4557492458226806","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6c6d603315776ed0c01e15f2e8c88b0b935355fa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.58b130a3d.0.tgz","fileCount":54,"integrity":"sha512-HBSdwAg6h7uvWjJy7cQ6xmHjgKO42aXA/Cz3JEia1xDUCLOu8AT2tD9rdGYuiJYT3/fzc9SG3TRSWKKV3jklNw==","signatures":[{"sig":"MEUCIQCOXUXjvVVU/qxsL6RBOnLZLQcH7EyJnwZthzYOo7MtrAIgELQYx7/JLOr/fdZXILcq8qEQgJ98owu3q8Dkh4sgp/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZomACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9OhAAhng/s+BExT4IG4loS1R5IxaW9MNfMeMHzbyIyykpR574xzrr\r\nxcijIDFZTY3DeRQbm9PCvOUglHs0yAcGHFS4smdgH2lCjJP/8IzZNs+we++2\r\nBmNEqmO2mXy7DC5+qRlCpUnRBcjiGnQ6zfx2kny5fQGxxIobd0mZTm1UhCar\r\nvbsQhGSUFBEgBKSxqNUUQ3VAgNam8fpu5N63QKu+7sOPFxyaQ/+IfYL+I9Yv\r\nRhEt6h25IFpc9jIWi6norFrGq4IzP3fXK7QfcPq6Nc9uSASojPhMGoKEajKK\r\nuXINo2UtAqBJZv7+vclnH6eZUBSdTO4efR+GVAgLCSXBKz6q9RA4M9qXrFhK\r\nES4TMdjxU9YwYXWPW12pFWSJa27v1YdQ0TzISNylvSLMKELQuzcjxfBTeRNh\r\nSawFKf9WY6lqMqPJXo9k8pYr6Xi/KkOsFfU3Or1iKqvDeXHG48GiTGsaFhAl\r\nyPaXL8nnZvRbAX7s/Jko42qs/fSR0DET/S/Nm7Cwlh5kmrWHwdcb7qk7v8qC\r\n5q7Ig71B13ZWgXEFm3jMSgg4y1+kKR3rb3OIiMfLqMB0UIj6xdqqZOt7pD80\r\nSW1kVw1kyEX4qbNea+cdNWtbBQ/9DKGz8Fm6+d6pGUHAOXbicueJmEnxrasl\r\nJk8TVWpij7mcuitOg5GZlNH54S1GwPQlkv4=\r\n=ZvgD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.58b130a3d.0_1651874342446_0.24872314257098016","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e4eac3043413262c6c944563ef7229f7b05748a9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ae278a2fe.0.tgz","fileCount":54,"integrity":"sha512-y3FNvT7mQ09WsSebEFlsFZVrLxo+9SnHN+Dcb7VC+UPUszJgdmTEB1PveDGBOSMeE0BMbKz5SwLAuEkfAVjpvg==","signatures":[{"sig":"MEUCIQDa6WJZXlabRQ47SX4z0Cp52cPHvGQkKXF8CaxcoCq6PQIgdLkutUfILTvRyYI43+Mo0VGO/GOEz+loSTeO6tRACMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/6g/+Joloq1kVy8qoDsQiv/PwhAk1QjpZtQZebWY42txHo4H47TFJ\r\nqv8YpQFwbEy4Kkz0Y5vfbe8d+G31WFIufo0tWRuhQJG2JPxEVfu/DxJmAkne\r\n2bjOQH90MAf14LSOG4q2/EAnG4zrvlFNmKvhO3gNM1FKvQMLTLF3Lm4Q1DVE\r\nEE2tJS2/w7I5cCDfRGhj6qLVNMmc74LQNxSSiu7k+TYyJ8gLHQCOwYyYmUVJ\r\nfIvXQZUvHQOIXdTbnu/3+NKvaqxBXrVAFLNZOAfvQRU7lBTRBfvqVTqCygEB\r\nAC39d40U4KXF4Ugr/tledzaGaY3pdgJafFbd8ssKgbBn2ZFEdsACHS/VJ3aJ\r\nLLeCCXNcehMbQtpn+NzMot850+Wrk225N5uHDhPbIpaqr6Ukam8ppCqG+/Gk\r\nzhLr9juvS86THsc4O0+GAXde25yIxDrTsECiU07+rXCbmNtZ7iDO71CSzFsS\r\n2SqpbY5ojHvk0PT3SKHh+Hc8Itcp/viGB03AqWcE14l2k/qXeqoBThXaCS8o\r\nST/sKxcIiktCoZrcHYvcthGRisOZ2OY9rgpp+g8wFR07IfveTdesVbADoPJO\r\n+6IFO/mSNuOyEtmVDaQbVeDhBiYK35uUjz9wvRDGtsFwbWT5VBuRHwk7rnGa\r\n3xw6ewZqJIJ6gapVGgBMH9ZbehAjG7hGGk0=\r\n=CQ/E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ae278a2fe.0_1652109934864_0.2766728471191082","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"61f047a6b331930e6b21de8fa84fc041322a8fdb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":54,"integrity":"sha512-xTO7bMBbUf4DJCyxyQll3qWAc4BFlQEyPavnEGtZ6IZFcmha+lXw/15boCxuuNMfn60Ro3/qCFmkMpz4tzcDdw==","signatures":[{"sig":"MEYCIQDwv4tLmzf/mihDCuW3c7LyYCo8ayVTvtwoD8PUcxH51gIhAL+bP89fJshalJ9wPGVTVyRgSOvEnpfr+pUM49GHrZef","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyI/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokwBAAooaSN8igQ70Z6F4hsOCaBG2OtnC/V0xa7Y8L6eoLbHgVrnrq\r\nblHacTBTfN1Z+L81vwFtrHTFssR6T9LLIjtgE9WmUVV8HQWRyWesVlhJW1h6\r\nApqr1Uw0930w0aj38v0GqTw/CZ+yZoG+imXrxMaqqP172GslvUhwsPkE0j/b\r\n8l9CVaVUmjm4JF8zEJjbHrpaBhrfW0PdXaTGkUiEakxTei3zDeXf9T+WfoDx\r\nfoNCzvKT58ls7blEFYJiDbNaPi+ZAH7Pd14bqDyJU7P/3rFDjgnlZPhER487\r\nyi1ykRyixy/5jGyO6UhUKNLK+9n9eAEdy7W7XUxglnC0JqBsl2yZsQtImdob\r\nAmjOcKABgQtTE3IumI3YLiyL96/m24djb/+saTDolDaAGYMhEnP2IbcnxgU0\r\n8rzoA6J59//MycBEi3zLO47wGmZf3tNyASA5npViBn0EBlw/FAhUj34LIRJR\r\nWwY9b+gKVrdtbBC08O0Oj2UX/DUyNZXoG7/mO7sccerVEZ6xsFGsVEhU+56w\r\nh0rWQWNENaBVuzo8V/kIIDW4N1Hj93l9IJ7K9e6RNhPKEwb3ctg5Szw+Aorb\r\nD5WV594JFVdkUX/hkUo6t84Omv+vsUA4w7F/gSKQs9OrIevK72MplAEhW25l\r\n42aSQK7kRIswEHl2HIVa3RM38HlExswNP64=\r\n=5jDK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bebf5bfdf.0_1652236863693_0.16579978663148975","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"497bca10fe9bbea1659d77e26721707ea99c3343","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e6072cd6a.0.tgz","fileCount":54,"integrity":"sha512-1BDTUhBTnCiOZ4+NCR+MuSZBrhtj5TryI8H2ykRLCoLmcItpiry08p0EaauZpFNSRg5w3x2UH3dqtYX4sBgtTg==","signatures":[{"sig":"MEUCIQD6K4JhDf6CKhsC/IpJcN97uNaT5N3qwScgfxA4ngRIwQIgKRvBkmGcIIuwtogChmS2HKcIVnfOJnsyhharRx1/scM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBo/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRww/8DNl6BWWFkA195vE0K8u7p9vwBuBkFRSg6eCtDd1KUUaGKfnI\r\nlD+M1aui6M7oZhiCmEdsY/4qeaDV+7jWGc04eULrBbNVmOQ8IyYstEwRZOoR\r\ngWuIjWGNUUe2qGwuw9apY+DrAZXT30YqGbTBVTkNRwGU9pEQajEOFCrG3lHV\r\nrNqbucZTo9ideF90lulqA4bIRiUh6L7V7Af6vtlb7a9R9Siy+MdkF3w+WzGL\r\ndKB3QX/YFIVzjU4MJGvjv8RjHyJ1w2+TKjkHi9mO8rC9Ce2lNE+MrdBZQyxP\r\nwGzP9vZ3VYvWrXF2cyzM8hKEbu/AQalbivx3MS08zeO6n0F0X1MByzv4j166\r\nu5GRyf7AkgVu82aIzInbYOHgV0A+RGH8xublED6T/1NjNNiC58UCTKt5sDQW\r\nRQAMAJIt7RSp8icsvGL/WscYQVpKvhcM9tnvoRnpLKtZvKiWyQupsb1pC1aZ\r\ng7i882GipOOC/s3SauL+LdLh+sZ5vpu+chobMu7FdjNo6wCKbuD02kdL3u2r\r\no1E+PyKBmxFcMvro8utNKEIUAopRy3bGYgc+gfKfknC0y8TgklC8YfYIthA2\r\nYSWzRPKvbk/IGEt+YKB+/aED3qnolnAQ5TAEM/FM8XRXI2lMJy/CQg3N5Kxc\r\no+VWKM5HXoifdK4l5gnXSr6XGS9BzvqgMQQ=\r\n=dAvo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e6072cd6a.0_1652300351353_0.0457974355177182","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"947a2f67518845dc845159b3f58c5c9a7944f50a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5b40eb988.0.tgz","fileCount":54,"integrity":"sha512-T0nDqMH5ALRIV+6dURUg8pXMBD/yDw0bMwxC4s02ouQoCmmUgbxz8UIYZ4nYjAbDh4CSUTXHvBJjhH+LNnmg3Q==","signatures":[{"sig":"MEYCIQDyUqeyDKOLu81UGje5EK0mVPf92iwDx2VwFPj6irBqvgIhAJADN8UB4PO0Etwphpv3SxPPXkQ/YVqQTTkB56Ar0hON","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHSpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkXw/8DhXQtCwO9zDx6lHK+NpcP3NdIVeuK3rhOr8su1pmmYL+/v1W\r\nOLtYcsCt3Pp4zTtjgvoJFgvS86YJA1QJ5Pcjab7sG1vL9r8mSmbURcR1JZcn\r\nWT7e5i05Jkggl2wqjno+a1R6EO+tMqTLVPEYtroHvJgwMCgqo1eMYfIxGGnd\r\nRxoNBSY2wtzFtE78UZCzFkLgYU9cUjgHYkgGbphA460eTVho2mOCGwq9f1ER\r\nh6pa3p/Yyyp4n0cOfhmDKtgtLbqnNwb95R3T0oMgrUbj8rYMisI7P0OZnX8V\r\nYk2mtB1PCZfkdtvk+BuL7/9SiLoRZjFTbT3YouiNjqL0OZ/ek3BwD+KVQD25\r\nfJ/Rhop69WFGyEJwRVsnMlrkBZ0CROjcWvvF8QhDxYsSl5cJRlmGNMBXRRU5\r\n24E2gjiTEcOTZZbCVBvcFi3K0D+Q39wPao+BsKQ3tFKKtBkcmunqJIlcpNYC\r\nE0IHTPwKJvlMNYI++ywAVHlOFZWUfNLZlCrMp39ijLjbhV5VeR7LNqanK9tO\r\nROTBf/vfZ4c8/MPwm7bNchABex2b/o7RqzJmoKlqGPSxwYosuyXwGgnSbpkS\r\nC8qKlg7zFaTH5JyRNhSIeJYcxJ/LFpN144ebA48Wfw4DTZNpDLT0cmrqW7MK\r\nwKRUBW1xYElR9zB2LwfzKKP5Qv79wwzpTSY=\r\n=jows\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5b40eb988.0_1652323497193_0.6554063013888141","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"889481919b962f60c9b68ac3fb1c340f2fb2504d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6a61d62f6.0.tgz","fileCount":54,"integrity":"sha512-SQR5UNm7jEmZTi8PEOE8GE3gglijU3VBAjoodLvFALczwhSY1MCN/Zg+By7MKxi4sL+Zpu1IPP6MdD4uwVGFKQ==","signatures":[{"sig":"MEYCIQCq0qIluf9G7FkB6AnK28JnqMhIwDVP+bGK5cFqjiuRVwIhANBrWdKqwYxYI9Cp31do5IFdEvBBrT1q/lJDVorrIDpM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Cg//SF4QwSt/2WamaVHr7aVsS1OMN8bz1w3aGOLdFwjXDwFcydrr\r\nyLWnsswtYzBnVj2Isr3kQrNOL66cIgBFhIgtJTMqV5uECGCLSwbfYr0WP4ip\r\nLvYgMa0FtiK6wXSC43R4vMau6cI4a+ZMdhfDIB0goYsTXLEnz8597B8BcyKI\r\n2j3lMyq+HLmTTxrSS0M/3ZSJ8VTojFmSC5v95GZZM98uwpyZBqCTQHToOCYC\r\nXoBgsUS7g9NqVLXbfuk1mada9khAym/EI6wIki3N3mbwGfnGpBEOYxOUTQ3v\r\nai3WmyugRXbsoO75jfxXQD9qHhejJumvCQb01XszbX8DSQGNiyicdnBhcsJk\r\nSZRRU6WC1e2bOqB96LZ1ykBGhlUd72+J1IgRjAtUXYDl8EbynYpIHAY5WUrm\r\neQm41apl8UWmhOKsNLXk3BfmczWmx5r91MRonB96E+9LeJ9OuuV/S11luryj\r\n1oLy6zem7n64sMwgNsLVhp82LiIZ9fka3ggp1kMInkxNFTAkPQ4krYKC6PiB\r\nsVROnEVfHX1HJPKtTfVzhWaB9yA/cGgMu3Nnm18bTwKa+8jcAitTMdnEZHEd\r\nE6Dc1RZSpJia5s1V7i08b+OyEgv6uiaiPG5RucM+FdUd+1lDEsm1uh775Auw\r\nYvUaQ85AIXXP9WdDx6XABXTNox63lKgKcCs=\r\n=rRLP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6a61d62f6.0_1652387257551_0.21116059896721473","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/segmented-button","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4b0fed2b1a21433401b60263e840b3c9fac32dba","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.05930a453.0.tgz","fileCount":54,"integrity":"sha512-/6p7PvarHlJdhxb9omykTfdEdSpH97U5Miyey65diP5gqTcuEGY0wbeD5g9D6fqRBdGUXxrqQNj8vP2nNi4x+w==","signatures":[{"sig":"MEUCIAtgtyGAqkaOFWBrZ52r1EZJbzA297IMUAELzabwpwOfAiEA34r9DqgZIMY03fmJUOpQdijbNsvDoAQSYq8BsON9PRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqfrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp95w/+Ib8CEstOzcjUdr6w8JG86j1REOSEe471XraWQOLuQBL+QeBx\r\nUtDVWq0deIvXpcxXieTEU78WvUSQctRxrPKHq6SEokN7+WiQplFa6RU/rbZ3\r\n0W2DVv/IHWnxx/NpP8hSh21ftISsgLiY2KCysdxhK0C5//EQ0lk8KlP6KTSK\r\nHF8HHRMEhIJQaa5GlpKOblzyXaj9P6V3ZpEjiQeycs1Vpl/iauondgZSSfMv\r\nJZE2LkAkzq7wdxxfVDMCGmltQJyctZn6SONQXGVWdBIdmIAiOAoUA6quCoq+\r\nALsMs8qjPiDMBwskAYvyyFqwT2GLO66qx9lzxiI0/oJAVteSeygxDLF2geWb\r\nsnhrWqocKDkwRTjZ4pTELymmTiELCnMegsDlcdas6wW9W/BLFcwGL722vgh9\r\nIllPldXrZL/5lY+ShTKP3S49qvGV4BkwXRmg/Xc9rDl+rUzenHqaalTlGGnG\r\n0SkX4DLLazwBNm22S8cBx/1IE/f7wUl2f53sSG20aSIIm7EUmT1y0hU5saw0\r\nV4hkF+6K4FqUAbkxvSbmZHOH8y5h8buRGfLAwSRfI5C5G5gr/5Lnox9vhTpp\r\nLOe9rERplXiAVV2TZlck76Z0UTfsHbgIL8HKjrXkkAJv0yfK2Er2MWVN6veN\r\nZ+McscJTZAnqzqrvMmcecYC8mX0+J2gKs6o=\r\n=kkzf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/touch-target":"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/segmented-button_15.0.0-canary.05930a453.0_1652467691776_0.9907906315405557","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6cbb42c8ed7c5f3aed24ef67e64e900638280f9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":54,"integrity":"sha512-e7xtVWsTzg8eSQB40abqo8YzBjVVusS69Kaj+HXt/vJClmrSJfTID78PdzTphQ1UFaxFq1su39i3iYK+wqGlcQ==","signatures":[{"sig":"MEUCIGjDF+FeeBBB4WF0V3tpMnymA+TlP+rmCA3JXO49PnjsAiEA70uMpwlveMVya/Zv/iUqxnXgrcx4a0D0UU1BuSbBhRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdOg/+KS4/hBrjXGyenhWXgoTaHeS5DhaRdODXoUWcRSiYgkNKediU\r\n8zqtCxUK7lIjpl3mX8E5zuUjnjv6G4Bp6A99J5keXQ+K5G/9YQp0PocsvQ0m\r\nR25WhryD7xah7H/XousQA/CoB/opIvj1Du/VaatjXIdSlFjcF97Wu7/3o/XX\r\njKQufviUsqpSpB+yG3gQCREMP9RrU/ATteRb/7JLUO6hMi2/yK8T/QWGwn0W\r\nKQVNZR7Da1cIBFrDe7pK04kI3Jg6XOA9k0PUW6pkD2IyoObsSjVgYaTZpBlC\r\nC9IcAmJQS5edxWk1fMZT3rIq3QMn+KlUeg4KX95uLYlFyZpMjjaztrw1BKBT\r\nHiiNtmnQFYmDix6tdtkPtxm9VgmK3b9wqu3HuwPW2NQdi52Q+Y+lw+9HUnc/\r\nBV0Rulqz6+TWZ3CjN52OfA6yvFT3x8LC4QSMUJTl0GPxWv5SmHXpiDS/VopA\r\nINgdGm1YvlK7nThRzJzWYr2SyC+4EoMmaYbAT4whkIFACV8i8H82cuCElbap\r\nCnuPAWhsPguD0xNmH0izHU76HDcjUqZSiX/nj+rgSXJLhi/B/Z4CXDNv4JVs\r\nGS033eqvp6TCdm5pmLysAsW63/FYHaWz4IWp5yF0OiEFfISqpEHTEK5oMWug\r\n2V0qT/VWjpfW4r4TW2cdvT4LZnuGwxq4lrw=\r\n=Pkib\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c0a11ef0d.0_1652911303792_0.560489173428883","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e6a21928b958a545f3f7e1d8b7ff7cd6c3b0631","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2f9b268c0.0.tgz","fileCount":54,"integrity":"sha512-WVyh4k2LFKvi3U066Gr4rSjJ4/9foO4VphO9z7rQYGdgsmqHgiBWroawdb+ZhQoMMuvJML1yWy4w67HzpB9Iaw==","signatures":[{"sig":"MEQCICbt42MEixr2oL+WO6RdXvh2ge+5dtKT//WnjMVUrilDAiA2snNjTFCRnilUiv+QajTXs4OLS9DnmG9MU0+B0n1kNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxLQ//R410FACBsAJneaDktYaFO3VSn7fHY1rOGNJ94X1EqlBJUD1y\r\nUckt34CQ55ryS2hJ6fYm8mkXLZkeNSaU8aH8xXNmfDF3zISufKfN81azuwYE\r\nx2jg9s1pC6UyXNPWYTJnVtH9FT6OIuJq2TfzMO26z7yvpEl6TN1vHaPfBRyF\r\n8CcC5pd+YQqsalPk/5Xr9RrJzC0dfEWOF4kMkK6Ou1M7VX09L4Wdqd9/w6kU\r\nLYcgDLsmL+mCQG//MYW4zZFvhozyZZTBWc4d+DICukxnre3umCR+6Hr0G9Ku\r\n5i007FTU/DZodgb1xXKK7lgGmFOP6U+Oo7nViqdG3xP2FNbwl4g2FNWbK2H1\r\nLDxCmzUKDzBkDL9l6A4voqKHJH5pP6uNdUBy56C7Edm57ctPG3qqNNGbGWsT\r\nyZHoPG/jbQwwCtRQdjG0MmDi3WOOAbJzzm+/CgcZSufXkX6NgxFfY2FPFG3y\r\nwxzqmbFcUhU+tVQJB3bSGyYxH3ZtWpii4ggZhPCBlJr4P5kWhe0G/eAji0k1\r\nqa/2neWnHth5+MT16HvMiroQPu4+AYoLiW7Tqe9kJVKgZ4wwXw9isERDT3fo\r\nU8r55TrSoupEPc94tKbOvl5s8Y/hBYj4hBxZGXBhNeskJP92wZIpS+7zLeWf\r\nF86xth7evCrnPgeCSfjNRsEpNpZu4tgdXnM=\r\n=KcWu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2f9b268c0.0_1653075205183_0.6487745171499222","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8f27da8fff18b5659ae46fbe4aa8c305eb870d13","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7741345b8.0.tgz","fileCount":54,"integrity":"sha512-le4dZpIp9S5qaf6e6eH3FlvRqM3yhUsBkL7tfLVUe1a0SJNY7w9JUTegKIu2D/k+cpXo0BIWFgLPYBxS825W3Q==","signatures":[{"sig":"MEYCIQCiYs8mjDjYuAnW9mvdULlNzOfcIh0AHW97dEItTbVGKwIhAKREau29B1kVADvRvgy8ySw1/YION1EUu8+Cw7ND2sS2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri1Q//SFIfizUlmjxq3B74581+k+WplqDNWZ8zIG75WDz3cNs6fRwg\r\nFOwb3NpJryjj0MTCOQFXDTjfN4mHEFhH6aaU5tKGtCwG6mO0wSNV6Nq4iKsu\r\n7d8XC3dEuaPfW/LFLWnCAhUDLJ2W7mhBZH/6pfgzg4LLGwP8VsaeaA6TxkHe\r\nYksC4zE8a7RWizcfCItTURQSTRj3ogutdht8o0HD3Ldvz+0RLOleTsqh2oxb\r\ngSw5LtebCYWr3gstLdqVBjGGkzJ+UV6xf/DYIFR6U2D257NrQdrA6ZmEyOkR\r\nHx3TUcovaUnttNUANyhnETwp9PxlzM5gCzH6qOXUoBYdyiz8nbREgFfNY6EH\r\n0AQDTmfQyG3NK+Rtmc0B2GfLQJhu2ZMPV01qAUA4AOT28xiAHhLNeemhQEfw\r\ncIT6IV6IbvZ16nHTjOdsjICZWGChhV6kb/1IFoKwkcUuXsPA5YPCZ2jlw3iF\r\n5EIWqlfmF5Wy35rKqT23CKTum/teZPCXNhGe7/93s/1bXdlvGZ1qe2NF3O2l\r\nysBRmys4U9+1pdWZDhq843z3nn19sM29xKrjutxJe7fFKkt5+AYKondcJ1lp\r\nWtVOqOiasIp+1G74Z8ZFdTUXZ5DDAViMyq8vsb6OazUcVJMLEowOEyLP0qWg\r\n8vlmtD/8oLEoL+3ChPxwIFa+GU7Q5U8KrF4=\r\n=KSqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7741345b8.0_1653077008331_0.22613160745888772","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f7592189fa76711e5a9248e70b905e0336c2e292","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f807e793f.0.tgz","fileCount":54,"integrity":"sha512-aUCgZ0viX7cp/3i83aS8A/os+Pz+CrIkCApHwK4ZIyroqDccrh8jAQw9WNbJ8WnYlT0d5wun9Ret+KaUH3c1GA==","signatures":[{"sig":"MEYCIQDAsLN3AVkdfrYwQr7I7BPI4hT1CXf0EM70rJzRhbRizAIhALb8dzPMGrJdITV5RSN/nku/w1dRXBgpxxcsO5zFwoJ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXLQ/9EkAEpj3+LdRu0cVWDwtkZeOb1ZwJRTrrQRFv00W3sW8jAWkJ\r\notNJ+udJsOWMzufkrk+zjCrjkdZBq1Oz0TxTu7MbWWYg4zb/k4y1pi3V6UiN\r\nkqXIu9VEaessV1COc9MXQwJkzAxBmBOSOgWS9kze/u+6XoHB2Sjf+jT3k8Yx\r\nGhOAe4qTzJ2l3I1Ai1FHotRkpS0ZLhQd/H6Whs9B2oWjmtjz9uW6lJDgwKHy\r\nsFBq2hgQcTcqrW7WxcI8l2NPGjCbMyITBgGjNeom37JVV1ZIo6UYNnrGqF3i\r\nKzVBpnqFem1b1D8LJ2db2ybLzng3EV0tpLFcM30ocrp3iMdQYKjcoK+m3uRC\r\nkK6VsJCMk/gKx3eCAli+L9vVA52dAyET9lSn8zgbmV1TbGxXNyBpn0DUbHsD\r\nWdAphlPaHWG41l32OKIhgj3OXC89xPzI7zGeJTseylsjSlcI2RXkpAizdaui\r\nTG1W03Osbc/OcmM+w5W1WkUx+blp50Qw6otLj1ucHP36bHYChQ+6oD8DWZRJ\r\nJlPdpFMf31shLBlRPVkVM3GWG6OjefQE+kIQzxNGnzjVSellrr1Nuk/kMAwi\r\ndZKjYwN5tdHQ1PDWOwDHHzrcikOoChesP5qQSHw6ZX9+XCxXyOWX4zHTtjwM\r\niyC6c9eZXPxGWDAhs6zcg2SHCVc1VFoQRUc=\r\n=XlK9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f807e793f.0_1653085353627_0.9794200415460261","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"56bc5db7011fc0565607d0da20b0cbcad4a8a091","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":54,"integrity":"sha512-I9EeFu+ot8nQ0DjbXWShSgnoHb4Zz7kfgwiwkQzSQi0oOE83Vlo8E6hqyRmLDwjjumusWC/uojSHzOEpMQ+XOw==","signatures":[{"sig":"MEUCIQDmKZmsJ9JCqRep5Guu0g2ACQmiWgv7ld044ryl2+RTOwIgTfGDCcuhRSekTo4+gWxgjTg/kCPCSztFR9tIUkSLG4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDaA//d5vkJCpR2F6tIF/jMUJO6XV9VwyjWenZ2bsrvEAuJOaFytp8\r\n207MQxVfZxZz+p8E/biSqEUMqyN6NF5mZ9JWOBHnhbU0l7m4DF2zcXRn1nD5\r\nO7YEkwKhXVjxT556zzMgN3VMwiYLVPcc01+zLIcNfruFnPbM65xjnoPQ+qpn\r\ndeHe9dM/PPM5smVIXEI2GmaoTbIa1+6aCBxb8n1DMIEDE1mo8OUU3P+29gGT\r\nAcFquZpkSKMkEex2Y7YG7yGxuqfDoVsqDYrEzm5MkLLIZO5/MIYGByj0a+U6\r\nznlvVqDmPEBN3GSfkRaIrUOmii0mmNiFpw4b1xU/DLI9Wz/oCD94uQ75tBs8\r\nhZS9rF/7UTCJmhZkXp5QxWunJS/+VtvIR+CttnM8ShPG1Z73/nop8Zj8svrB\r\nD0TUhd+1bXOPhO9NAplI/zZXToJTm+xJzo403P+E7wKxDELmnjWDScwnq2Wb\r\n4I7ae+zFKvtRXWYcbKJwzg+zHc1Paw0H3HE8nf6gXF/6Cq0u4RxHKgnj8ULt\r\nSjJDsSHq4Omoc9+CsY+wZig67ml0KAk6sGeef4/DTNja2YBdcB/8buM11WO1\r\nyD3OPgo27jPM+zRTG7XuDSwLLiJM9AmEAQwL8QkWUuwsyy60dDYAFrRkb9PX\r\nAWqunL0VpVq4rLaccC7XV51smrX96SS7Ee4=\r\n=VvvC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9f53d4a8a.0_1653317910684_0.3628676243301212","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/segmented-button","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ef060ee1eab97b75eac42d0606aa461cb2784e82","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.77cf00e37.0.tgz","fileCount":54,"integrity":"sha512-DT7rzkDd0IULEJK31FhuD7OiYcdc13TFePQMDHiWeSu/nL+EdxvPC1CeXt6L6q4K9ck6nDlBQU9t6PV1IUchYw==","signatures":[{"sig":"MEYCIQCZoa1Sluz6o0AgfnqJZ2xxFl4nm8GkG0xsORmXWEKWVAIhAJ53WvGUjgcpm+eoN/EHN5prP2UDzHN2VsqHxVcUKlun","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillMlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxfw/+KCvSy/L+3jnkorOZ6lE0t/LImkad4CtJToDP4JoGT4lEAsOI\r\n/DqO334ePQMDsnAOSmvHFzmRUP3SHIMM47NVFE0UXnnrN2pf5aHANKJT4/nP\r\npG2ybhXScSgZkWDilMsc6zQsxP1eP8JRhLHIeLFyncFAfJEfogk9UMoaCiaV\r\nq/O6qzBTBHqwmd/3X7meVsyokOLFDPMxGXZWUlNhFnSg1ZNyPacAmkci4JNG\r\nNDgmdnU63Ri9LKGko05wBZneCM5rWl3c+lq0aWG18EKrdaRwIXgQo2xD4LSt\r\nDg+ydK+wUP+E10ZjgSjJ0xbLkXyOfIbUEmqOfUyrzbzRsmnGkukOcKSxWqj2\r\nZ94jYLLSOupi0d1qEtcBMMeoMQimERSfKNHMpNzpbSY2//hwiKcaKosl/JoD\r\neQWzkiPyg1QU/snQQVKryZc7StYHAhW2Krs8DXdgq1qS9rKqV/zOokD3W3ED\r\nXQK45yh+wzc9fjAlX0us3+BN54e4qnkG8EgSLEzyeprpOjcJQbtlqwWUptAP\r\nhQbVdPEhZ7HnLQtN9gQGG+wT2y1lL94yaLY7iCUBa2FYF83dUXycv0QqfBV6\r\nlBgwNHM8vo/zPNNHvrimZK0mvKmk7zjggT/+YPBuAsdnPGrltcfkcA/PCVFf\r\nzUW52Ngj/fIDzBfUBPQkatBCQFkZuVUtyBw=\r\n=MS0M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/touch-target":"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/segmented-button_15.0.0-canary.77cf00e37.0_1654018853502_0.3500450959739141","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d5465e66691c6761f8cd71cbd677091de3b17df6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3c7b844c2.0.tgz","fileCount":54,"integrity":"sha512-n+k7xRZkg8y0tlITGPCwsZw0R8Yw8nTX8BtdfYkuKnavNYvPSYhx20Ugptar0/orHzHhw23AQDvmn0hDReECXw==","signatures":[{"sig":"MEUCIGfBXoIADfFKGuQP7EaQVpsZAD3fH01MOJKr1GpDZ+plAiEA4gUigS4z3ce/oj+iI3tq7wZKc0qMaTQgTiZ1kb/3OFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin89/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQjw/+MwlZoycbqFSbTmnBIjAAak2woMMh7PR19xIIQCuHvKuJM92E\r\ncx+IGV8tRTSBIO/RvthvqTUgLVmYaLJmpx6gBPMbLOx7fYmBaduCX9xfOvTN\r\nw7YHc9fM27hIs3N8/dpodIkq9pwyokkidT+snWomY1P0OrHRWNY0xslmsKWn\r\nHOduQH2ovomtzHmX0qEBi29q5rEGxTJzfWPQqCNq0NC+BlJlQVFvpT3unh0R\r\nch7nccb63BuAjrDk59/A/n/sKInr7Fm8fkjaBQcfvV2+jjwjzNRLH5AqqXSa\r\n/utkuURrOWYE/h05KFWUzK2BAQDSNGZH3VxpQMidNoOR0kAN/L1D1IEQfXay\r\nxfCvsp9dVO+JrdBkN2IxEXcKVXLyxdMJZ63/dWy1XIO4OKVHAyCS1aTBO48d\r\nXkzMse6YGJAgUi6Ud2WEZwQ5IdjP0xai8+kzc9+uY78JgeiLvAYKWOJRxUZb\r\nr1slqzYJlc0ZM/MoucK7Rutx1fXTdLOB/QGqD2thMjPUjputGom3InDO9Eb7\r\nu8yOZSlGDy+aNyH2bk69Bzio00NN5AA7elb6b0pJVAVT1XeQcWhQTEEGPGE0\r\nMHl2y+Nr9Gjo05We66n1/pJ2oBiODsI6ygK1M3qCtsaGZpPUE17BblVb68Gb\r\nuQqyjeIRc7ctnvf9ntYBHVVrmXCOPKj5deE=\r\n=VV9B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3c7b844c2.0_1654640511594_0.8973775740108156","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/segmented-button","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"578663a7a10b98a844026349b1a5ff366994439d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.df47894db.0.tgz","fileCount":54,"integrity":"sha512-hzKryRcIlXn4Z1gU/v7mDtSGAbyZhz7wrhGbldK3/gIr6l9Bc+KnKtIin0DIPdvQujpbgxi9dGELDbGWLAVwWw==","signatures":[{"sig":"MEYCIQCy7NbEqPbfFIPYzKLCg9AVlO7WzfMP1m1GUvDNve+WHQIhAPvAIfk38lrnx4H/vj66nIqEDmZS2+d4a2DaxEzZ5h+x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip289ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZWg/+JF08xSJDienTBAzvjJif60JWASmxcOmW2lVFCIQr47VaOwG9\r\nLwtSQSoUohKi8jZ6qtHjLrAo7hwJOFsaohW96WSkta0L4EfevgrhJwihcwRD\r\n40BAL1RWtRd8kKUMeNIzO5TvLo6dLMfEHzFKwjgWD95YAjFBY+hOh74avc1o\r\n1aeGtH4wtMezBHh41pUUqsdYIeZvQQ74As+Z35Qr9gai0400jlxFjb/Rux0U\r\nL4a6jxzIynPK+0Z/orK54JqRqzhJ3eSiqBh/QzIiMJvM7mJfxZJH1C5H2oBt\r\ngVWFJunGCXsQYucG35E37XXXZyCBvX8FgVJUu+ReSbZy7Mrh2BMJgdw6aMNg\r\n4rtccB0XW6v+MqG3fpAAWHouVAaYmLA71PBuHPoteaku9OgoF/52+12JoNqS\r\nMR8J7PjtDgv8ibpNtZ8PHo1QGU/97eVi4uB24WhV9wsCmh695Y58/KoFR/Ps\r\nab8s8LskH0sIIkGkekw9QYHQ8lsghKL84qvakr0WE34c7KFc6mv8LbBlZTzR\r\needL0rtwQN1y5J4NdO0Ph5Rqbi75WrPldHvoCdx8BdX/BVIHfU0GfF2huDM5\r\nt6ugiwaHATBpAB1WdBvYaLdtrQ7ew6D8v86ooifQf/NJk2XWZdz/G7fkqCsN\r\nO5Zl5enmINjnHygXA+rv2fklvuqiwTkqPIM=\r\n=4fKY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/touch-target":"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/segmented-button_15.0.0-canary.df47894db.0_1655140157552_0.3579031846923084","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6656177f399ed4825cb787a68459614662a627cd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b18a873dc.0.tgz","fileCount":54,"integrity":"sha512-c9UbhJJ02xRE9mLvzAxBRQGf7D6RVu0Mm0/CTGdt4XS6fVcHsEyrKPVI6/ftJrqdxMC5oVHVmaI2k2KpK3Iefg==","signatures":[{"sig":"MEQCIFdYeNZwETelsYJhmor84eq7mepgz33/WwcGGmkcve4AAiAy7rToCsJfnMsjDZAF463nq0ZKvv838dd6jZ9NLDdV1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodfxAAoHm6y/wptxyg+nIDiN230tS9eisuGpTH2RIdY+Nzd/kyslMf\r\n3WGwxW3wA+CvstbLS84lgYODZmyvuPMF3I6YSTS6hZLNuDrX+vgka2WuQrWF\r\n7v5ONsCO71qUagf3cOqfy8BSlAcib9f0VYmc91zsih8pbP0x7bO49RPHCYHh\r\nXqDv6NtalUfQiqdUX5lWl+l2SOvw8eQuyYNaDJisMoVbE/m1rb8OEpRzhUvV\r\nvp00XbR80SjTJUcuPv3OON347NJf34y1PBI5PHKdBbLFosaqksKsBH3jL06O\r\nYdLgGStRRwoYeYxMbNHvCIMu+09zCPzi+dHoGJ+j/xnbo1AIhE/vFEPHYEqM\r\nsBPG1isfaXGehHIjubIRzxZfoV9YDGVw7Haj0Prfe6vBDjl/kTHkYnzV6K0L\r\nISzPdFz7vt1zPjtVpVN2izNhUR2FIMBihl1n9MFK92iqh+c+Oo9GmBNKjREh\r\ntWhr8ZsAbzID5qy8mZUIlKvvpT09jwBJcyDQq8fOQMpqdR4GhuVcXUC1DEbG\r\n7CmK3GiZ/GXJKzSjcNrWK+kYhPATEH2mXy34py4cqc3X4Lmp6NXU//clDTv0\r\n5cnp2qjf0aqjVnmjnVPh8cDzib76hd7nBg+LsYrFtaJjys6gI4WmdKK8sJY1\r\nhTQeueFzVFyACbvnDAfCKaklH/hlpyDSKDU=\r\n=B/zv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b18a873dc.0_1655188228354_0.920624447959195","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6ebba1b93aa107d877cd9b7bc68d31e25007a801","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ba9c29637.0.tgz","fileCount":54,"integrity":"sha512-3rCsh8Y1COdcLfXsOjfJJW/dNr5XxP3H7XTtcQ7GDxP0xxYHZzLBGmo6JYPcW5vL7RTdUvIMJMbkmmeFheH3sQ==","signatures":[{"sig":"MEUCICGmoqbDKmFDLpkswISvTF5h3M4iqTgibnrxulMuZWO6AiEA5SpcgyfZqpm5IqtzA46HF6scL4gxR6AMrEboUddvAdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNo+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ4RAAn485/ketQVPs4tV3zcenG0oX1ZsODf0dIxI8SbD6FLeFiTZ3\r\nhu5KcF125JeBG+GuXNU03xsqkkdEMC8drb07tUIYmWyIrqy65yu1Kwh1xhGn\r\nCX0HoaUuRPbhWpVovwcYMQiDxUgf+qSKLyq7o1ystz7fboVovhiyOHJoeLb3\r\ncjV9O4EAeKkjk/gJBS4LNgViwr4H5d0ufomiEGa2vPATP6j2BfMWW9Q9HnyE\r\nZj/vTxZUEjjfSUtS+tFImF7dZueMVsTLfqwEW0Mj6MbmeLZyYicm0qkb/EPr\r\nAFQzVywof2D72+O2PUy/bABUUqczvzJHchB/nZKyFLYnLHe3Ah/4aQbfR69O\r\nYNHoE+w82uNZvMOaJENDRQPBCw7XVuYSaD02UbaE89SERty9S4ZvYJjwpeyR\r\nOSfNSLv1ykRMTw9x2Nrwkyyv8kUvg6CCEBKKM/ybbQ928Zw6v4EZMxW8olBf\r\n9qdkhHg0L19LYz6rhZBOtMcDIU5vSAbQS4cEJTB6ziwIh0wxuwoTdULnPb+Z\r\n2pzAQ79YQOH4acSKDoBOhpP5dzaevw30CE7H/c7ObqiTtba2FTwA9zt2StUx\r\nCpWgdyN/PqM0GMyUKx72EI8LB1OoqTfGT6R+/meCL99tnWP2xqI5L2N3zXb6\r\nV/ybN5p5HWi6gCl8UZ7JBZ0iowNb9xMJ/o0=\r\n=JxqT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ba9c29637.0_1655233086058_0.5286137330932743","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"86fd699774a9473a2810376029c55f940103ed5c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9bfd12f01.0.tgz","fileCount":54,"integrity":"sha512-/2X8/7FC4gCoK+BddNa6f86xtN94Z3Nm0AGXQrjVvf1hE0euKekIj3LvcFGfOuYxEfGE3ttVWuhZBbQ6lb4gsw==","signatures":[{"sig":"MEYCIQCivHgEl+/0lYDKo9U/DHDEGO/jyMkshV2Vk2mdzuXzQAIhANCJSmMdLNW45LCUP/OKgcyVdYhQxVrW8BrH+99S0qID","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2wiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGvw//VG/WKLoc6SsC7FT19qdcWVr1xOAkkEMVkJ807OX0w8eUCOg4\r\nqTpljCaGrIm45p1Mk7a25GyCkE2mDfmCV6WILn2cMg7mA9QI3NOsnFMDfumk\r\nqA0hFyJu2QDdZY8aqylIomFgDCl5M05l8SU5m9WsOyOX3EQN/xCC3D2JPgny\r\nmcEl7PMCBMCGGwejhoGqK9RBZRgQNXmS0SCD23Rcrh9dGbbozqVVrqq2hnXD\r\nGTgwrgrNAuolvrRi7rxDl8TR6T6njR/eUy6cv7D9+7ubnpBhYLhZVN5MEzpn\r\nw2iFm1DT8VEqvYaMlXQDb9cVUmrVWCCXPj8SHdiv+AB5rEzulw7lrizR7rVx\r\njYIJ54SZQwsTd1bfn3ddvQUWJnaH6yfgPTimuvRvQcUiwLZIvdV/0A2GbaxX\r\nfSHcyhtloqn3VIzaf3iUNmsNKvKj7sLOhwNBYF1b1pV9U+RyjfkZ+EFLi9x1\r\nm7G+pUndO/l+FNGDtPix3eNQHzWJpZEwyKMo5FNhEPlCii2I5lYKMlRv/osx\r\n8qhyrFGIe5kipNLfXGLsuzq74ngFSrqQhAdjAB9T3kNNYx+BBpz4mM5rR6lO\r\nXM5FUFIksAADfRluXg+2OtBjkkOP7BdJiIHDd/DRlXzsLEFYtmkgM6TMI1Ej\r\nhVWZEjahJtwzhErJ+mcCWN1otO0t7hruwKg=\r\n=hhk8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9bfd12f01.0_1655925794573_0.9804971159946914","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"555cfb7a3c81441d5ba8ebe196444408e18615f1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.764de225d.0.tgz","fileCount":54,"integrity":"sha512-TQmb3kEWlufh0NtCzSkhViEAVqcCY1J2qFY3i/ajmbEuMhSTSSVCj1L2suG5LLVNuSKl8I1uG7sBivg+3Msw3Q==","signatures":[{"sig":"MEYCIQC4hl6FjJPoZlE3wvsWjSFEvgy6eY2XOBHK5kGhrpf/gAIhAIZhYjFAqi062QfQF7vVGlk5/ThxLVdCkdUi7TFp2QWi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos0A//Uqcp6c8h9wL8ijKYz166CqGXfweVCY7Fo5V8DdzE/qQF6y/X\r\nItnVpQlOemeAM1SyQEsm9TTyfR/qUbM/jynlIhzQzTupf7YjxHtX6/hKXvci\r\nyg+BBP4K6ftjSId0oZmk1gkSIQWeSucJ+2oONTVEjJikbml7P/2XVStmErww\r\n56UyiO3V/ZbgvnFLt6ynSTGFM10pLPeL1svJZuw5uHDBsIguBClZyyyisdJi\r\npGy/v6fyacYJ3dr8QSufTTKpMFmcB/gskQHehUzMtQn5nT19/zpkTrWcoDjA\r\nv5r2AA5/7VSKI/fHqyvL9fbdm+2FwqOevgQtYGk7YkjqAmdeCz51a5QyMV1h\r\nprghj/H/20mXGgAH1gvElQT82tknApRBTtAKUNoAraiAszLR9i0fYLDQUaoy\r\nZdtDC2MJSOk7gQWVQ15Q8EmZi9+eo9drQU04Rj8pgj5SElfuGEsnmxWN9/Ez\r\nu2dgy1F5vRGsePySWW/fEYpkseZpWcn1ABB4EnxlssdERwTYWBrFK6fDeIc0\r\nVo5ICgPank43Ec/+kLERkSbePjwxvDNXlFAB5BEy6W7H/PmyEEjmaYTKRj0W\r\nstxaB0MBavT2E58LGI6y+l14zdw4dtAvVGatISLgXncZJuTyOPz3sDxS+Kyt\r\nCWSrGW8ZmJQK87upoWEfpqUabb76chrleVQ=\r\n=mHnf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.764de225d.0_1656520065830_0.21331751316107006","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/segmented-button","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c8bf10e3a4bb1e04e5dfb48f7d4344d6b1b7f062","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.31e517cea.0.tgz","fileCount":54,"integrity":"sha512-beOnQdoPWqLVouVqK6Z0LpuoyqMlLkxbTBQMLIi8yqY68v4+wiQn6ZfUEswDAsHdPHh2z9090U6F0rSKb8R7dg==","signatures":[{"sig":"MEYCIQCLdwBs5rtx63VbNaU4blSPPv20g+v4QaL9fcd5Oqm0cwIhANLSwP3I87Ai31Cqekw6reDmEdBwnMm5Hf1utTH5eBme","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG4g//VNor21vBCtqeVZ2SyAeQEnWhh0bqz1GKQcIbj91kJt0w4Ns0\r\nim82eaUp9ovA2nwbhrmJdmm1OowxkleFUq0K8YeY8Fl7f4sfH6zv/Bo0aSYR\r\nXnWBrzbpapm/tDfKEdH4ch64Wz/poA5LCdNTmizVCIIXMZmRsH0tzsOTHTRt\r\nm2H7zkVl1kGUmNxwhvzlkanbpGeovOXLUG/MmYz+zGYmBQdsZBVMkjgGdWOS\r\nJoK+EH7EAWGnjmkfb4a7YXjfoOPlCr5+uvb91UIisxmvYhYPwvkhA3N3Epf4\r\nw0p8p+HumOLaMZLE/H/cQvCOiTEN8nh3oUhaaJaIpIcSuoyw38uVWTmAycMK\r\nxxWux6TMejVZvvgeoskR9feiAWIL79Yg6CWvb9uB5YJu2LYYKxM6aHfp6UMP\r\nM57b53uZwGL/GSxwlN8zCag4i1HelcMdL/JBKTmOzGSZ2ruWV2Eqhm2Qr4Z+\r\nhEWED+HYLbQIcFu6SA+sm2UWkTV/p9T/5iwqeVHT6CWnaBiBw1EC6Ft1U/U6\r\nl/7y02zWX1emcBbqDUZYTSqgT5F/Sn7Pcf4TkNUJ268UEjCOBlw/j7zA9CSY\r\nmst/4NTtzGYgk0EkaxkWLjgKhsHNP8cOhNL9WZDBcpRYLFw6OoCVZhcWuKwB\r\n/RONFvuwWlzUBGCgCRxZIYyA0KbGHW+7hZw=\r\n=q1R5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/touch-target":"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/segmented-button_15.0.0-canary.31e517cea.0_1656700146349_0.4495876490323816","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ec3514280f2440e115c4dbfe2affddbdc95ecde7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":54,"integrity":"sha512-YjY0zo38ifCKWHGv0hzAtuVR1NAAASUNDJMryJGqw4gMWbtFmxlLSyfrThSfHW1qXP5LfNG1W1gJGd5sIctVNQ==","signatures":[{"sig":"MEUCIDagpikvS/wApcqA6RPzLldLTtPp35lU720mBwc9naX3AiEAsY5CjAWqb/rR4ZGny03Q59k/PMq9XLb2doBeQ2YqRqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq58Q/+Pz28d2KRZjvrK0UJlDFqS4WBYCCruy9heysZJ1sx0DCQ2XO6\r\nRGYqgOwOz49QtTVmV0vqkjhoo+z0ZEgrvU0qdK79qf6cxAFJEWUVcykS/oNn\r\nU/U6aMiBRPmXWWEv8nO/00Yoy0Xj1bafDrDT4jGCtaJ8zFKJfn+LfNb87PsO\r\nuj59to7a6+qsPfnj0VJJ0bct4tcgsGmkQrHDWTm8qH0BViGyYQ6AFqQNP7Ro\r\n1GZsCfZEG5zb8ihVNqZYLX2zc7o9icQkYTq6CN21NP4h0WRbSXPnPXzeH1lK\r\nNXnzPq5ta6oFTRX7bAxKGPcLoh4ruZCXnYmoCRDZO2FJ5MsX51zg/pCo3kAX\r\nDLDCrop9fmeUyxp7KS0lYLdp6HsGZKJhYsy/a/pEees6H0SkR0vIJ1yQxfaM\r\ns+glfUXImC79P6NfOQdQ/KJnAPPNkELdQUIiDrDEWPHiAJDiblvRHTElU3Ch\r\niMKxvLq66zyK8fNdCzNa/kueKrZeL2aizIs75Pe6IZ0OmepTfJPThspuT/DL\r\n06CytcqDkuWILWe8iWqjudTj8g7iAJt9RjAFNMBm9NqrYlcutppI/C4214KW\r\nX5hLfw9/oZyO51SUB55xWdowuGgpN+KjtmguwmBCprUGR94TM3ZIgDIOirdU\r\nxxdPkW1AjNdmWEOzUxyZZx3FM4WF/6tUYTg=\r\n=FOiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9ea4e8e9c.0_1656716140116_0.7016325457139074","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3132f0e3bb80300f89644d657814636f8692aa24","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cd5bafabb.0.tgz","fileCount":54,"integrity":"sha512-zvBTT81Eysd2MGojcJGAoc0rEMws5dlzHdA3t7YNTm/oVUwhZ/x/HXCzV7sOeGmQSZ52ZllYv7a91v4TzUdjPA==","signatures":[{"sig":"MEQCIH7NEiIMMV0RbufAJqDfdVsBa3ThN6PUoln1ezzkXozwAiAOBl0FDvAbTl9aL72mf+nG60Jk7ytcw0Ok2K2+IdxgJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcx+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWAw/6AjtgmPxRkzG+Y0L5LoBvicUR3S8ejl3rnY1MmSqKBz1HFc0W\r\nnyjKlNPWrhg5Xu0JU6z8WkjPWfiORaOrXK4F7jBs1eGMyjdSrBAErpfpoB/D\r\nuO6wn9OhJSbudf7ZOlcB8y1W06vvZJ9mD4hnFMeRs1AuJqw6mcH6cKhwDwWt\r\nidiMQwm7gmPmTn1r76c0z7loK1H0lRSC76p3L2A1Clqwxn7OUa+d5FHGapzD\r\nhqpO9M8/rPyRdsMswF7VrqX9wEK8RKVlSh09ZDGzGYMlcsxyhUhlS9gNqKTV\r\nYXo2+nHRM+rZsDqmOUJfOmJjeMZIMDlNWA28BZielo8C6GmIDybbqVOIxjvJ\r\ngA5MEOx4/laQIPDLh433FrX0G713RgzTaf4+aUCTLNtNeUPrTusbJ1QcK4DX\r\nSxMAL94ZGaDM889vkWHSPIOPqIfbldLRN/pePh+BhxQopk6bgIcKxtvWJ38G\r\n3/7UudwO5ILfhfex6GehEAGmIexPJQVvGjwoY+ub1QyGnAz661NSbLm3g+No\r\nrvIdgC9J3casJdAfREnKH8oMLwOP2tMM3jUdaM5sXWv+ke99trrdCk0z9z9l\r\n6iRP5vIzkT8ml71De6yFF1Dd9XdX+m7CsuigUKBkm8W18dKm1jHFYkm1bfWO\r\no1ae1JyZr/q6hHlF/Tujx4SPa7CdN2zk88M=\r\n=Fbs/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cd5bafabb.0_1657130110503_0.49144746316677246","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bfb5c0c015b05156a0551599b5dff378451405c8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a02fe49d3.0.tgz","fileCount":54,"integrity":"sha512-kv4bwDxx3WwRavzKTWFdfCIAY1HgaQYeRv40zIyKHMY6WPWBO7V91t97Y6nuMJQ0j5A2fP3RkeC1WC1lWnuI6w==","signatures":[{"sig":"MEYCIQCrI1+dPKmuVEn0dtPPiIu967fOxNmxodNOpft5IDUzIAIhAM1YqeXM3Zxnrn91hYYSzADbMfmO9XwoShKcL6mxaixQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPsBAAisNSqiUKLlHOa8pYqKJbHO2zC0cJh9vZSxT2tU4OHnxTYjcw\r\ncarwuJFkKASt1K1ROR3jWr+r5hZ+ypuvjvRtCER8UBoOptgpqFZa8qeflvZy\r\nd3jsd/ePPHKqN2ehLb+ObmP7Y3ev23WoFJaIpGzALe3blG1INFrFU6/VhfrI\r\nu8o9dAG2lQxqrE5agwaYqDIcEQCuYf6+CEi8si/eInf1fzT3UkvnSzv7fity\r\nyNJJ5dh/iiWMOCYtVmLtro9T5G1TW7idlLFtI6vJ8ycYFpQQGBlbfl7ERTMG\r\nkz67yA3ftT7AltjuQCqQyLE+60yFMa3GNSior77ZI0xe4iKDeW33nbgU2mBJ\r\nKCEjUXxtamb0uYG+4bcU18bSeLvakQyF0TjWZv9M3bk0xFwdlQcz8XoKUCag\r\ndgs6aqUEr1IJMQskfxAjULSxk0dUxddKzvm8B6NDsNOdOk49tpiB6yKZuItH\r\n3lqmSyuCUdT1q+nn1w5Sr/E8gIrogUs40egWvu2xi7HigCOt3oDvbhNMh5Oh\r\n6tzUHcMYCqUPfXwpx6O0gU1Hb0nF1US3CXeCJ5vo+T8r3RSz3gWWMUCINenX\r\nYiYDxMGOivTjQZG0Hzr/lON+pWcFjvqyoCgqMLLHpB6PcnpIItgbMeN5Ky3g\r\n9v1kAW2xpA8H6oaw7JCZfB6AHxSwgKvzLRI=\r\n=9Uj3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a02fe49d3.0_1657133505712_0.2137624709033492","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/segmented-button","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e76495f3265fab80719b2482b242a2f3ab9a4d5f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.826a3d8be.0.tgz","fileCount":54,"integrity":"sha512-whfr+Qg0kNz5q7utxNdGo2iHMY/R5PvwCMmK5d8yu6Fk0g8wqqS/LV0sIpFj5VJAp5KzCyqehq1O0LNhsdfNug==","signatures":[{"sig":"MEUCIGoEwxRSsswRjdbVp9soNVPEpiuZLsiPT5OXhh7AlILeAiEA7QRFNyvs2aTvMbISTIkRGXYgNcacQoFyZ8U9zpCgZGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeMgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEvA//X2t6GBaKqdwcpxyaquKb5v9W28rRCIVLt6C5YPQBb3DVt64F\r\n5wUQpGV5b+jTUeZMl3R7mbhtfsRWtN5RxYjifyutc8Hi/F8eQJyou2pSydsK\r\nB853cekXA5cjUzaiGSEpF/iTOqH35NYjwGcboRrNZya2rQFijW21X983SfpW\r\ny09+lK24KKv4UbQO7UIpgz1tEjqyoXzogInwTFtBIpBMfjUTvki/d1icjAb/\r\nHARYKuR4cLB+m3G22VL2PDIm+KtXqifAshCAUg97U8VK6yA57ETXSG1RIzpd\r\nRG+A3iqI7rBbzlAPGWx5Ov/1O488+7BQ+rtYiSuL90PBbwdGP85E9b+yScL+\r\nUz8taGfyx97Qb3r4/Z5EGkbVtNqm35sCpg2OXXT7DBNTtv3jdnFbkbXDinTR\r\nhfKRh1cNX9brhIovFQlPueQV3XWvcXeZGY3P3aek2IoRUppWkIzXCiNgQgBe\r\nJvrhkK8YXrERCUOXoSy02DMjlVQ/eDEOrU0zUVqkyboK/f9CCHtfo2oyR7bH\r\nsOUPYBMaLwkW6APOfexdvoGjjEZtdydhA5CAtyL23MR3gpCLPTRJe/PVgv+i\r\n0CM8a/SQDj18BUjD+9CdXpA8haW8pV6zVWPqvrONV1JXEcZXp1HBaKL/TmZ/\r\n2Rnc0j2qRVtXleb54vTdvypiWabm0E/ylq0=\r\n=cNdo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/touch-target":"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/segmented-button_15.0.0-canary.826a3d8be.0_1657135904414_0.9835129643375744","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed80ca277b0426232269b86e8db3e4779038cc2c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ef276aa93.0.tgz","fileCount":54,"integrity":"sha512-T24xBOgtw1MA9yt4ysxk7S8DLbHJa8sMijrrv13uuEngHuZm6H1xc7hQ/vPceAPozA2reHNn1aJAqPA60waU9A==","signatures":[{"sig":"MEQCIFnbzluJdnhJDJSa6fVG8ljGlzE1pa5lsPTw6ycDtnp8AiAhkkgQvSu5dRBP7v9aiUMvviwUTkAjjlX3TCeZf3CMZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0kQ/9F/Zqopsywd0fUyA6uL4QZtHPVuJxTPy6JWXWWkgxNRDWbzb4\r\nZ6GDPSWwBiYs+oAIUeFCtsZUI4EE696gxfC23kfrTKG1/1U/XpalsDMuAIle\r\n7QqXLnXOBF0xJ7nJFekka0Flnut0zJ0JcbPmJPQNkb2FuUdDvCvmxWMcTCQT\r\ntLxjLuLIk0WFVnMZjPwysQbuWsqmR4QLguuQzwNkWieWIimh3CylharcwqG3\r\nRBQwP7JJ+2O/0mYTbFpYzvjjHEd/107fdEPCHlGZZbl/c3l4PA6wxwbdmH1K\r\ndcZp2DekhsqISv3KFp7k/UYdu82XHYLyxrOEnRXcCE9RT3oNKyjQqElVXNKU\r\nTbxc6cPEY8+MMZ4RbcfgkpIKUvq9fJ2V2BQxkKss/YjpuU7XwO/Sg7yBVUOh\r\nGVVLXjW8ZYZq0XSaPV9wQuuUx9Q0v2GNfrhOnxHzdonLJAV1dDmzmG7vK31w\r\nrRS+Wm9YI20PKDV68myl26QnYoBRy4xD0j3c6dDXsK8yPI1kqcjl1B14PtVb\r\nukMxexnWCUWh7u25oqB+vehbuGVOXj+qfE6OZF2khPayv8375VGcRcYT4Mre\r\nzwNc0tGe88gi0s6qxr/hMzI8gVdmvLJF2zHNpxcFsUNqw52O97NKOvSixUzm\r\niG2SMYePxxwkRMGVavKIuCY8+YDKgjoKqfc=\r\n=vZup\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ef276aa93.0_1657213402017_0.8698588213225986","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e0053d17edac61b6781bcb9264472bdc127cb758","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.59cf61d6b.0.tgz","fileCount":54,"integrity":"sha512-bUXJ27mjejVz+N2gi+NlivWIGl1LrxnlPYPyVlVvgmfbCtTXmGnwkKEMDZMTJWIqsyrHjj4M9l519uzvzJg7UQ==","signatures":[{"sig":"MEUCIDYzWnyTlEEFuTniBlsmBwpsngkq83Gox8o/7xaSRFp2AiEAjVKDcasMR+5QTjqOAIc79lRv8fbpDRZ5c3L52MhZuPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxiZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtAw/9F1ZszJv5lgrwqecp6izMXxZj8BQVw4NjKjlbKX5n2k75PB59\r\nN0uIAnRWks5O49BLT8sy1bXM3udp0oFALlzyKowNrE5zbIkNlI5u23iavqnr\r\nspB12kSKQ+df5w/nhJSjIbbvBQj/E5hW+AfBd5/s12NWiFaU07pvDWFyexU9\r\nGJHAoVUL1ZxJhMay4FJEwcECiR7NVewAfVIqGu5zCNl3sbIcjMLfhtaHOA5a\r\nh0uSTWRfYRHdUW3GZdJfk4HVnQ0TGgUVNB1pS1RAMATogQ93WDEH7aqFIY4p\r\n0QKnj9AU70/1PCghopuTqn9+wEk9e9ev7vRyhzQT8pjKQvRmjSpoJNUOkig9\r\n19j0KaWxdJywLe/ZEdDcQNKnw05I3nwEmPqW0Wuz1UpGIWSqPThPfND0p9sS\r\nyp0L44sTNyZpATAw8LQ0IfPk90urt+O5bynKdPr6uhWbg+RgyEVzY4wxgXPY\r\niOMGcmYOsStjiFRsR1uvAA1UXCPvpvnQc6Pe6G+UwRH6Mpxq+U5dKo+tvxKN\r\n0tKzU9ibcUUwKLjWiMiWtojPXyetFpHvKenfunYldF8UGwrOCU9SR+CxtJgi\r\nNJNAfzfgKsATd45ZDimFhTKmyxKpdOzvXL1SPCLOWIy0/jdSACF6qtowqNKD\r\nA9j4iRto9pTpJ9/ZTZHwiaTqCClRlURNuBA=\r\n=RB3p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.59cf61d6b.0_1657215129255_0.18186108246845856","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3ced4dfb2c2586c20118420a06ee781f0597e642","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8647092f7.0.tgz","fileCount":54,"integrity":"sha512-qUJ7E02kO/qTU3UVXuVX3Zy2J22f3NOQEUfHCNEj/K9XuZaIHty6ErLAM9bJK6ei3bDMl7dKj4Ni4IwZT0K2Zw==","signatures":[{"sig":"MEUCIARqf+V59WJa5KujH59B7qWjByZeYyY4LeCp0fLvR9R6AiEA7L4tO09iNjZi7fVGbyfFy9jvmLcx5Z5VKp162GtJn8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0R6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7tBAAocjrt21cDjBoT65HVW0Br1+uSdn4r/vn6YNKkWgE5W7sZm9E\r\nYN63qSjHJtlNzwfv2HKjm5nzSZpovKjKVMCfiK0fo8SpqH3FwlrNLHMut3Qn\r\nrW7mfMDWq/nRy/LNP5cM3LO06MInAVHZANVxO4q73ihwN3eWYMECwKpEmMoZ\r\nqNXLHzkUEpHeFKbaO3g46zcnWRZXf/tz+pYrjpMt59OOgjY3oXl+0fDcUZyb\r\nfE3QAcdQqgewhk8THW6De6xuxV2SKX5qzQsoeu/KpHGsbZujN/e9U9Czv5DN\r\nywuHsamK/9IqnzmHU+g/JHZWS0ntev5kBNY1XoUm4MCqzcAnoUQXtc5oQtYh\r\nYafz7ICjhKYHq7Wna6Aki+xumpIE9iugBZ+u6iAIf2UirHbBOIUNG/D+0zIn\r\nBJ7B1B5/96iQ/KWGfJDg8RbvBM2MMGENeQtmKmCItjLCjhucUpcPzGkWZv0R\r\nRIgiJZSs+QEOD9jm0xOL25Z8cMVRtZpEjGFVM7HbBySUjLWex7uwZPvMESrO\r\nQXLhixjIOfVkdVXwZzfOiR1lqiEkXOohvC6Q93VoTityeHt5mzX3UcXt7qdg\r\nk2kVnIvzWqigo2fO7tUsJ6SBKc/KTT2l++noO4pElMrEXkFkDIGrbSWQmc0O\r\n31ZntYG4ASaN8f2fr/faAbyBVDJge8hww+E=\r\n=JTgJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8647092f7.0_1657226362313_0.5456608442478634","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/segmented-button","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f07e831709fdf701f45cc67a573a10e47e4ebf79","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.02ecd4d85.0.tgz","fileCount":54,"integrity":"sha512-Wsxx8VrIU0b34hcrherBzTiF86YNrnslopwnrEoggvjsm2xHnP9iYDTp6nPASIoaciT/ouL9icpPKYFrhzd31A==","signatures":[{"sig":"MEQCIGKp5m3KnJba9BA+M3zMznq5Aqe0aZLgKrOWr+0Xy7IYAiAi4YmVaZhFBGmB32XbJbyflBsOAhMI36EDrqxfupg1Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Hw//T6/2LO9uuDIOZuH8RLtye5BgFgVqhjkHfTpS/1Ac1kHWlhbG\r\nVyVemp+5FN5TH8C0qJyKqWJjLXjYTGFHqhSvH3KdeS8C9Ka0hY9Odve9r35S\r\nndUji/7ahyJVAc5oZx6rWE08sEc+dfcLBdGqq/JLrl8YtFleLBkg2WkGf+PD\r\nkd4e4nGrz3APiCyyK13braq6783orT5jcLdf+FdyAytbQuldAbNbvjzUTtCn\r\nKtyqSugw/hyypVIVx61dsJFUPRqftPhtvqwhotX3yrjYLOrDLBFmavEjmodv\r\n5deV9XSFz5zTcFWYxK+4dAWQsxW4vj7hbl3DrbGmL+Y2sQ0+MNtmDVEYAh67\r\n1wLvLdml/wsL8tfzuwpEpAKcPQQNYzHDefhwcALP+Lq7/xeWTjlqrVo0g92Q\r\n4zGYD+zm3Hj8CeUiYWo+We/8jIcpW7PpZTXJUAZicYplhDc0NEZMd0NmA+PB\r\n6NNGzA6JPkh/i6Eq/6uZu3UUfUQ1Px/C35LpVuuKSZzsOZxOOFnE0uHN1q7Z\r\nJuUhokvvUFiksjMXPlOAGWvrLrnvkrG5vHy6e36oA2ICJ5QVBgQg6Xn/WuOb\r\n6kphyq/Er8RI325/agIr20W62vjaN4BJfroKX4fYyGdIUvsSCpGflAOgIXW5\r\nQ0RRfI6vd/+yn5nHSCo6Y/KUltQnwn9QsbA=\r\n=QvxR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/touch-target":"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/segmented-button_15.0.0-canary.02ecd4d85.0_1657557599677_0.6735059800058552","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"93abe93a09961e5c20573a717c32a0632a57399f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.63d3a146e.0.tgz","fileCount":54,"integrity":"sha512-VuFHOzuwbmaPmEqXSk5hbDHozp4Lhudze+o5yvJ7wOgPW24HvIPEFQ7RiEy9iHfr6DELVqwN4/wXyKfcfxg5uA==","signatures":[{"sig":"MEQCIEx2OhoYO7WTIwIyhIo+s0ZerbAXlv2SS/Vi5V7iUOVZAiBB1OhoqOSO5QC73jfYttQcWpcIkvamuWmsQVlu3vXteg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrNA//YJaoHyc/6+gpIfwjAS6SMLkEKvP0Mnc8w7M7CtqFVT8p50kI\r\n5ZuuE4z6aX93EQEVMjhbpo5Ri6ghwiGAb+W5BNh6CbRi+Ppn7mYziilXJx9G\r\nLFJh23ql4KghlwQ87iUH8ocyMM3zHUM0oOfY6SnjJ+nvCZIsbgGwpokKtLix\r\neZso1Gj2079Tmt6DEy7k8mrgahAlEflLK1YWYaMtRjWdlE8AwmdqbPBGKGmk\r\n8EqvHwc3qA2uWa+ZT9aRPmNvesd2U6ZQTk5lraw0AD6hjZxc0mpOfaqeF+B3\r\nAunRNF92R5jYBYQaW3ho729ooiTt7pOGRz51F/ZoA/GY5IyZ3cReQJEBPBff\r\nwimCZZnFJkCEah9PONZMxR81uir9dhxCt5BzGia+SIdopjSuYhY8bBkogSl8\r\nlRAugyTVlDoGNIDmiDQll/Cx2zGCUrkMuJS27OsZlQoY+eGsZe8l0zSJ+J9u\r\n1ahUKf44CPQeFDLTlG61YZXCics7tu8BiznZCmgtNLYIwGM5ogIIVVqt1GlD\r\nCNcXrmJdzmz2poKCUhyFrAMhkMJq6Xhvf89eXwSHG0s3chR0Sbc7+/Q1unBf\r\nHXf+1ZFPQ2Qw+zx7CQM634VxW02ryRq+K/g9uL+8sr/yrHRM1nUOLJw9LX3C\r\nhfGQSs6NW7/fQJtPVk4oWt9yD/KUy4lQh8E=\r\n=vhZ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.63d3a146e.0_1657625866613_0.10603991649235511","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/segmented-button","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"87ae988019080dc78e0cb279661ce9298bb3dc3c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.88db01990.0.tgz","fileCount":54,"integrity":"sha512-Br2onh4aUffCk+LgJhWCVwZpfGuhi76+X5Mf2rHjoKWXan2JHdtDR8TESs4jojA+hI5z7WHZAnC6ooE3bP3sow==","signatures":[{"sig":"MEUCIQDwG0LxCideqqgkWW+47I4PTx25gvKgZ3JFwEcuNvgRrAIgbMqQAsz8oeu1aW2gjdGWFV9yIwVPPk8cmCFU3K638Ag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFJxAAgfLw1eS16bZP2jazEgvYcRnjft1gt89hQtGm28LB0mGbme7i\r\nbQXATO3IJ27xIsv0PychQgys/RaACozvkPN5SgnYzNJxy74djo/xz0Om3aES\r\nFByKmv3O3ybCw2A3SlkZhhIHEor5m2zIMNFKZUHPpwBFObHwrQTHU/jBaovJ\r\n3pv+0fPYK1hkngNEegS5nBqZ1lhBygS1bIfwM4aYOHcqyklkdTZmTJ6h7JYj\r\nRZ9AX5Lw6ZZj6zLcPdrE2ISWlTdQ4/VhGsMzt8Qt8Ej9VGNUheQzUlqOXRqL\r\nWrZpECbMnrCNBaZyJIuaz2D5wmZakeHdhzCxrCBQdESXOQrxZjzMM16DV6Qw\r\nZcDAaXDyh4GKP5uKF/n/JPbDV0oQMMqaZbuJgNyeW+vPo/EFS9p9Io5RQgjn\r\nl2PTL37xO1EiL57TlAnCmQy8jyggesH71SWtg9QlWPzQx78VrGMqMyjbhpWi\r\nd+Tk9Tc3DxZ0YyjaT9mfV9KmIGGbqUM3fBoscc2sWZwIOXIy2XQ8LPVHJiHv\r\nf0JtNtHlxWtLtsq9c2md1DrIdtYjigxc3qsW/bSL3bB1AExdBPznBO+ZijL3\r\ncioYrPEkiIvCbzJqyfx9rcDlkFX11g/FBWt53nMmbiGV6AFM8GPAWa+42E4D\r\nLZyQ7ciLVuKYTHCOu48elufcqJcKZVtkThA=\r\n=+4c+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/touch-target":"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/segmented-button_15.0.0-canary.88db01990.0_1657626048044_0.8709979783727315","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9894cba3e044e121d09e65a50b68430631d2881d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6432d8fd7.0.tgz","fileCount":54,"integrity":"sha512-aewytIkjOF9MhvdNU2kCK3WqnNDG17UmHYd6KUlxzNhUzCjLmiY2MZFXT7n4wibO9aPmh3W2db4a5Sm+OGIdbA==","signatures":[{"sig":"MEQCIG7E4sF1ymhgluKoHy/W3frpUviBWOLMzcjAUXErUQuTAiBlkTTGyIeYuymsNqpjvXRjwSDrnXRI5f89yiJ0yuILgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8XjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXUA//fmB+yWyCV1W0/arOifz7BTYz+8V4vo1e8B8Zi0YtS16vSzYQ\r\nIjiAlVLA5lX2ta5YWlNuU/H5VxEym2XNMiThBNcQGmNLluBKUl1JaxOxiHoI\r\nbi9Fe1fbXuheOWpWKu1SsTO419RefONqCL1H7XQi/QmGS5pCMq9rpaN9T6gY\r\nC0XKVgvbwQH00MwhlcUdd7KMjSjuNBIeaZPF9eRnfxQp5BbCnTiNhzLPa+z4\r\nsgdNsJIDrqD5zD20+qtwjPxmfUGGUDGJ3d0U9OEr0emZ3YzG4LcBi4eGH789\r\nNRE1rJ1vgqxbBWuUg+JYpyep+CNla6/MT5y9X6iaRwbE/AuVs1rI8gy4leNE\r\nW9LAfvM64hz4Xu2psh8EqfDWKiphulVPW0Zt7v+LdRzyVhnmiwcW+D2uXxgX\r\np03PuMy7MQVEjJH8nPhNVBZHgCk4xgzd2KI/pBdiKFpx5F0Xc03Jf8wZWrDe\r\nvOL1wS8yiD6P7Y/UrP6na9hTW9SBNnhiVmbPiUNeVHgUHOO2Kdv38W64MrOI\r\nunsNEJBwHIo1GzJvLGXt8dY3Kdjzlxe2yaGxK6Gp7F319SGc1Rfk5CDVEahB\r\ny3aCrijq7v5GCi2SFg+Y7PB54QXyhvQurxoLy7ojZx8VNtPzypg9m+v85RpN\r\ng5eC/j8RuBfN2Xo1v8x5VSsTi7e1ktlmJXo=\r\n=HSwV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6432d8fd7.0_1657783779483_0.39313697576902484","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"270dfebad3ebf5a56490fed126ebc6d029bbb9d1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.085f9b25c.0.tgz","fileCount":54,"integrity":"sha512-sHgrPuARKd9PF6ChjDttE5+IUtu5ch4uuiWpy/SF5UN17jtDqt3kPrmEAHIYlxG+xsHYRYVj2cuZNdWXsq30qg==","signatures":[{"sig":"MEQCIHbxjTTjLRSNX2K+stsOuzOo2Cv7AHPPErFDMBAzPlotAiAcFJPPm2Uwu0FsmobpBQfgEiSh3YnlURNO2g7rm06yHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EXdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrikA/+OXLtZDUT/QM8raaRZPkPqJW2uFkEyOgw3PG6tw+83Z8jIevo\r\nf68ejVZWQ5/NpvyLWPCk7ZClw1U9Zh3PnljryxG84wW9gWy726KVRkJMvUvD\r\n6wKshb0I/ZAqTrnxpUjsQwRCJA7nRUMjRMgarAr8GH7IgZ3HEMUTfaTnrOf1\r\n0g6C6PoCtX/5kBcgmal6WU3gwrhALVjdY8bvh8MPrHYADcnS53Kz207PmdZd\r\nuM21Wku3ctx+m0Z1vajBPw3rJXq9cQoCPg9Q9ALR7dF+lhRnZ3py26JaeSij\r\nzCTdCjTnrwpBHQc3qmwX2YcYWFamVA1lcRHPV0dwEMmphrO+nLpOxsdr2TDS\r\nyyqEqnRaymeFP4ov0U2dDkcfw1bldW5dylmj2Hz86uiYmnZ+WZ0K980uZRR+\r\nf/2jYrG3hf8wDhCC/zCG/Nbi+feZrCaXd9//on549tBCgLXU5KokzMy5/xa7\r\nsuJ9DW+Xze9GwA2ucgd28CbJ+futLTw82gGdhQuJZMcraU1iSpNjZQpY70s8\r\nrMUGaeA9zLp3daOY0lvqJme/47xhUNMAIAenXJEgakFYjgoSEFYX+zoTHaLD\r\nWEzPn33cIZiE+6+G8G4DZHzDvC9N9cSxMagIqGoWaxVI8orE00ciVEFMIJ4k\r\nJnh6iKIczmKdeAm7juq3BSx4VROGswyhH94=\r\n=jlFL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.085f9b25c.0_1657816541116_0.3490884250152242","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d32216113b113a2087e9a444e545bdc82befaf2e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.39f9424b3.0.tgz","fileCount":54,"integrity":"sha512-ItoqkkiDoK5nZsbvmLF4o+hREONQPgVlMi6mft3ywPUU9Uq97/Ttvg5W1f7SBJLe/tHBZ1R81tyLXHZQ+9I0ig==","signatures":[{"sig":"MEUCIQCupLdilAqNB7wkzKjMxLcfs+GTieUeEyVJxO2/rcY9PAIgS7qZRCIaRW6tGDpvpiP6uVWJIR9YsuHJ6r+B5yTQZek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ez2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3yBAAjyuzPqjYDRReu0OIw0c1qNHiYISCJ1gz9QVVUE50pt6g+Aab\r\nN4CfAmvA/j8VAAMvTzY6o97gzhgZXDgv6Ab/fJ/4o4c7FHf0v82g/11ppkil\r\nZkevJRKmZ8YIwRLSG8kgo2LVzNxdbR7em719OBAsdbTmMkazIEdPg5KIJLi9\r\nDYbLleFZWrwrlBK3N788vvmzdvL5qJt4OrPH2PNPqTqZZs3QIK/RifT2rLf7\r\nmP2EGhch0vN5vCb24R3TdLC/kgsE7t41LN152oNVt62zELcGzJYLldqbevZC\r\nnfAaA5h5RXxL5O6yD5tV4r3H5JLKjV7lactdt80TTS+v2jqKwPz6QsT1yYjk\r\nGuFY8NYa5r9iTzUC0VkPInycc8yJ0YV/SZP+GjKCzaNZQcHpT5De+L+UrxQ9\r\naI6FmZ5vjleNkVhkPbj93FopfFMOfdVSfyD2IcJaGBWUg283LY2EEL9P9Kl0\r\nfN7CrFmgZeTHVjdoscIqxFSLJP4NpR6H45DK8m4rw67Cz0W73FtPRQINnp93\r\nXPU7FFBA/VQMs5zYRnijDy5At0+yj/pE1iwY+uURArDY4FKAp0oVseKpnnOS\r\n0VWNoAWWTCl0AD/6zdsNrfojNmylTbBiJ5w7AiPtS63YQTJbnKM95TX9milT\r\nEoSutiB2oBgVeVz1CGG6SDcZ7iHvCWcJCHU=\r\n=3Vjn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.39f9424b3.0_1657818358383_0.9116892970338055","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6873dde99d808a76314c2f7715e3838909d28323","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ae9fce587.0.tgz","fileCount":54,"integrity":"sha512-c9YVWaFQnltpvIfO5oWnyVrNFEuSddR1haagyEc3BEgzM0QUN5MhpF0XK1JmZXkEiAx2Tha3d35AjIC4x2FyVw==","signatures":[{"sig":"MEQCIEPP77CFByurfMyX6kV4ULB9lDeIIMtYCpN5JoVwh92pAiAz8MNwoVVOwAvRdL1Jz0HuLcsgZwjzPpycwZAMoKvjCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FuxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmravg/7BjxR2/yjBsJ+RvBuNfoDvT/BqBc8X85+gZV6k0cz7bMV8rsr\r\n64qkxclMMr9w37V5BvG4agYyfLzmZulBmFefYsCZbvGsggX2t9NSivMzKMok\r\nTahdVLf01znS5x5eZJl3XD3A9/CqNSg3Mqj645U4TtwnpHM5kEobzAEohtU0\r\nGEvoJk0H3iDIf5CXvLSgrc5dZukdkYc/zWSBXOoadRgvSkX0MLDidTSAQVtb\r\nnVRy9hhjZmRod4RCui4Lv35AAS+PshTZHFAkgailVgi5fj5HzaXG8PLj/Yxs\r\nMBVrcp9NTlbXejZO1J8P9LDhfmXR5wcFeUnXI8aWXM/eDqewqrxTSOghOpLj\r\nDa0cvhtNCLJw2bKuHde/dqZr4E32Ei5Yv6jz7nGSgbZJ8kelwv9NXkvURPM1\r\n9hIe/fdyH6Um53g68wxnWfrsV2NzC+E0NmEsgfqPPw+WDrZ1Wii3oL+jYAer\r\nL+i9eRfl7lcSMHMZZ9qxOJV/TetxZJhgAId4Cj8CIGdbfDa4IXAq/1Kt68L+\r\nMuM/KI4i3SoYMzmbVcozdejLURyqLIp2LPEii4b6JH4MSoqPARUV1mHOM9gb\r\nVkh0t9urPap/PdnIPKRnHe9BtWJM7AAUI01QiwGlXucwbBk6+U1CoHLcfMdn\r\nsR+LqqD19lbJx6GyubQjiBQAX9qurh2Gvwg=\r\n=gvhe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ae9fce587.0_1657822129175_0.8788851594705649","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8bce054862664411d4359f070850c73523c825ec","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1ebddc343.0.tgz","fileCount":54,"integrity":"sha512-mZnaUkS7dnr3aVq4T9ovpGjq3XyeiTVlnbgbE30tOknTV5RFHa3PzsqXL66Wi0ugErCuxeCrK1f6OMlBbS7jJw==","signatures":[{"sig":"MEQCIAjT368p3COkpaj0jHIm1xNWGA3JvNg8vLB3FrTBRcMRAiANe+eA7BoUp8JIPOiVDdF+7CbJSjWlv52EFo4oKAt7Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0So8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfiA//ZF7b3Z0kgyYlSWwhOiSE5t7jSrX6WHF4yyA7/fN7nVQKcfZd\r\nV3o2KpxZAzI3gEuGbv1IVKGonp2J5OIBwB5c5r9XrISDWTZhi2yQGx5/BL4R\r\ndRzFAr6Gp5vtqk9QBwmo7tYn+19SI437mU+9aVc4jToWnx6VU3zIitTClZE8\r\njbj+yZYe4S09mpoSBImXNRHu1p66BBD2DYV9rbnTQxhuXqe7KYfHcFwTtAZ/\r\ngydMqkAOif+247D3oTGwZS8vrPSSLf03ju33OcC0WpNOZK8RlfbCttbB7V4p\r\ngpH5kZbTKq9MUYfc8eFH+99Eag4cI2HFdFDJsVMmpHWZisl2YdG65xXUVB2q\r\nr4ag3BzyvSPm+mWIPe+Tki3S1TFyYtnzU4tztpC5ngTNIjYFXwNOENhZPipG\r\nXLwNqpRuGpwnzt+xMYT+4Zuj72K/qCItuQWOxyOMoJZjcuivQalW8nkvACt1\r\nmJIuvYyIqcFk7QP9Haj0AGDT50U2qyRXXRq5qeqa6BbeOTFfje6Z05GEgOk9\r\n1ASJHNiXFgw0xZorhRZ2i0OmSQCgWzLcTTXIxuZ+F+BYpCtMk7N7rGQrBhJL\r\nvA9XRxZDduB2q/aK3YopqcGkciiWKUgaVG9O/fF/qsnNcdKUeqN2mW5Z+FXa\r\nVp/lUpGan9E3LCBcbVf691D02l77CaeaOJU=\r\n=M8AH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1ebddc343.0_1657875003874_0.11096883900757959","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5502bf68aa3c9d975139b1a4ce5c53838d2128db","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c5018840c.0.tgz","fileCount":54,"integrity":"sha512-4jvsqRmJ51Nik1EBRf1hJ5z0yp/HkkMfzxk3dGOuVRnnLB09ZZPa+lluxmW7y4ex45WbBpuWRAjSHEjkIb79CQ==","signatures":[{"sig":"MEUCIQCAZq1LQPIyq/Asox3cb2tAZGhZwFF/E2xWh6vR2KBtrwIgbPGp+qNjKdKOtpePCtQqB+kZBhljl9MLISKRw53iadk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1StYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDVw/+ISVwbnXJLsYwImJOCAb97HyTLksD/S20+WknB/TaWz2LhfeC\r\n2nNTWMol0G1LofxImxjsEqm7fHCysAYY8bsyF+4x4zB6bieG+hrkjX/I2m5e\r\norNY17OPq+JM9VAK34Dlj8FHqcRxDt5c6wwBLn1ou4PQnYdU5lvE0srB+3Al\r\nmy79Ro+qlmBWuDDHOxnDOUL+GbcPMRvWZ3YLkW94odmNzbwueibD3z/L1ZI2\r\nBcQadMiYvycWavBMTTkL3wndsYLjjVoTPq7a4xqbmKspIRtBtrjQ+duxSqOG\r\np0ikAd1TgL4sOuMzlXhc9PVCG8oeE2tpOiXaDReVXGKPWSDtqhPAGDIJ6JTX\r\ne4UxfMOdLZuVn4yQ6zVnpAptk0Xntw3O/07kzxIaihkoWN4GVbkaAy78Ftqh\r\nnzcORNYZoWCbvkPj6rtUPkNwuvrK8PC31EOGNlNvmW3NoHHoKMRmumjLf3lP\r\ny4kbC4D0hP1LlG0tZcVQ/lCWVoIYkmapftPITv6iO9k0r5Fcs9QAxiub23MX\r\nZBvs1T7eNqr5ieerxQktmgulfQs4D9Fa5Zeldya91/b2wcSxNtuJQys7cWWN\r\n+gdt+jx6PTkBgTSENFCoW8j2fRbk5I61qHZBNGTokd+02La0fipsc/fShI9I\r\n8FHFv41/5xVdTdLsgqPnoJ5KQHELThkN4NI=\r\n=0ZfJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c5018840c.0_1658137432476_0.8070293422335415","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/segmented-button","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c0150f4fd306b85e62c4b281c1b26207dfef360e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.551b40d18.0.tgz","fileCount":54,"integrity":"sha512-Sqp4Fa/fi342AzR0L0pvCf5zpTyLmT6TYJz8fkuHuB+RMEPnjlwGyKTz6VcHgpfilzfS3gzTJ5MwSmTTM15ang==","signatures":[{"sig":"MEUCIBj1LZxnRn8vz7d9yX0KOPbL4ZM969nmzDShCFGoMKesAiEAuqhELEC3uzo/lfaVL+pcPjIoHPe9ZhEOnrM3gWKMY6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4BhAAkAWAyqpuY5fOkKdsJvej2z3z93bq0MoUN5lcZyneNn0GwOnZ\r\n8OEt/IlRBJbsItvj9r7GBRs89wQA5OKhHJju7tsYuPArE4JFIpS4kf7nT8+v\r\nrcchn+srwBUnA6gIiHcBd0+sydXqRgZGGv6e6zFsoui39UCtCzzNjZQErvPE\r\nadefqC3ueBs6OIR1rEKSRRy24Dy9yh4mofzRqkBEvzLowGSGiX/Eu0RaX2PX\r\naYK6Zof4ckiRmTobpEf2VIxijakmZSVoRXYEVj5B5L1aAj/Zrd60BdqOpJTh\r\nvbakgxQZANvNHzXMTAPERK0LHnrN53cciW5NG7UZoypqqhxGin6uMJiCF1+S\r\nDlvFZTtnzInyPbp9QDsN8uVIin70iU0kaOeK9DnQFNF4BmdwjQR1piru3Afj\r\n+6NeKLup1JB8bGqoEY2AewgTBw9yFLTxPEtm3UR12lvfy2OhfxfRU2lCmSaS\r\nB/ZkjzUhaooSRO8xy7XKFtVaO9j4tE145gxsCTMqVOlcEC7U+1Zith4eHGIb\r\nyBOZa6lxlNAZ9lWA2QFOEtH7rZGKrmDDMb6GMh7MMxuYJjTkVvuweNYZZfqK\r\nVwPzlRJsS3v1n8SIpuHYLkHRMaY279Iqqa8gBl645tLflaC6zCHE09tpxinP\r\n0lRHK3EelWsScAKsj8458rycONPPI5Lcrbg=\r\n=v1Zd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/touch-target":"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/segmented-button_15.0.0-canary.551b40d18.0_1658138509506_0.4073576887829393","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"70374fd95636eebc0cfcc509c1b4189e8f35f01f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cf9f12371.0.tgz","fileCount":54,"integrity":"sha512-E9ar4fXWbpo+lv1Gsa0Bb2Hxv9Q6U61RNmpLWd/MjeapQmScZquWFURHQVGgSCnZsN0PEX2AHf4ZY1vtqWBKEA==","signatures":[{"sig":"MEYCIQCDRMQAglz70UWA1JGNlPEY2VytlkcOeS+1uBJ8z0Di6AIhAL+iQIv2rYiyWeuKr+0KSkdSr9ciHnR0ug68jgBf0rf2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TB+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGdw/6AoGgSNxhMuEfa+XXWrOCHP8M86+r5qt4MQqJLcg8FyQf2LIJ\r\nBxamJ/79/tlir9KF5/x4uqVKDThX8dOKkj8wobk4qV1Z9FVeowEqkwhQVWPJ\r\napnQjCQnbcf2grWS6Scoj/FSsMRiBtijQRFjsDNdLgTzjxq1F0VRUkkiiuZQ\r\n6MjloxHZahzaRLuCM5L/0pzCxaxzF2XGJdiv5MXSihmyNRZuibw+t5Zcp+qJ\r\nyRej4pZZehtnrglWTPJgOmL9VezVBs9ftVxQsV/q15tHzcn+KKSgpcDH9Pq7\r\n1TGcsidwKzfVyTzHLTeKmoq6cdoazfsiwk+jHB6peINj0y1RNdy9zYq/h+dO\r\nxgg86Ozjxy4GHpR+mX+580T1ToKulliG5NqXpjFcWi343iQUaHd/2U4Qk/eP\r\nVAD45O3nIWb45uUu/W1n9ClwgyX9NI/wa3kgzpGNZTBILZpRpI7URD4j7TjD\r\nx+NpcX7Ce5fWK2mXENuVx/AQDpmewwcOozs1XRPr17GbAzJI5DhUi/45Iq6K\r\nabcOPgtFQKcJWARJEHdjTm+vm9N/8sHW+N3uMXTKessThqmE2orF4ZJ3feG2\r\nD1he/QOxM5vDcorxH71iTsOOhVLaSi6frLNWfvOXaGYLoU/6Xw1lsHOf8XD6\r\nqqV/lAmvbzeWoUyaFy2QbvyLh3LtdnRi59A=\r\n=PJ7s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cf9f12371.0_1658138750070_0.29352885686309005","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5d64995f168f59c21cf23f4de9df7a120496c981","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2797ff8b6.0.tgz","fileCount":54,"integrity":"sha512-T98rY1XEY45Qz7BwE9iLafcia0L61cheZwC5Wj//D6RFG+orPUHhedg2G2nglvK4b0DvwBQpd//zQbXkNbmG4g==","signatures":[{"sig":"MEYCIQCm5hI4WVrlly+/SdDvxF89v8EpBfLj4UMQkQhz7oIaBgIhANiugUCIKWABvmamJ3ifDg2O5oRY/74GgHg+RvEmt1oF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdzw//W8gxFEmaCqffmJp/nuWZHA/NixCvmDXDJFGg7+OiBtuqo1VR\r\niFxPHSXeGpHC4Qtw7DgeAyqrH8lj0zT9zwxS203vlEfOe8OGHCzit+hMCW46\r\nla+uYkqB2w7JAV3v7qS1zOZl7yyGCXFt0BLps0ldZNEXAXvY9kxiORaPyjtf\r\nMPtOwdT1zfKLeQnMG8ShXNDcxwzVcjW5sliLFlhXVMGmzJ7ojYjlGqh4pG4S\r\ne25Y6OF3VE7+tr8ztdFkOsuOyssPG+Rh0Lm1SUW08LD/gSUYHkAxaZTWyl98\r\nkiikItcH5K8KHhnbkyIJdktD3DacB/KJmrPyIyuX6NxHOiG6n8/CkIaUv4+Z\r\n5mvDkK/r80ybnG5Msok40Ene+Q8gYNOmkdSXuPA24wYnEenFT+w/j9Aav3Ia\r\nZVXJG+6NQYm6XriT2zutAijgKwOVDgdOp8LxpsqX3+KTGWciypmYwaOOONz3\r\nbAnAwto27KPcvrckzHhOGUftms945JlUEuDCdziJpc4EkCGAkkbdU7M2iFmc\r\nJqwmUYuXLYGB1GVsM1wFAh9XG4VnqIoZmpKss9R11UeN/Omq88omvq9gdzAP\r\n4CnKpcBPLfsgNtzg89KX/Nb6YX3z5rBruYiXcAAsCpLey8RwxAJFGU42FXey\r\n8M6leY8yiA/oY+qKo0VRYBnwtbkkVx0vBas=\r\n=e9gh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2797ff8b6.0_1658190293154_0.40755858169559134","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/segmented-button","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a0137271bcfecc9542cc9372549ac914e89d1656","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.110fafa17.0.tgz","fileCount":54,"integrity":"sha512-eHSPuHqhWSerCiFv/YhGlg4o3LwyDCJ6JTD58UOuTFopRJPKy4MvFmw1j9lhdiHPy7xqi8Lf6oMPuSehnfSStQ==","signatures":[{"sig":"MEUCIQDLvRsl+s4Gm6XmiHufde1InBKDa9M1TgGwZzIsemTYggIgC+9VckQ/KHSBrCvZ341aEpZeCi5iISPEkcBEm8m/yoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOQQ//RfvopcvroNSrpcvMYwNMx4/39SqZ5Ph0PowP6/M413vkdYm8\r\nGgMiT4WGW7zSPQPXP0Q1A/xPq+lFNKaXTH1+relDIzdfGLQDdQXJOmwZbe6u\r\nXQxlgdSvrTLyRgOZEYGg0X26l8y1YWGOmkXcyyMNdPqp7lJIpp3PoDZGu5Jj\r\nz6LkrLs8Gt9eVTLY6qeMnjAG/KZtnx8IMxqRuCN3k7i2u8dce4kUNNAr3vAv\r\nbimpxns20RFvJFnktZB6M3GJFvDWM4LVy7fps0/aKbGH8iz/72E/qCHHDTOn\r\nhb0cRLyHc+tGpZeuWwWCsKFDLYgXlbGuFS9xuQQYf8mD0QHpDTYdrSwxZqZs\r\n+EU+8PVAsotAf6GlENfI5HumIAzncUCIKUU7X2DQ0BWQQkNKP8wNw6y1rQFo\r\nDjQrWG+jvO8mq2qgWnQr69V9SmbxytWtkcgCtz2Knh2L8iRNXT8jCR5Tf/B+\r\nhUEOEnoet1alKopPniF2lkxCz4GaHhJyTVrClNHY4vjkarW3g3nhroBZPwcM\r\npDsesd0SGe9DcHt63MG/D59l41hlF6+3hvXlgub4ZqWYpDt8m14Z1zI3whdW\r\nNwe8EfOWWcdms0zx/APyiR2pSTTkaTWcj+A9m0jc+N7iXvst+oj6RdrEZEb6\r\nxOxmA/i9Xmme7TcmDFl433K+7wdedMkpN98=\r\n=SoiC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/touch-target":"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/segmented-button_15.0.0-canary.110fafa17.0_1658303244444_0.9844373804129758","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4158ef2bec05d140353067aa027ef542eb32f119","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.386ef1d2f.0.tgz","fileCount":54,"integrity":"sha512-RGHDYRVYM4RzPuyRVIfomphnZw69kzwtXxVN5sT4cGwiZpaXDqt+tm86bf98MGO3kJUsYi6pqyxwwbaixGCl3g==","signatures":[{"sig":"MEQCIErs+/Qv0K/KI7lMcepja9y271mfHlZu2kVj2hFHqMNuAiBkfWgaMdnvDY/P/7roSO0RiF/3GdzS+qqpWQThhG6H+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYrw//adQr6nNRa2r9cHXV3YUZApT9nsVznEhiYLxUbrxOaSKi9r46\r\ngidCjdLYI45y5JOIShZIbszcDaVJf3Zjpxd/Om9AEtG91FMQZKR3QDS8aWC1\r\nF4TD5/kIda/UbcwPrByoLvBegrb3JVtOseZRvLFzd5JOfWzWDzEjJXgnQLtQ\r\nxqPzUu2zV2021GQfQLswtpHXww4NazZL7YOimE4D5GOF9kmAPHAQ7j8zqh+S\r\nG8R2wKlNBlgO45BI5e9pTN2nlB4+L3ChtHpoV3RntPCOlqfM46Du/Ph28qG4\r\n0M//lpvebUSeA/SQt6FyMChXRTWkE6lQVyjrBPSpyTo96nZnFfqmpGVYlslP\r\nrCVi57hAxU7pcPKOyJB63Btqqip/LT0DV3llyw/k2vnZdtTRpFtXjsiCiDz7\r\nOXXqkRwCCBNXtMAwnOEPXBuv5u5gD+K+dRAZIUd26Xoz5LYGH/n9+XLHLT6o\r\nmPZJmBsKk+nXReC7UuJUFL/18P4xNcf6WFlzcYQ37GeqEfEt+HnPSa+TNmQD\r\n8ftF9qS12UjX+6PRrncdSeh9FjYHT2XQSTIRsDd1pMN50Vt7Nt/jbsta1Bl5\r\n5Dq3oD9fV6SkEtPimyb+74V9FS4sJ1wZwnu2Pj/rIP/ZvDvP0g7yY8dwfxV5\r\nzmfWS0arY2g8QunaJV+eaqeW9Zlxp6MWjvE=\r\n=/HQG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.386ef1d2f.0_1658341232145_0.36712094657436767","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"724cdbca26afa89a5be3896037bf0982a0eab35f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c3924efef.0.tgz","fileCount":54,"integrity":"sha512-LRHdolbb4uyiBpYRlZa2Ok9jbJXikdMJaYl+DfK0/ZbIkCBejuKeAV3eN18rSOQX2MPTal3H1FUiVMO48XCigA==","signatures":[{"sig":"MEQCIHEruuBrHkv0JBw1ZFTFLmXmatpWVG6QV/uxL1MUbf3cAiAT1JeA5XX9bLRsPxh/mo4af+cKhs6ESLvQONUEiYEsqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo4g//SsSlf4zN6Ijoc/tmYKpOTLueHOu6RlNn0aEHNT05uDUHfMJw\r\nOP5gn8j11P66H86WECr1Sn+b7bYOSF/XFMTam0yQ5bTK9qponfskG4Cae/iH\r\n2eiSYn+TKHVYD37FLyn5kPhRP6woU/GW8xJqrr9fgiyNCGa6s8W34TDAHcGa\r\nRDcdMIqP7S81eMlk2wEAndT1BCoiWZHVrr4wjwjVbnkxb5KeNt15L0dOwQeF\r\nwWyo+aO0BU4JJZnoGDjibQihBm0Ovv3zIRXWJZTtdubyMsOGeYLvIiKVXoIb\r\nP3QAriABN8S8yGmCIuE4tR6mubm5Cw87DV4w6RS9D2tk2gy0Rcjy4GL/DPbB\r\nQJa9TyVPyCCFWFLWPa+zVrlLak/CkGkZGJ9hxSjqEQgBA+HcB4/f0rG0xOgY\r\nFm/sMsAZceJFNw9vGRQdkUsHQRT8MTrStlBIClL1H36BpCwjyM0/O6+3HNuc\r\nCxrCbMqOeyKXlAPJtGR1hFGEKxIdj8n7LNKlIipSaeHUU47+d0aF6nkGvkRF\r\n/HCGZxT2WW3VwPTjsDoxcN+1UbAa4ZA7nJ63afdO3cClwkeuFEjPVE/IL6ry\r\nUZTIx4hPCsB+/M+CFGFaMBy0tLy0uSDC+j08XWPypaH4pCnm+x8454dl8YYg\r\nu2T2yFRSWUjuloOrBL8BQnWwVh4cWT2CEFc=\r\n=Jgha\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c3924efef.0_1658341825258_0.06468521590578158","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7d153f7cffe714b5e854691ab60e6886bdd4ce6b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cf5c5907c.0.tgz","fileCount":54,"integrity":"sha512-ZAWUQicXPIwk9+9Vcyw2XZISKEzVLy3RcXtedjzbrv/Hxuz+BKmTSic71W8SiR7sDwyG7hzzGpL6aP6l5qGn0w==","signatures":[{"sig":"MEYCIQCURafpYgH8LzpkLxvsRqzPugXQzpKtLry6pQx55gH5owIhAMlblJXvIzxMOvLHRzAWZbCJKZIsqaQ8cN02zqOIIe98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhdQ//cuIrLT7yd97rTKmLoINdeVbQ6AP8PpMgQRNJQb0U60Svzt/b\r\nDGHPrYEW9tB6QfM2miWiLZzcW/nkQ7OXTIfWX8JSTJ2ms9ev249Gbtj3Q47z\r\nevT6I3nsXTuLa3JX5Mbu2cDv+zbm1gEHI9un35uOIaJ03BYXjkYxp0yI9+t8\r\nspqhuA4pKZOjQhXLBkOWCKgdh8h2vdMu/awr0LxCDvSWdmmzFcJCDGGeirfJ\r\nDS5rU1IMf2hl2EEMyYL16j3MjBA5IxTkl0Z2dkxXJI502CsGrSsyi4Fz+ZWt\r\nJnF+SoDpClKPEp8uw1MkzJMr7+KgS1EPJh76rYO7r/90cQIN6tQNwsM0/iro\r\n9S7fG+Htjorv8A9qcAtgC/pXLpOPyyLukezAjcg/HcR7jdRB1VR2qiTGMfB/\r\nnAJVH6KaD6i3rc1QWGvQc540RnytLuCc1WE5Qhn2/epwBlE4cGcHIO1TiIHm\r\n9pezaKM7trUcNm8GHoLAFqM/Tj7WQyoPFWbPqeCCC63i42m8+nkVkm0kK9DZ\r\nEyFcBwVQIX22K6iZ8PlCRBwOS2wUu6tAcZyx8bfRQEwcBNG/Jf5dcEh3KaCB\r\nD/ibdWg74NcZh55jde6jk4CoorA8Dd/ehykPKIuXcm82pSyILB4+kus6Y1Rs\r\ngtVjSjy/GqsULa9z+oYbuHKxBgL4wUU5m+Y=\r\n=wQwU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cf5c5907c.0_1658352151162_0.2002500629439521","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b54e638c4ad7a478aecb1cdf2b0f9fa7775f81b9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0617e2319.0.tgz","fileCount":54,"integrity":"sha512-ro7psqte0tEN4l5ERdvGG9Mpl/PRfKKtWTGVJJVjRus4eAwqOPMqAqMb7fnooiRcv8gSDA5XtiusABHfJzOHQA==","signatures":[{"sig":"MEYCIQCYPKMAcGIgXjVW7pzCrFKN3aPICbQgw0w3Gglh1MoHmQIhAIL2LNiFRED6gAV2TIT8VqP6J/nScEkoYaoRUJq1BYZt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHMQ//UEbK5EhD8kFcTGDjm9QVLlLah3jm2nS/6/qon1XZzkbQKPIS\r\nWsgAqTKsHfM1DwkJkT2+Lu+OHVxdR/+A5ifzY9Ea/F8E1xPJVrerzwxHRki/\r\nL60fhUalDhsihBmZB/qHexn7lDeufgEDkz3sOViPl9/I9aHYmcww9AgYosdq\r\nYBUQMXlnsPVDYUzCq4uFPu33eh5kX8pLirJzZkSWLSrOWDwx4eD1Bn14OX7V\r\nC1ZIZ/YMzQFcQqGnabvwhzBJzLk8plS9Ln4yFxN/ebBS5hGxhkuHYAZQPZSo\r\nC/QeOiiWFcedMFrwkA0zrtoFnxQ7PbWHjUXGt8LZY+XrS3bS1Uj6qjqA1m6/\r\nf8ThTzP+uDFNv128jDTl8qHeP1z85pt0qbSnGYmr1+F7QoXmTDN9Q6QZpaCb\r\nitxEFNAqf/8YSfyNGBphOZ24SKqZiRnZ/S7dltx6CO0vDbDMoskt1O4GeyNt\r\naZ0s8IQzub7/Q4z6kHP42Em89E49xHbHNxiuIl6vPZAHQ/QuKwxMVF9uLtiL\r\nokzRo5qW8Q1L6k+JfynJT8H6eanORaoL3D8m9dvtPLh+CfAKJbPuKWy/k25s\r\ne34VhNnqM6HIphgEWgTBLAWhb+j6zPXe1fQebB2WBg4Rf6gfhYNTVGhuEpNN\r\n6RX3rnYqeuWA26QbwFtSFbGD55Nj1xIpYgw=\r\n=0p0J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0617e2319.0_1658353247138_0.4086121254352286","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7024695ff127520b30101334e93fbf1dd262889f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a743b7967.0.tgz","fileCount":54,"integrity":"sha512-zIxnJhGT9CGRBVe6XGQbG9X0ZQ9VHcpO6pZEKOlho6rCVmTatOJZFtbyL+RMmDTOZvwB+VnvGjypjI1Jn7Bv6w==","signatures":[{"sig":"MEUCIFKLItSmprlYGHNU/wJt4S6UK1RVuDlq1TAGA1MfejsRAiEAki9wrP/uMxxFQuBzgiuccjbV5WBf9c0aUZUxXcwO1/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HpbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMzBAAlYp8sOpefusig0z/ou3XXCqeAbgCtUKntAg/o9oFp/T8i6Ud\r\ngakx1SudkMafDH6ArRyAvcrYKHKE6Vpt72b1YygA2K/hgjF3snlkkqnYPxtk\r\nLz9NCqVH6chNuSHonIYR/NwV6NVSKlovEyqPEReyWqR/uSrHm9HxOtKbqIBl\r\nX/rDLxzSlYz5ZG2UNDAzvQ8fdxgR8Qf6TqJXkSTnISrn6gbf7NIOEf1RnlV/\r\nJ0JAeYhezrZ0G5jE9jBBi0slz2zt0sSVpoW+ktCLIMK3VxvYVqZR0fqJRbHV\r\nVzQ9dnB8j8A5wN2Vudb2KTbRJtPfW3NAzYBDgkL9k/qtEhLaGzE3gqB9IO7L\r\nNhUaEqUhLoSmROJaSPC08gSTf1GpQKnuYBfR8NYqe9evVKaneCDTV15eshdY\r\nSsiGmnUW7wdmGcW2xcoSMFtM6f4OplvqADgk77ncxmpyPMZLYghOyLKxMx1X\r\nItWaNz3pvRw4a65Ob3L4aewrHuLWfDal5wr3U2Xid8ZCsMTMU02Gl1B0/R3s\r\nIwmAp3sPQT2U05dh2Opv6xMG9oH89cucgQ1C62J1TCHnFzOfbmcXpbQjxhF8\r\n9JXWCUaKamoZXHy53KCFAicMVZNsmaZ+31LMhig/PKXBZ2y0fE7K+VX9NSLj\r\nK5LXEyqUqtWrhs32qnfBA1EEpqE3OskpxzM=\r\n=KfRv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a743b7967.0_1658354266888_0.7675944294809005","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af766d1e7b6924e440718dfbc95fd8703249ce1e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.69fd619d0.0.tgz","fileCount":54,"integrity":"sha512-Fndmdhxru3tRr9Zo1qyNA3R4sSjWbzVKmvuZAkROikRfJbc635zbsifXOC0bmmrFEPYQtvb3k9gF0RlBCgazCA==","signatures":[{"sig":"MEQCIFTa1aFDocVS/nHiYakgpmMLMfLiU6XNJdYjzSvfV9OQAiB1G1yS00dbTRdTK5mKSKu0fnNqvUJMTk4oUWE4UeAoRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvvRAAi6610cpDjTz7/BKlc+hqSnbV3cmEeweVFYkSXcXgg7zqpUOB\r\nF0L6bODWl6JZ1HXZv/FLDqWu/wsR9sJ7T8L+SSuQP5AOEilA84619GiKTtfG\r\ntPO4aVwnQLk51EF56Znvdcwcq/0kyOFm0BLFPpRuTjD9NtISq9K2n3A7A351\r\nyA1GXQlDe21TsnMLAPxuDyR20wzcMzQS95T5fV2H2GikkNuulg11M4mG/kXB\r\nx8oq6KGY4/3czOJ4eJsXzBdWRAAcm2bZN+xLVgYvUyUkmfekx4g6U/zjDyvg\r\ne0GIDlw55GFYSzQdh8oFpLJibKLAOEi4KFD2ORtQ1wQDDJ1ejfCfI/CTQOYb\r\nj5603+/7ACF0Nk1VMz5h7H8eckB0VLG5cPxkIzRXYg09wgRC08DE/UF/ay4J\r\n8U/2vpDgpp6bHa6fANS3gIoZkFEExUJtkpOTJJwSOth3phaJ+WCST5nrF+ib\r\n4eFXTNssHLUG5LWU6oLXkTcAjmzEQub5XADqGxeHrlYOvZ99WmyyrFd3/Cvx\r\ngBSPUUxF/VFuVh4b0VOL3zJMRTKLFkdm3ElhlFEROWwBcOVDppiWr5c7Jym5\r\n1EoTLGSAljZ1ovrPjSHLIqIwO+Qj7gGT3evrcSHBG/bhQyyhLh7JxQnIIZyX\r\nDHh/2tqJzpwUatfvM7LOKeBxwtG2Ox76X74=\r\n=trrN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.69fd619d0.0_1658354995002_0.04947985838048918","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ee2f3d248faf73d25583d9294c3d43c75044cd8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":54,"integrity":"sha512-Tsre8waFAAvKgqnfucl6BnN20qmU8WGxwCs9tCBFRN7f1aZ7TXFa7j4HEHTrHDPzf8JKMLLsKClreXtheOZ6AQ==","signatures":[{"sig":"MEUCIQD1iys96iJZPGuc5eBye3kKgla//vcqV4aw9Zm3PBMDSgIgdGpV9Tkh05GXXJ63RplyqU+8cxnGAx+HMff+QpqFv1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AU/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbzw//YUpCWRGCiD4QoVk9yQyXBsk0HZQwWzPTaIvGpMrFJIw/slse\r\nk4fsrE08zG4cfVL6MaKj1Jx7PIa0yY2arF3eKFoiEHEkvQbgl9zTIn5jUCM+\r\niI/4AioHJqR+27yztsX6skYoRkoVEUEt9d1e3RrME5Ua3phtoG/fW4kJr+kZ\r\n7wE9czzk+jLyUYlcEazSsBrqM8u2moh4jqtsv9hUAmxPXyMNc0ZO9e7fGx8J\r\nxckj848EGHOHQusfHGosJ3n6OaLda9ScSFm3Ec2RqaHuFn1Jf87Qeogp62vS\r\nMiT5fvGC9b7ChRiAx7ldgT2Y4JZR+4bwouWKvNY8uHound5i0MVjw33T/EjX\r\nTz966Z81McvnB06UmOgf8uPxVlYMx6nt43TrMWtr/DKulL137W/VNGt8loDi\r\nS//caA43N0lNpPYW9407HauGYa+oatmt+nOWkOOsg+Q8AzvjNyGjM2eoOJep\r\nwQA7vRIL1/DfX5s+tjdwu+SPxAohBBrybriI/GsDCCAA+pYNliZJN1IVHmR1\r\nMnbtEl0yTBknxFJWshgXSURNhTKr+jlWTVcmwAd3PAtg3AeUJS1S7qdMXomM\r\nN65g53o1W/8xPjJA1hPNNehrvyzPXn6kUoJeb4iYKGSCAzZSLHCqNGMwbqn5\r\njJ0SihvkL7SekDYZ8wt6mlm6ndRJQbd9YbY=\r\n=H2E/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2a6ddc1cf.0_1659110718769_0.3298002225167269","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"757076aee390a5dd7faa2b3736588f08baee1913","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.86efd56f6.0.tgz","fileCount":54,"integrity":"sha512-fmGvedWuaKbwTBSKHnRhi5X/D/dEeXq9XS0AdVh7I0i8rToWmUVf96WrzPFdhfCSWsiTBH9v/q2o3QtVTWi2Bw==","signatures":[{"sig":"MEUCIQCiBF3IzpP4uZ/409gPj9cPVZAnxaaXiSYzWTLVCiD1ywIgEB+Etm/dw0RCXAXg1C/sXB7llLweDMSlzCC38KkiXfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Ti5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWmQ//TgYewaXK5kX4p80VjigM2Uwqagrl9AGL2gMjAtyGoqDcQjb8\r\nKzXb+8mLv8+48AKoWfGcO1DfzoPFuOtl+9n98v/zqRb1MWzmJP3UFa+i5/J6\r\nPh62bGsUk25bOoy8jVLKVuPw8SAL/cqwlyb8dCvCc551UMT34lv2Gcp3IJds\r\nApYSz5k6w10bEfXsE4ymiz4Tt9ATOivGSZ24FZmwVn1aYQ6O6O13VGY1cJ+y\r\nIiWqtbfWB2H61KYsBnsS70Dnlh8Ryel0uptfIeUA2sQSo0XiwdUmPTLxrdHF\r\nmIDz+WCpUfMFqH59WtSXEB5DFt4gwS6pixnYTQ5N/ijwYIL11S16D5LMtN2P\r\nCPThM/flIjNn3iKWOv3P67H6uY46nq+5CdwBzpwrzZxgba8CFuY5RnBYN0eJ\r\n8GUqNT87IRcIaJEw62raBHFiNQSftTT1y4fsAdBBUG688ZszKcYcWzC4fqWC\r\n4eqklC0AsMxAIkJHU87BcxH7CZ13LUiUHJaChK9MXNcA3zy3B/C0Sz5bnEIa\r\nlXlwgH8FQbrhDjZk8Ns1HEE4lXgsrwgp20ZOGUWz2iG9B+CDYx00mMkc/cHP\r\ngv7aWvufFCiZdRRuo1PNs+sM/uttrsk9TdPwqgmRPf2ZmcUmmOQV6S8q1/Sj\r\neSZOiKXnu7rWDLQRkjwdv5jVuqgXNo8ekHg=\r\n=CHxy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.86efd56f6.0_1659451577771_0.1300467064747819","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b743c0357910c3bc0033db518dc77e469a63bf07","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ccfc24d19.0.tgz","fileCount":54,"integrity":"sha512-XWdB8CAJMTLSmvf0JZj6mpFsZJNDhzbJ5MdYLPKqqNb5G4jqkd+33LbxOQ4htilRypP3UgKz7NscbrhCU0oYsw==","signatures":[{"sig":"MEUCIDdUAmE95Z5rW0zrQoobHnkfluHUT0/LZoVufF09FpCYAiEAi2ldcPEzEsKDXQiPcmUcce0osxWpdInu2/ny563ntxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rr2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSMhAAnAwM3K5/ry6yT/N+jc6h+2ueve+r6zPgsTO8d2jZUZKaOoRq\r\n1NoNWCBqSQKygQk0kpWPo/3PdjsuIcaZ50rt0eOAZRIyvJ5OKngN9VS7NTqN\r\nYyRMzhJrCX27jQoAfN4c0nYtkwNk0CAcBDpWdoRmha2dYIaHLYkvUyM3ev5D\r\nBAFf4O4qqJwR/9THyX3qGIYRPjkm/zs5yZ+4VxL8KET1bzfLA1ii2/ZXnBQ3\r\nfztyLHqbw3ZGMn6no0L54C58/DBt3I8yHBuZPHKIPdGO5akGJIzYwJ8By3jR\r\nW6tyWioULAZVNGqOjF5qIfrgoTz84vR1zDgElpTmN5fg0IGm2n1mhjHUGJ1v\r\nVJb00BHurqEEXKGgANHi7dtWclrPyMo2/8BCPn6SJHQ4k+CTc8d2hlNYnDNn\r\nMAwbHiRM5vQCC4VS4polfxLoetYDOWJmw9FYWprKErhjB7+K6qjl3GyTb4VZ\r\nZ3mlEJKxGgCpseZQp/iXO6eJOieG+sjedvbGIm5lsPQpwfmDRjFpOuaHjf9c\r\nRMC6xiRUFeK8LRuhuuU7y48tIvaSXW1vPNlHSptNp+ziCIuVm9C1N2tV9ams\r\nPzBS+QMhHGrvfVC9/3N+9NV6fGARnoKHkrPswZy34mAQVDJctAu71lI/Mih0\r\nlZALXUpptFW1vJ+Tmcrx4Pu9vL0LI9yvhfM=\r\n=O+Ra\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ccfc24d19.0_1659550454261_0.3830632269864336","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7166c0677588125722f56026581b1f619a26139f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e4570146f.0.tgz","fileCount":54,"integrity":"sha512-x8X27OsaECNVSSfrLB2Vvdxkufb5LqPhFgnNNdFRxi3ks12H659HXBVhKpSbZDgbNN4bqxZqD6NUeX9/x/e0mQ==","signatures":[{"sig":"MEUCIQC/4KwIFRrJtX7yM4S/hlKEVLg5CzSlmCYcGekmX2YRhQIgcF+b+5awFO/I7Rsb3pY0EvjyETFJMF4QILeDNH9kgaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8HQ//aZrAHZ3jlYFQ7KzDrWdkfBlbKrcAjZ6Hh5NVUSmtEul5FtpH\r\nUXdvASH4mjUZzPoU+zapUEyhmjRe+6sk8dv25pJiwqAwWXDRd5Z5mFgKkwb2\r\nRzXWZ+57zb0GwCbHaOs6MHuSLWB+Hj84Yi9TdTPR9SpXKXpJBCcu9ghGQY6V\r\nCxwKCaJD99OyGtigZ++yGq5UkFumOzYpkKnJLzoBEsQuKDSqCIG+8EylM7TV\r\nD8uex0YDcHTRER6gtPMlJYNjzFFl4Hc7tHUkxBT0cOa4UhErCFI7ABIcO6yn\r\nsWZaOQCZTt7l5RPZhYCyCpnLLjuDDrHW/ibro/AmCo9kVjr/OcrqYjSyUSNR\r\nOXGBk+TM6yb3xHXQCqR9oWKpfUFIWv1jLCzggJaw0PBBTADg1tTiZm+FgeY8\r\nALie9GadYpX9HlBBeV80Wm2W8tUz6zaKbaBGKaNpml9MvDnxX3bwg5ZI48gP\r\n7bI+9YfEl0jpnOS57x4aVpC+kvM03/yWKebFLFQ+jDsY5FJCDcte2cYK4XQM\r\nRZy/jSpP/NdioGgF0oohEk+6PqMsfKgROh4n6ShsKMillsONFt+Y+G6O8iuY\r\n6fWpJQo08TDn5R2M0OOkpoNJa+0hd5ZlJN+twMtEYxBFwlksAEi563BJ5Uxs\r\nt9OAihxj4qbEMjVaPuXPIGxd2UEfDQk9QbQ=\r\n=kmdU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e4570146f.0_1659552085056_0.0966819446024969","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2ffc16b434379793124f7ff553feffb81ef3007a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6683a36cb.0.tgz","fileCount":54,"integrity":"sha512-xx+I6bCtbfDgODuAdiAGofyujTU5FxGUHGlEC5zJh7+of9IzGJ+KWDLBmZ8ewiWcSq7y0AMa/KmGKhDsvUYTzQ==","signatures":[{"sig":"MEUCIETvLADBTooZwalzftNCvxGKB9d4kjOirotylQX49W1EAiEA9RFrtrXScN/CggN1RwxvMGeNtb5t6JyDLaXvVl2/5HY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLgw//dK1CMCYkRshVL+9Mx1dPI79VwlST8XlN9dNWA2cFPdAC6nBT\r\nNySXZLsUcXxh6uYvM6B5pUqkou0yknaUpE3bYvIRj4VOOb4PhRfrHCLpLtGl\r\nfjYYlYex7DKXx7llwhwgZlQM3uY2CbXH9hylnW/AGatAr8DZmEoieyB6usQV\r\nm/qAClj6VyalXtmvqWOv7UFuZQOf7h1YC8hbNE1JRQ2PnP04X8uH3Lf8IgxC\r\nCUTTSj5unaE4iVol5V7mMgiE1d3uiZM+ehkTKouiq3ygz+hYvmmqHEGLsDIu\r\nCpbuwyWc6SpqyMhZ+L+rW3x2WY5MIjOEwG2ugtX9hDBBD4K+5VU81SbG4SM4\r\n/RADoj/3MKeD9ulJv2Irl4PpMF9VZ+BGx7nl+zAgfBIxkoa8yFhq13Y30a8w\r\ntjM0eku9KFzmZ1v5ZsLVBMWJ1jxeaQJmfYT+LOMilOI528N0eCckd/aSkMdm\r\nE5dICf+zQyd0qMggh4ayxDWgeaeeFpOy3/F4B2HLZSNktvTBIYGNy+8Mk/bg\r\nYRASCm8ZiMtFLlU26Q8SKTb4FOxOg+gVmtbpxTWnVqFMATpVu0mSgFg/8rDp\r\njjX42FrYqOQzbPSwrgf2/wHMjuY5DZaTw5VCbmroR850hDZXYMIQjzgXl6Ht\r\nF20MCB1LBT+ZuVkHWLSmfbIwaXyNSWoNLX0=\r\n=L5j+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6683a36cb.0_1659554491256_0.3853921915916212","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cb4b94e2624b8275f2722e3513d16cd11d06f4c1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.10196647d.0.tgz","fileCount":54,"integrity":"sha512-pBMR4tFQijDUdkPh9A3CIdgS+l6Jns5jt98HYBldc87EYURJzJ5i/nBWt7AL0HcobHZK51Fo5RgzW5m5yP9Q3Q==","signatures":[{"sig":"MEUCIQDCcQ8IH02bN5jsq6GG/C49MUcZfDKVz2G2D5M8p57PfwIgIkyzOYN7z1VzDtQ+MOBgxvGoiRTNVg6KQokl8+c9wqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrphxAAiOuLnFaVTZNjMU3kz16kVEQJrsyIUz9qJOiiRh8jYm14t9QP\r\np1sU7pCXUwCW8PKvHxzaNtwKtVtpUYDG6SchH4w/6OV1huUL4B085Bsjxswo\r\n/xUxLiVLpOf6WwAnuiufHC4Sn62lYNjQY/glWiSybieqwDg3QNwu1+Di+MmG\r\n9t/9IsNEdzvSkqRtfPUBr6YAfE0MfLvk8Seb3+3tLBif2H4lxElYXtP9IaES\r\nmDTr5ADEqrU1iHgpwkh7QM6HIK1k4QopHEnB/z076jU9POOwIeaBLf7oszo5\r\nPsJOX9vwbB+Dn8/DdFUrxHsj9zzHSxdME+dGZwTLmbmEXd6lLfdomxCdkc2r\r\n5hi52nspxPRvT5D9ofzg5P9Nr8Z2eXJsAKJPLlyXwOUm27ZIsGJTSDvCx9H/\r\nnG3W44fjf8Kw8hW3Ll2lLjz/QFGkTerZ+hzuIMJhKR4Hrv8ix6SMkV5/0npo\r\nq1cVs9DgfWb/nLnnYA4WlMq22Ov91UTDhYEmpyz2DVLPOzf2bzmjLlBNJuTV\r\nfVbebeg4eFOV0OkpmNZ9mSkK3NQJ4cAB/FJjl8Dqq8EpsUKHhFI96mWKDoPa\r\nayuwRftz7pIMY4/1rwpFPb4OGBUsNzzCeRzYnboQICI004AEmDiR7Bt4mx4o\r\njLgklWRkrEwyGGU71zDVnL6yNXjKrhlcDyo=\r\n=scmf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.10196647d.0_1659563663388_0.009884757285728352","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7d0066abc5ae50bff4e774d139522774337e922b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b20d3d73c.0.tgz","fileCount":54,"integrity":"sha512-PpndCnb5iyyUrKhzEUmyjdv2yTwIa+DBD4ga1MeKnGz3YnFEDzYxZQZWOEJlVhGhB+x5nedPDXRnhFCjT2kcww==","signatures":[{"sig":"MEUCIQCdndud7Rjr1RXZwDExK1Jp0HOH0S8bt6ElKuyprCOeKAIgH5EFQqCN/+1/Mhyg4k2uZ9gQQb6FrwR0xEowpMFnCc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9nRAAiaKmO49CAl/jCL3AgpdrR4smWI7kDwQGMKmgnkKd0pvC7jcL\r\nTuIOO7d0GYtQc9PW7vgxjToKw4CGUt7xxyxRx+w4aY6h2h/UXX1sjlTBhhXQ\r\nklL7zvoIIChaDtvvCBsrh7GL86/yjBJpgetOIvO+xZyH09/yDgB+M8zMy69V\r\n9n+b6cIe0zIrdSEa9cwGX3V4TuUNdSNMuL8Vci9dtG8dixE+EAUP4UNd/RNc\r\nqkcvNWrqoNnkTwrDaJjV+3T7LQQhQOzXAHJrH62KbGJjk+uKQqhFyQOQVedC\r\nBGI6r9HXqTyjXaGzd8+0tU2IWezikmEMgB2owDK4hB27HoddHPbjrza0n8FZ\r\n5dz5S8LOyhei9sNy+95wzxe+gKR4fNZQVa2Nc2Nx7uRZXO+QyIVvPI/8/kZN\r\nW8mXXcQcVSegnEebU1W4bOF8cbX/VlS9q9m5dcDeG7XHt1LXK+kPYDtiVuOC\r\nDomrKaQUvPqwQjDtgk2a9g38Ch6fgCdK5ArOqNAlc1Vm038xPJCxswt7ojGQ\r\nN2oJwBfPy7a/eLijUdJ/MDq+WL1HBsRAMIGrWiX6wpfHE3ZTykawvR29l3NP\r\nbsdV3aWIYEjAjk2l1YwHl9N2LuuogeA25kVa2g63a+fE1cUbIDWMtB8QR3GG\r\nxu52ivqIPfc+4vlQF6s0ulHAQ7ouVvCPFvg=\r\n=sPKy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b20d3d73c.0_1659653015238_0.47355158257174623","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e7eee49e7a74f831163ef4466a28adcf910adc17","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":54,"integrity":"sha512-oZSXYH7R2vSh0i7Q8x/hCyhOO+pv3KV8xGefAP+a0hBt5wPLEEuTZ0LMs1DOweV9mUM8rz6H3bJHXBqkH6QL6g==","signatures":[{"sig":"MEUCIQC02zLVIZVSEeAS3hM80JiP69Kck9qW58MWvAoxFEAnwgIgeKlOpGNmq+5pfufR7yelEczkB++UGgYB277DpWD7iJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEjw/9EUAM5bQDe5+e8sSH8Lxc8Bl/c4HDo696sugrIDMUktb3vXZ/\r\nb3xHde6WPTJM8R9Q6nzTY4QalXZ0vUo2PjTF+MZbRFpnx3ke/ch/brlASmfG\r\nsmK6limQCVa4M9Wqo09CA96GuO5nQIWF3/zrnZifZC4EtZhvpMQ9if1cvEQ8\r\nW//LQyMEYva0cGwiytEcsXcM6KAkA9klQ3FSvPXKwVCetdbfw2E804Xwf02L\r\nZysF0mr2ncVUmiPz8L/FpVX1vw2qGp55DT88gLM+QeFUWbhDb5u+8UTc3y14\r\n3fHddFcM/aKTKoKXfg7av76o5SrIe11niH+CaZnI5IxJfLQ73BryrDcUkRJ9\r\ne9xV2zSPPcRdVupB1mgMjNW+0elVUN1Md+r0tmIpVZqvhGz2LhXaBqTImZUU\r\nO9ELGfQWs/+R48/PZLpy82ivi0yQrCLMxxd18BPyCKL6nlM5+QNUB8BoXz6v\r\nhS90JYm9tXPHLMAeGYuoQ5XGYxMAPGu4P+1liIYeXVLAyjouPYBBU+MhXFmu\r\nq6trCo3cIDS4P4rq/r5reFAnE+EbChK83mpWrHcP9M8PnVG9nFT3yQsWrzE1\r\nEx81ImuZ9SDrk5ds9Z0nYAQXDhxAtyMhLHRPDTcTW2MUpf1p8+OGmK5PQGz0\r\nNa+NxkEir/HD4D85JpE0+vl/xaqfW6yEhq8=\r\n=jjQk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.47c0c6b1e.0_1660058474667_0.4266084224621558","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f396a85d0a218deaaa4c53c9ff1124cd2c45ecfa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":54,"integrity":"sha512-gICsW3U3au5b0iuhpZxNZ/aGY4Kr40+MfZJsWRSOL4NZ0NZuybj867RFbG/GpGrBJrnFpYiPiIPjQeo1qGN7Dw==","signatures":[{"sig":"MEYCIQC0b9CIdiWwqNXs2wQgTfhgrslsC5tbIMkVzjW3hHX2vQIhAIHniQoKzpkB0BiJsGm0SGh+wKOk3yztDKfCjiCVPyb3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8kQ/9Fbin1JYO32kbRj+gA6XhMvv4yGbPS3CSy5s2g8bJnnMqWmQv\r\nbd/vpgFryp6wB8QHpuH1PEMVkgp8pi8089WbJ3dna6XcLGn7viCOHd6TQj+z\r\nDxbhhzHbUK5I2WBb42Big4LFjtlTVKrI+7p4YhTjM4Z54UzTNj4KkH6LMI/6\r\nMiB6dPnlFXcWnSUOxDUZoGrm/RuYdVxktlu/J+AxCk4XU9vwT8FXdsP7qNMc\r\nuP2VA8MHa3jh4JtXwTOtn7+/T2Qvlb07sOnxUnUwlInZPvoWVCyHlgqJsZYY\r\nVpYODqnilayXB06tL/JVT2gkM6tckHjnEErPGzeZK0Rwj/whr7tODVc6b4gg\r\n6L7sfeM/HN0lZ169PrUWni4C1oq4iElMSa18pyVv88VYqfZ2NLQ1fAjzbMK0\r\nAd8MZ1Kh6oK+T1KR6M3eU9H49kq9VDODKDCdoibSHjFxS+1S42Gi73P8+PAC\r\nJN5yrTHWE1k7oKFGVC3ZsaiBY8WEBi7Z2fo8G/lDzU6PpB0sBLDrSl8zFLXh\r\ngTGLRcXsCYjrhnUuV9pkmp6/P9UM0WUT+b+kc4nnRRVkXHgMZRSQho2rE777\r\nO+ut4pEAMnhvR8jBic1axiDgdH8v3VL4RB+e21aoSg8CC6pHznfP+t9v0pkj\r\nhvPBXR/u9cO057Lhsup6FKfhHZw3NqQgqf0=\r\n=XBFf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0e3dc8e38.0_1660243596373_0.45374257980747634","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"30788e16d85df7128ff4e50520e38c8bda56405d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":54,"integrity":"sha512-2GOhZCP1AIz74lFccGVmT1jhH+ohPH2S7u2K788Dr402W75Uaee++MaYlXzoEHNUTAuVz0yXiYTXWc4CO4IAIw==","signatures":[{"sig":"MEYCIQCNkhXcKXuAKsfa2EhW3MlcGByAsssXXyqfALUK79FxOAIhAPaumBYsyzmJgEW92HlpORqET10PlMVybgTiD+okyyYA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC0Q//QzBr8j1rrzWhvt0QwDaM7MwAEU3oMgNzQ3iqu3jCor5bR9G6\r\nuOPnBZARgvsOX/HKh1DFC8Vkq61pBqtvKg/LggvANcQ5/9btEgE5T1gZqV04\r\nbzWy8xrXO/gIf0g4oOO47hwV3qRWIskhgqpyYH+7SgWQ5PE8Hz/FhvUlES+V\r\nW6Nfl/GORoMEoJYuQInSDTUn606ZHUux6dYp216DU6tDMJ6pI0PUPx6OT001\r\noPs8qZrLZHXPLOF7/l72isF4Pi+bkLtmIN2WwWg7HjZiHyn8bjJe/qDkFMGy\r\nPT+mNmWTrqcn/xAPCQpsi/w7xS5vcydqa2eQAsaw0pDVWHo4yR8jS9R0iohR\r\nnjb9rvXgonIcFxuDI/7fIlQewH0Od7lpIuJDyqW+NYj0pjXflLDgAkQR894t\r\nFXV9O76dCbbX8cdfsEEFNdMJ0K9m/QsZSjD6DEJ4IJoeTqL1CI0m0g+vT+nW\r\nA4OrkBaUOPZXn4JiSvSL8ggIz6b+U4nStIBz/O/1uYA+iCr94GxpfCR1Mlil\r\nHF4OdCXDW75pi6DACSbB4AKrm9WvemxfpRLJcMKnyvchzBnaTyJLpfmXf7va\r\nULsQWAl9+erfJ+gk/K6ceoSbUAXW+EAIW5OUJ8nphq3D690acDpZHnSovEXq\r\ndBsQ4dzChvoS8VerHVIjw5mnPKvUFzEs66s=\r\n=GAq7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d5a11f1c8.0_1661900518315_0.35592062179551043","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"27ad1b638c0b2c3074a6079de2731c047837ed16","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bac992a95.0.tgz","fileCount":54,"integrity":"sha512-ePOJsS9Hh8r8/DPurRDNm+C70crkLSZhYo7PVaN/UDMdWo1IvXolFCWB2QskXMxWetPxGKYFJTQ9TxqYAXHreg==","signatures":[{"sig":"MEQCIBqqdIq3EHV5WSY5pASBKUWxJXaUb4V01ByvFgtowKzrAiB9MQ82a2UqwA+m4AlaYqYKeTyo2dGw2ZeVThIAR52Izg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFnuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJoQ/6AzxZQP0Y0/ng1vLxuhXxkIR/gq1OrGGci7FG3eyMrl8BrPYm\r\njWFilwY4Yd1QRHU310EZ3IEad3xvcT4oYYfzjcPfiuJJ0oOpYMK7QEmZPJx3\r\nL3/ZGu2AdXa8kW8DB0wjfI+Ztc43YoKeVsdv9WMdMY7kRCh0sEY5VXJRDIfW\r\nsQ2HBhFtHWnasjGmL5Z2f7jJ7Ls4PytlteX4tP0KpspFHcTwFyEF9g9L4S6W\r\nv1Pbfr2zSyvwmKB/+zfH5YiWtnssXZf2kxeRbtuuoNcpvYIxg0dvKAhbSkHT\r\nsJGEQ/XFo/xRMDvB5xSY3gYEUybvzyyOEeESkngvcPTmzkU7RkddhZZJvEKf\r\n82PAG5yoHxbWsLq2o4p4gX3GRToL18WqMJxqxbOT7F0pq6kt0lxT9V0vN2pd\r\nOcr5JNoYodoEPU4Em4Tdou7JDJk+CEg9wS6/6RVBEmot7koMdJDpFfA6JB6Q\r\n9u9uPsXRo/seevDoDLdAg4Tidh/aEoR1V1j00wLR2Xni4vPhBhpkRoIYF/sa\r\n6pTyjl3prwaFc2b9bM6H1J9rBQo5j0eWP7MCDkuskTcsbiD6pWpwFd6a2qqQ\r\nc39uV8Htd/HNAom6T++F6uwl/eeQA5d9wIKYHbx9a0/Nssjp2sp9oQ5NtwAX\r\npQkUy7XaeQB5pJhLLb+b5LmgoGAxXXymD7U=\r\n=XtOQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bac992a95.0_1662015982280_0.9231253786952855","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fcd6d18ccd738c1c8ff8eacb3839b01aad7c47ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d25f3404c.0.tgz","fileCount":54,"integrity":"sha512-KYP8nKoyou0gxsu4fCCNy38OHwmWS+67w2aqp6n0SW+C6VxJEl89a99t8hfWqYWav3zdDVgdiW3PJG9HBeYD6A==","signatures":[{"sig":"MEQCIFXrVbOMHX6svoARKVOR970zyMVIDKPY8pgZ250q6BEoAiB8n/aZkz8xBaWebkDsLrquWY0+cbWBaR0KnIMwpWJO4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfMA//TNBMzNAN40S/Wj9Dbgdo2socXdNc5bDjUSU6nhCaChtnMbc6\r\nOyBYZjQoXjJtSziyspYlnt24H7jecqbuqY6BIWBjPNnu8+OGLzi9p00DlVuq\r\nQN8lNPywfbDBN6/LXrE1+hoU3VW8FJboPmM0ZlNNOz30IZDYUdC5LFk7wtXD\r\nw1XqnBruXcwIiHGEwT9Zn2C9hfGEW3eIBv3DhsiKq9pZypkvHhyULN6/qpUa\r\nn48pVHSNDS+DNzo1IuVMg6Q1kl621rqLbkUHrOkARako7k4nByuCJmC6DDux\r\nM1FqNfTx1H3IxdPaA9bMG/CKUWCCTlRt3D3RmRKe/PVpXxrm24QETOSRpOv9\r\n1PNf/Y+30TfAEjzOdpMJKCaqMNFs/BLG8shnWI5izRWET3ZVfxPn3cSRTvaL\r\nBScxb1uDb0+mNXoTaHXUcY/9dMNb5Fd52UJTaSkSTgGMs8/JtjTcEl5c5IhY\r\nU33g8wQXfmOIAihC8Q4W0BJpgWpvWmXBZlRptc+EwCGC6+IJcO5TEyGej/p0\r\nPkqs/lGou9LIypFsDCBRkX8Y7cTwL8Zu4x5bc/6p7BE9Rots2L3WBjsw/FKW\r\nKCYtuoQUTCgrHi8w4WNp9m/gJvfwJUQn8y+GftXF0xGlgKrPgpGNVg9nAy65\r\nT6g4LCRhkUVFUcqr9ZtD8yZIlzoa6Bb8cAw=\r\n=EIKg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/typography":"15.0.0-canary.d25f3404c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d25f3404c.0_1662025518561_0.635064225935762","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"19307f17a5335783e8cce52eed2394d847d41784","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.920d8a79e.0.tgz","fileCount":54,"integrity":"sha512-pfru7ODTPUBWlDR346SSgBCxc6azkLBothv761nsL74roU3uZvC0klouEimqSfLE8FLDfuZR9dEOZ1bImPGcuQ==","signatures":[{"sig":"MEUCIQCcp5CmWu+YBfuA0h52eXSghPqJG6iiwjynvUAivuZZ9gIgVg+RKuc9RhabXVWzgG0CrynLsZvU69jN5LsQ5YdKWhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjvg/+J+A9bU7vABnKJAag+hOI+4M8kuz/RpRo4LM6DezhCLaRhzZO\r\nM3q846hrEBahYltj5orjkPH4DCszUSoh0KS2jRwTke1mLmxWGgJJ6LoVEoXX\r\nmlVxU/r2+5OLfvjGmRhtRozrdt1jmFnlZFPwNgE4iZIl7XWKq+r4G6wNNK3I\r\nwNFK3AKKLBafp8gNRMiFVfpZn8d29ufOhQjgEu0XnEqjxg5sAuF0Fmtthzli\r\nAbORE4pHos7QpIwmX+XEYKfCuj7OOwCyRcvRNZTpcnTErLM2ThnN9oDk2KWk\r\ntAiNdlw/J7f1rgdZJH/pXR+ZQnVCfUqtK2O3P4dzsE3Ay1lnwxDfHh7ViKUR\r\ntnEZIqyVZRY0rgK1cDlaBCyZSF0j6tuGfbNVT+aTdt0Nq7YqZBYoli9y4WZe\r\nkHYXHkLJO1iAUwcTD1sxIPIPMABJEulTJqfwACsPZGI4JLerS/tnG8xI7HB6\r\n4VAFrbxaKge7I7kdXQ32jf050HbWCPs2311OUBwR2eojbyulUzm7oy7Vsz6Y\r\nhDWtJ0v1WrS55ziphL3hku/xiA8f1cFcjLN19cfGlOEzODkmWLTDoAvcMVhu\r\nu4dQ0ickMFBtgP4jwQ9X79XKruP7xXS689ewHs1LUfgs0NOZQPhButBaxoFG\r\ndxx2bm/xQ3+bHJVQxsV8legPpxobh5sdld4=\r\n=V5TW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.920d8a79e.0_1662063698441_0.9949266106310573","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"31e323cc8abba539a45b2797bdecd966195d57b0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c363f267b.0.tgz","fileCount":54,"integrity":"sha512-Ll7BPfssMSN6EZxmep6uq9VqEFiNp3x4Vzmye3bxJO2KS2WjlPMsurh3h8BiUKAzTqJv7FkstXhyxvtnYw3VSA==","signatures":[{"sig":"MEUCICxt85NZGmCw9vWxWQbuhSH1M958tW2WbVhmuwI9gOqZAiEA/GGei4PXyiOk2YaY+KjfW+AhJC0gttN2xT9w7lW/0HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDLQ//W0oTim5oymTXCr84LazK7UJWJ9BsTBGsv34SpcVqRqfkM/iw\r\nuhxEJFBxdWkgZSHNDYjt+rthzumpxz0oTDryPAEvvVZhorxyAj/9g0FuIWaG\r\n5wyE3KWtuRlsQ7hOMNB48kBwNYfM5eWWBcJ7oqxXBRIGPCohPZ1JaHwvvWxl\r\npOw6F0G2IiNKzrUZs5FL0DMj2WwLF3MucqkcgG2UwlDIXeBAgt3nIqj2SG8L\r\nZDcajp2SPNrSZoSYO5rqWUXPCbCRi1VTSNRhYwPesbe/dKkaVOprUhaJIkBD\r\ngtwAMZi4p8v73eMWDPqgk/rY2/7njeFdL19tTJcfmYuLRCbC3b1KY6UgCL8A\r\nbAGs500nFcUOFWD++utV/lSCYM1nTvG2daX0z6oCCCzWA7l77g8AOh6R3SMf\r\nspj+RTuu2ITJ7JbTiSsCcmk8GEKK/fmTpOYBmzvZI61HFqypCHEw36/1SXu5\r\n+KCTSoeq5RDA8lwqEdjBsf4YxTqQyJLh2ikM22y9fWxdP7CuDOgoR5c+YcZn\r\nDNTlqUjk96xLEwmBnXH5hJV5Ze4ldv/PFlEtKBJSdyqtKac/ShtKrNixJwKz\r\nAriwErCStZwfzc2yI3PcAuMR4tIVtorOXvrI4aiqgfRD5M6QrmJt9YMiM16s\r\nknGMagJNumXAPtKpsVBFtvNtAyxzUzGgisA=\r\n=wSNo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c363f267b.0_1662067136784_0.08482295444358035","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d7093ba0f9775f650c72e4a11ad32fd059c1eaf2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a4eb4937a.0.tgz","fileCount":54,"integrity":"sha512-0O3RDgfL751iELVPfwNWRCeRVk5zXi4uDPYw+FCqFtYY/5/mcC5WutXSJ6xqHeYc14t/B+eXpQ8niP6Op8iHvg==","signatures":[{"sig":"MEYCIQDe902uDz0eihi3hwZzkc0/jhwmaVUw+issnHNRlIhJowIhAIB+WE6EXGlDDba8R+U+P22hffoQe8qfzmqjAAcu0DjA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcgw/+LJgNaA/w4gJnbzVZWeqvznoujI/myJcgC6LKvYVZKW73Uyxo\r\nUd8fPFo5qM4F7uERKbG6txz/ZVhRJavE9denxozboHWAnYR1dH0035/G41c3\r\n2l/C9KDqznD/KCTNVL5jgjoKxFiEe7Iqj2J3TM8eKhpOp/mR6Xd09qPzT0oj\r\n7+pUNDO0+HJBdbZc9vkrRIFDjfpUT4JcS9cwkXZUDR78UwRe4MItl7avWGd2\r\nn7J4wO8+1eic6Tg00H2w+LNHd4keH/uRSbirxfRGbHSPN2s6qm1WvS7S9/4I\r\nSSn3ZmszIB71W23ajbU98xC2IFaQoeHQ+bW9LXHnrLTW4V1Ds5ctVt3TrMaJ\r\nd21gbjUzoHjG0Hx0B5DIEzr7UyqaABMpdVIAIhvNqt9Rj83PADdvrvBsJwS8\r\nSjJt25mwqhkogeivtrpTFMgmlYhcoYLnQpmlzbX3nKfmEYhqva4qe1EbOaWu\r\n6lD6Q84iNul/CXS5u/QfPRJ/kjhAHD6blgu6uj0VFycNamBwuDIWrDmsrNwc\r\n18VDghsFTFyGrBeyDzAaJ/QibX8Z5VFswl8vH1xAwxkaJKpg1tbAY1ExfElI\r\nws/Vnvmg4Db6fFutRcjG6Zo2Jqd9Nc+OiD+ylod061G/ruFLfqEpLaNKVaWs\r\nLF6U6MQVBYvTZFyS+NuJTlSXi18DgdOadQ0=\r\n=yLYe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a4eb4937a.0_1662488424571_0.5683901808018414","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b3e2324bac1da3d9536e32c9bafa236c1afac714","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4299717da.0.tgz","fileCount":54,"integrity":"sha512-BXSwHe5Z4aJSz0sA8OC5cMuSie08Nkhc0dL9Gb/0xHu3cRiPvWGX+RkUj4v2FerB3NYOLLxosrE/HlfRlCB9uA==","signatures":[{"sig":"MEUCIQCivlzbdx/ke2spLv/eAUS63PVEUeFZ9OzzI8lwhNkLVgIgNs5nv17VPipUbVSWrMKgyZNpJ3hwCswt1MLJAUHgDFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzfBAAn01MXH10K8h53ip7eMLcctcTf7eKHLD83vCKa2k6wRPP6e60\r\n+N04fq8NiqFF7fkGnr1n0XlITXfNKDqAzsR76FraPU0VTrZ7NIuBH8mkLoA+\r\n/59lEdhoYC5RcpJZRo+shAAd6hs2Qng8ttSPl4rHdM3sQoxsWka/aCKTwIbJ\r\nITI8537ZZX391Mjc0b25Wst8y73DGfujf0kXL5ZXbKs20j6iaegZo2xh/sPf\r\nMmoGYFQax3qzOxP75eZS/WnZiPAGJBTN9+Vt4LXYyBKZ/xZqM2yM9LqU4i3K\r\ngXkPC7EQlP5oXzO3LtATNV0CzP0Wec4cEOdo2G6t3d/I/mAfU0+J5R1Ln4qK\r\ntsar+j3BwLsA+TE0spr8dDJ2Kz31MNc1/5oGk0oiYJX4WoVCwiSUl1qC2GF1\r\nYi+eUNFd9Qkc1mgBI2Km9PdiFbJ6cPip8NUtGHyGZKblZaJQ9x+fM532k+dP\r\nKA0Oaam2LRIvb3hf6Psk6EZyiz62pKUm9mOijBrzWGV2CttDrM+AXoXsjYfh\r\nvslEn0/hachO+SsdUA3e9Cn3plyAfXWuUkLoatImehRYqmslmOtpVdIW4Hro\r\nDYO0QRFRlFfzzb1vW+ZEJfdryHk3UZZiuyLEKpfJmtYBzEC5bEihGqQFmN+3\r\ntsKCpeaJCKsVE5/CA08HKzVwgKH6iCe0Sas=\r\n=YM/3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4299717da.0_1662567381644_0.050556114089614246","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7fb5824c06f30ebbc346a2d8b55d9001b129579d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":54,"integrity":"sha512-V4MlAv0E5fnaVcpvGz/OqKYNaM9d3e3r8rh30lhJEXUAwXYe7zW2qcCXTSrcbJ7LLx22U8c7dmm9bow2mfP6rQ==","signatures":[{"sig":"MEUCIQCr2U7X91Eacar/EHjscqd/2PCweFkCFy3QmZ1TqRjczwIgNe03Xm4aj8Ch6ra1SF3chz9MFfSj7ob/ajZJJR4OFPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkMRAAjUlXEXCtgVDBOZAgxYJJylY1khQoW4dMLpRUu565rlC2g/L1\r\nbFnw6uwF7lkReMjPAnGpWBPFbWndFbQlDmuUUsehxl2ioN5cuu42HC7pZ7qo\r\nIt4HG0hQzL4mfYaoMsXAz//jfFasFBAWHJ0ZOdhJ2BWcB7tGVDH6/l+DjZdT\r\nU8rRBGn5m6d07Tkww3sWEFKGYgiANRhHQZEiLBM/0YCeWBOGXOLnwkQP5x+r\r\nEjsN8FbWqnuc7BPwBlzvdZQhEEyFrhFonbLCp6B3saN+vsM46KHkOnrOHQDL\r\n2L2KmHtmz4Q+ArfpfXr4nl1V0dYvgJm2Fg9V5DXeeOvKRTOBcwAcTlyjVd2M\r\nTEggSJ9iXDbjPOA/Dhd8VtaK/88XaXTLkCmtS12bSbSNEfUMdLs/9Z+kimqa\r\nPl7zBlBpCtjEzKkGmgXY7oOcB91KYOroB9+HQsjIE8qAvEZofiMuf+4OITDm\r\nnLmN+xnUkfCt72+GSAx6sHnGMD/eBUdzmYkfPqFvsLbijnyp6cImFA1GD4IJ\r\n4mdIddJwVOIypwwvXYVBtMPh7VL47LJyj3+TEhTJwd3XfWMUH1S7SFaj/sPL\r\nAJhLuJIdAws5vANEXsPBmyriYwwqytN4Zdhh5LBn+fqAlDMR5SJK2k0b7hdI\r\nT+RpvjdVm/z9MPXSdhz914gwM0LZTNEp0kY=\r\n=vWxf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fa7d8d44b.0_1662578377688_0.2865857491607926","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d6b283dd1b9828abad4309f35b0012e7519872f0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a40e3c768.0.tgz","fileCount":54,"integrity":"sha512-NbACTPkXcN+oiOF8LKr4iwrX/Wjdvc+burmc7eZoR1qBr6jxSitd5Le6BcpeXX0v5UhlWoIdBERZ8+MPXHTXwQ==","signatures":[{"sig":"MEUCIBt+Y7r2EZYJmFg82Pjb/qYnnFB7Yek+jEJMhVgcbTxnAiEA+AwH4wf6XB96Ov65m8vF5eYzOzg9GsyN8PADRsAmZhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+rQ//XJigwBew2GB5Tru+6sYTDK98b8m0wTtjnyyr4KIpmmnI7YLj\r\nqzUep66g4eFNIfl2XjlYvtkRwGpCAPq/RYOGaQcg0Tbx+LDxKjs29ndLWnKt\r\nQohHVZLt+kdt9pU18/UOdd6CjiZtxIm1e5qQNwYZpzP2mNOTCcu7YTwArQWG\r\nlhNOAKLnmvqVkx3vaGZCukhwtVlUYy2sCYP9RNUoiPkyDnpgvrSsuIxYxsuX\r\n5VQsq2GR/mWoqTWeMFAkdeA0fN5qLbzO9OvKvXmNHsVMKVUH2Tlfwmm9rPOU\r\nJ4udsObI7hfWBARJNiFfeGcHFn75kgQXY7d5rZGB1+pYv6wutZuYv8S+xXF8\r\nOxITu9mZ0V632i0x27dlrhGT3KwQfuepKO+BUo3iELKID9VbYe8W9uUT+Rh0\r\nhjvrHhe7MN7TOn3mi8a8PjOtF/5QXr9lHDLjeux7tteTrOhgBfTRV6kg4f06\r\nGR1Y7fHARmffe7FEaDmnLV0L8JRoKYJ8nraH0OhT2mdNuAt1AvNAQHIZ/4fm\r\n1Xejw4Pw8U/Vd3Gj7dVlB9ztEVeTiN+Cw88nW1LwDuqxUPP8+BRWAZkZgU4P\r\nNDk5xtVafKPouR3HseKgblskSJLX780adKnHblauwO6NEOExu1Hr16DzBVdf\r\nsl8n/L8yrB2nVUr/AxhgYs7bUTMVowfURfE=\r\n=zFO8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a40e3c768.0_1662753873742_0.24415984660947898","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/segmented-button","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9c9af891092287c67009bbcb19cd220a97b60234","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.18cdc9a00.0.tgz","fileCount":54,"integrity":"sha512-kLfHfdtGc2VZzWiOPtmq23rEUfEZnIf7DQ6JEpFGch6OMR1oF+B29DzWva6/TEsQ4c1ibC7rMSVZymylv+ebYw==","signatures":[{"sig":"MEUCIA1DMSQzdCXVf4S8eq5wq1/5fwIK4sMSUpUOHXAi/OV6AiEAtdw0Jm52wExxw+2ZsktgI155UV1TwOO9+SwT9EbriTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMmw//QlXFMFZ0UmEyZxdnUOnhe7jHEGeD0HVPkrsyEBjEWil6DuRQ\r\noHAlk0dMxDx5gVbBQy5Gv/zS6zJk1GYVHQ0wps7ldF5zhXrW2SX3saKChIC1\r\nyOguZtVFzGx06oIeMMYaIj1KxRGNDei2udtJEbukzsf4+EsKhBEcHoFqQ4il\r\nwAJ88X/B4KrtpTn0auFYK/4VWOY1oYnR3TI8aF5XLDzwWoXV8nQYVoiYxJdR\r\nthv4wBia5gc0NVD0q0gOlbZYf7LgOOwN753Kr0GJMDTMj7hKkmZS01ikZWCT\r\n9rv+7QqJVWlUvJW21d9yssgDpceV2B/Xse5VWR1jpvXanzuB5wYcA3Rft2Px\r\nhUbHgqHBzgBXVVLBpKrtCFUfVLsZLGmCw3G1wbfDlaemOMigHIYkp5pObAjt\r\nUjwrTh5G92emDBlSOwrCHQdDuUgmLcvuFzYEkb9I/R8IALpfHhw0hbgWm2my\r\nSJIntm460zwkNxQ6d/f8XXerSic6dpyYJdvvyp3lxEDx5Yo4ZYHLiXWb9g4g\r\nr56+UGKK3IFLZcy937IR7vnvQh6jPwY66r6mXAXk3w5SXk4JY0L9fMYexljn\r\nAMXCljtsm6IzYXz0XPADX5A8MuiYc31VLrlNfhPergmuddkV5XN4j1JfK5TI\r\nag2kVnIwECf++NiewouxuuPb1r+aK1yuTKo=\r\n=pEB0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/typography":"15.0.0-canary.18cdc9a00.0","@material/touch-target":"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/segmented-button_15.0.0-canary.18cdc9a00.0_1663016617975_0.5780091250167105","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8292479d6a689ebf421a525da00ca621e949cf7e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":54,"integrity":"sha512-67d1z8QJIZ6H1j41l9Y0pB3cRaOV4jWothiu99lirM4nCwi6hH8PX/YTSiYSzPW3S2cfeyu8TyG2/zTue2HLkw==","signatures":[{"sig":"MEYCIQD0q4bLGtsz2Ca9K90Q2LH7XRECH4i3sDBHiEvf6DBYXgIhAL7vzMocSogWtkBT58k9lhf/by5UZTXZxei+Oru1PFeE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQa2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM1xAAoFPZrFw2njgCBC7oRSJ7/kaoGYIfhMYZpk0y18LgQaMdPSYC\r\ntUjZBnCdrv1wYn8L/bYVlz44tXk72bbRCG0w0SQiabE3fTcx4ltf9JJjC61O\r\nT74rV46FjygxOAOvzTlFxHtNn9FTd3GkolXaxekBWRUd5hGj0ILXpCssPYWa\r\nekCoyb7nYc9n4/bILWDbk1Qm1S2w9h8Na0KUo4y9MNHUIbm5QS0LR7XLYlvq\r\nPPWfIksFPrW0i1qgbjccGmf1bMj2LE2yFGFZkKrqdzslzBOiLWocfW3fc1ck\r\naj23cCWXwi9npsJSK5KJlyi9ONQDicMXKUTnAGdx4jvW8JK0c9T+OrDF5gJA\r\nLOBHlVhSA20gorZJNZMsQ+n5/vpN15bFzNV6ILWPn9I8nCqIkyDHuqcW6k1k\r\n4BIbtSJlrO0Nnu0T67TJm1QMGkVeLPPzVALWaOdQu3QHH/XgoC3iPUr/cJf1\r\n/j4vtUK6cH1JktCyXMOxJTHK6nGYn6svZs1EdbgxcAENsqUtoSDtpwY7y1QU\r\n2Y8Xw+XCv1TUAMGY5nhoybBjKv+1lRIyWjJzpcTkX/F2Wm6ZBq47n1NoDeRv\r\not8CZTJEvsEIKGaKGQdCIg3wULuJzh1AAnE8hcerAVHVX+fRLFiO+3v2R9Ap\r\n93pmCCfvf13NqrB0l2N5n8PHzzXeD0ldjOQ=\r\n=dmm9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7ab3cd3c8.0_1663108790367_0.2714194522810145","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"240d9b2133714f824e40cc5d4d212b037875cdd9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2860d244d.0.tgz","fileCount":54,"integrity":"sha512-inXjO9TCkPjW6tEjMROBsGt9hMvD3YsuRn3GeB2dlmrpH1Aj9rIREfcxFUU8zr2iRGnn3YqJs80dOdBekTRCDQ==","signatures":[{"sig":"MEUCIQDXiMs3n517f3Pu78LPW/li4ZE4ICDL2oyhJ6vbrhbEKwIgdamMki5Qvm1nFzBhgMsDsjhBcUN2sJLIjxcj126gFSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruVg//aEInltkGov06mgXqfzD8IMPJjCXU7SXWW3EtEwRTHw5G8sJe\r\nQy2T3rbwcYoGNXbUN2Dr3/YMxclcRvYsLMMTYPonYt+7L5mTtXXqtQKneP64\r\nYaHDGweW2QL/EHLYkszhKdNNGbydrnvN4G15SlFqMyYar+B6iZuUEIOHorRv\r\n1Hqf3qTszxRWjIGF/MKqHG65RZGX4X/Wrl4tJwQE36cO8p0RF6frmwM5XFiS\r\n2VwB23AQ3XjcAz4G51c1mOkk6aUmxrrReYKkDy7nAhQQ/UWPzOl5L3x0Z4lG\r\n01VUW58Dc/+fc1RFNbGLp/5DoHhMXAPbiNWzb+D9smb93RFhDSEmTMqJTAIK\r\nTfoOnD71yytGgm7eTCr2C92JEKnW1uzMW3dzFhJm819ZSBBiYKztz2XMzFkh\r\nHyOHegBNL8km7FOd9lZKRE1Xosm/v7lG0iuOAUyjKj7Qj71oaXLsHeuP3whe\r\njZELmrxIN6Ca4XC8XlUx6M2m88NSu3lWwhBCPwIU646UlSP6hs77tsJLD/h8\r\nPpeTfHM2WkYszlv+nL/Ayde+5EG5ZWJaK5FlyauFM+2qVUKgJs6/e++OjH1L\r\n7a1O/LDXLgvHpC/D3awba2BQzxijcvRaZ31NCA6E1Ro0mw5YlKR6E/5qD27B\r\nmPazxaH/9YMvHfRM9UT885eH5njQUzErvao=\r\n=4cMA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2860d244d.0_1663368928551_0.14642942031333273","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5dfaab34e1dc9de88ea63b715d468dfeac6bdc88","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e8726533c.0.tgz","fileCount":54,"integrity":"sha512-9WlouO0FZDFcDQ3wy2/QQXFt0d0U8+FJXuyb4ZMAnKNf7c+nj+MgzmYTvw87Ova0hOLQbDVGVRo4zq38cbGt3Q==","signatures":[{"sig":"MEYCIQC1fmnyTCSKEL1V7i6k/a3z0GsgBghCztmyectgNqGPRAIhAPt/x2PN3Rx7Gb0ZL7dHvyqGR8Vi6czlL6SmIQQq+FdU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiALACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe9A/+M/ExnVqhLRIkUX3w0vjYHz2/0xBUO5CvongVGy6cdgsFvyLg\r\nk/c1rfvEt5GjbPljzTsKHsTc5Vs7ajbN2XSqXVOckmURQvbjMsuwRqeoSsy8\r\naC+R8UHusSzpuhGy+7KKAF7rPb9TiTtTRQx7KoVIwWNhIcIkomYh0Ce6E3Tn\r\nIaiKR0bzXLlXSq8EHWQe4HjAXw+QeE2Zhb1Ek/TfstAUdmqw28dJdgwTkgN1\r\nqgPETRZuQHs10tiOt3orBYWtKpK+c8mZCvYUnciCdZGgZ407Uvn40j7qydZ0\r\nC8Alhe1oFPYwxTGA3TsCSAXA7ncUEMJg3OuW9jnDO7bbgcGtTX+zvfMY2alp\r\nBlAnwNwbpihhBJZlYZiCr/uV0jLToF34WO5BzvGjsoe/7KFoVycYQV1fvQx/\r\nGW/gNNiJtpQpGSi2yjCg9N0XE/2E1awyb4TjiolSyGi02dJ+iZkPTTIPmgu5\r\nuha8YasOiZ3Nq3bc4z7gpQmi6DDSXM8gchPYeDVYb2INXwLr6i6lsqRyGfdu\r\nNFerGip2HHCzReWucgUBDRglLJKVfk6tdkYdPQeKrm8vsx8c1czUhVoIjc1+\r\nlMvEvBOhbIrebuePeDmItED9W3rC1JbduR8G+FQTRKzomUiZQWSF7s9vmXoG\r\nf2hOz1n0AHwX3bOwtUZBe+ut2u7xdcKfgPc=\r\n=dowL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e8726533c.0_1663705099188_0.714650929247516","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/segmented-button","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3f6c872ab12427b7887b56380cd7231fa8ed733b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.00d8de0aa.0.tgz","fileCount":54,"integrity":"sha512-/jcdHgP4t50NSwukZ4TdI2hDAcXVcxGTFIMsOnY5SBV+UL3FF+UOF2ETog+xbMDd0sV/MOJgREksVX+UYMmzHg==","signatures":[{"sig":"MEUCIQDW8DF4UBgkxTmn70Io/yMt55KlGHo6JWxjLBqhNvcHnwIgZZZoCCukJPA4qkzVibnyJhjiMLTlH8YsMMMajxDypBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyviACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWBw//cGZN/2rARtIY+kDosTA8sQnMXfuW0Iqx0hvSdy9aIn25ifMk\r\n3nionAk5/m3Oos/erqYhsaH5JSCIML++M2u4bOao5pLRPtly87awlGjVUxJl\r\nUuUpbgX2eOUyuTtYGvQgmVpGj5FoPaYQ/S97Ex4URmWQLUIbsuCGaIVe1E5r\r\nCmXBg1I+bK5g7nWbpqTCLid6b8uEavUUcs5yn8NV7JtpzBrd15/t2bib0UO0\r\nRuUoO8JRlCI1pNPCi14zzO1W/5SN6QntTbWCrIdCZkTM6z3CS6ltMHQ9xbAc\r\npEzTqID0ENJC8P4IvdHKKH4ILLyAQ4kamcrze5v4cY2qAbh8xbaCFptr91a5\r\n+2TDh2JwmUd6rea1FQ9MjMX46c04lgdYR3uQWTS2srmoiNr1koDW7QNpIL7e\r\n4x4zp9zReu6ZOOuTTPNmjE9Zi5HFfArrNhK5bcPspAExacAqa6q7UKkux4D3\r\nYDzdlIF648qfO1qFqT6KoWdvds1WePreLNG9eCka00SRutgy4V/TcTIFM7Sx\r\n7ZWDXaLMiCq/eRp+CwkLe1At+7TK16YG0Q1eUH/xz0AlxjydYO59+j5x2s5F\r\nnGREEVwtp/C0au3n1MxqjhYBY/wGpIqiawnDyLU61MbjugKUkeqvC47poZUG\r\nWmge9Tgg+yaIOfkWdZIy+3aO72Wt2boezzM=\r\n=bQcM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/touch-target":"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/segmented-button_15.0.0-canary.00d8de0aa.0_1663773666188_0.41325781575110176","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/segmented-button","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5f45dc44746aab2079f3f91eebed6f916b436dc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.271aedc30.0.tgz","fileCount":54,"integrity":"sha512-HqzoTS5F/OvsMhSPYZEyIfnuE4ph7DkUaCbJbZ6JnQUYtFsE5s7vPVFRNuTQ+hrQsNqde275JouunjdOgEupbA==","signatures":[{"sig":"MEYCIQDrZd/a0J/D1QAXh/QXl0KzjR7SsmAI0lSgEbsAsw3jgwIhANzFXJSQvP++CtblRSfR2O+IRhrMqYUqH7cvsg7a9VoV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq16w//RIaffdmq3WE+Babk2uMjLVnC1aFPOnd5Jk23LBaVFn2b2aR7\r\nZ9ucKmhu8cHRtOKbl+ZqkI/0ojTzXtUsF4iMOGBTt2QhxRS0xGvFHaXrSTzs\r\nP4INErM9558eCUdYp15jLYZf5+M+mVyeMOMJpuTGVGyadH4oHIxWOIDEcxeh\r\nwKssBf745KWAE3YyoQJODNRGIUFoA1gdIt8BUWMGrVLCmwx1esE5kCwHEbKx\r\nT9NKzGwNKhO6c4e2KPdh5nhN31nT5NjMK6u2g7QcNWSPrFJCF16YYXeK4vZq\r\nLm1oI28h37ltisXk8j228DA0nzx5aSSbw2R0k86/itMgL4SIzNyACtjgU6U3\r\n/FdqC8etJ7gNeJcLIT+YWMuHv1AVm8j41wL6c+qIkdOhT+thvN++ilmj8tHx\r\npv+LS60+Z6gV69bO5SCKq3Fg47n7sd1oIahuLAPxuQLT9lwIx51PxAL41pP2\r\nCGM2sA29YVszxmO6JoZTU4bR1752NxdijpxMZCtnrhxFQZHeNyc4xXX5LnYY\r\nYja5iUHNJcfjPfHWmJ+kBFvudAm1FGMLxCfRCZHs2CBDnumJwsaOqZYmr9TV\r\nED5wqy8gaDweEfm4I4ks6gi35zORldYag5yFj/8amO4OFz6W06yb1OhVK03w\r\n1xqPFqywMTN3hEgShLdgyfZbY4vVb0Z9BUg=\r\n=SxPj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/touch-target":"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/segmented-button_15.0.0-canary.271aedc30.0_1663774599709_0.136708565161761","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7d6fe740658f3f5d8c4c0b90a7c77b894222c2fe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d3344c16f.0.tgz","fileCount":54,"integrity":"sha512-D2otfi9WliBE0+Hkru4XW1swyjhAgJ/IbCkSbTDvu1yqBbW5cyKx/im31xZk9Lu9mGI00H5xmNR00zZde9zAGg==","signatures":[{"sig":"MEQCIDwu9Xp9J6FzRcYeuzlUCVsQY7y3hWzjnXmDbWgkv9RXAiAjQ2FOzcX3L0xzWFGWetja+8KBQC4MQxJoovI8+qgK+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPVQ//TXvKbeZ7/pZ1wlzceJeJ/nWxgaFbx99Pbg2MEHxrkkD67XZv\r\nAi9J9u8HGcsbZ8nSB6AR9W/06rIV59FPvO3L47awbsB1Ijo2vAIY5fERAaVY\r\nQVbu23UxHYmsrSwe3o3MAPvDAt+82sgl7OutpUaYlAuMRTMCmj38NKhgdP/Z\r\nPynyJx7eBZTnNi6rGl62h3cqU+u+KKUwNRh+8LF9AtkPTiV8p261at1FZgQ3\r\nP0RPzIoP0ItWCgdQRuuD1WR9hzNkL8AbqA/LZz35yRUXW013Ay8mMwPuqotL\r\nVesgyzH4ljdUAeGIgquXcMAgH0J+Hg8mlxwHu+RVmiwAqXhywqSml10/v7bX\r\niROcgTcSyfiz5txWMMcNTF3ZAKdwkEpBdTJrMnPz/FeoFTAg/jMcAp722c9m\r\nFo/15E7SOwuzJF8K6sviYk1/yjieA7th4gCzBmjIa3u2+k0uvZv04w8g++HT\r\nYmmMvaPGqWUzIjB0fcEbO7fHvxehZRQr7ERG8ATod+m0Vx1UbVmM91lZqyyf\r\nBYSlu8egm5K3Gm+32ic37qe7esenWU+QJXgSMemdJRgyTd863MaoU5Cnz8b5\r\nag4pbH1wSJB61+GQ2MbgCCXd+98+sEV7pBexon5q1aIyQjsSgfMznJcmnypP\r\nhsiH+nQHgQV9u40RxKSeniT6Jg1SUvGPTi0=\r\n=WaGu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d3344c16f.0_1663838704096_0.7323552714332651","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9cbb2f8aa91e275d33fd705d9f10685aaf7c3663","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.94f20ccb8.0.tgz","fileCount":54,"integrity":"sha512-ImKJsf6ULkaGrGPeVMApt72MUKmawnTvEHLABt/ion6raNrTDlFK6lawAFI9DDbjSrp6zltuwEdJtwSj97zGnA==","signatures":[{"sig":"MEYCIQCrAxAWoygR72R7lh8pFotiP3Li4qt3jYRWBuofznWoyQIhAM8It20GCStDfFFCAw0bIN8Za+RysVXZoQaGpVCj3Yhh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMoTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Ng/5AKjfqCccgMZZ73x+8swqCfKT2coJze4dHAApjloXErGP14Oc\r\nV3UuyFn5Vse+922T++KNKAzdGP2v9fV2eWKB9gmI/9y53TxZeotDYO27/UqE\r\nU9F4xc700Fg91jUO7h7dTtX4qXViteKBHE7ejMlNAUWkAs7sPsX5dqvKHPhO\r\nqnK1XhoRg/pMCMAlEwHmYRzk8ZQ+Rsw4m5BnwfvK+kRGlzNkN/08D4PQgqxg\r\nglkRixoXTcsmqC0LWmzOMouhXLa2rfA7Rq88hV6DIDiA9FlhCOR59jD8Lzux\r\nS9KKoskc1+UBgKajFUsXlqG38HSTDkPCTNc2nqe0XQFWZn5GOY0VNHIdpDzq\r\nfFwvWOs6zNSBcXiAElj18PFMAUe/t+AuXJ5vpnt5CoAOg8PD1O3EL6CQMjS4\r\nY+tZB4XPyzATurliPA7RwszyeLbjgA+PDhSWiNSIr3KxM1g73zPORxnCA2HT\r\nB9VOBtzBCjHxbxtGxR5lA1TjsRfINDH+WDonybzefEq2etwMAvpPrglgwl6p\r\ntMLjWWqBOYAQ2Rl/Cg4k7l351cpkaTNSTKBi2qnqnAGJDADDIs70gtUhcith\r\n0XbJqxH3VN+XTRGzpX2gWfFt8ynD3OBVgUvv9cXpr9TEZh9ZNCVSSq+vURaz\r\neoTPGZAexBAIYd259f5wtVNisFEpkePqb54=\r\n=+0RJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.94f20ccb8.0_1663879699316_0.20700411705841182","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e14e7a21ac4e151dfbd852fffc6fdffb14b6134a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":54,"integrity":"sha512-ls4TkfwFMXsziOThXyu7suHq2TOKMizXhWP5Zz76ld7qVpSiopBHox1Rg+kIbarmBj7hW9w40sK8l7oqnDYeYw==","signatures":[{"sig":"MEYCIQD+S4OQOw4RDKA2uzZSucaUaCOnmjbl8D+e/gS2cHihJgIhALnDo7YM0Cy8sWWlAI5m84T1vI6Sai8TF2kphNtJb7Jj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcv7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpycg//aiiuP0SUooEId82SA0f8LM1CxxX7+zR+/iDV8S5+hKx31G5q\r\nvcwhJiP9i5UenRzKq4TFAZoU+PDCGtxJusKvMA6WEGTh99MfbnP3hYsqFeKa\r\nfifl6Pg5q6EcA7rwu8m3IeKsjsPSqBBlbrlxIUjEm/Jl9HUSpzsldtRkHTel\r\n2XuNjU11ikQNu2OXBNgMMTtpDeWHYMoZugTp4t3NbXPubD8iSYds+yBs2xkl\r\nw5U68peeqU4Dprx1UlrN2UmeZxFpyVOLeP86PzVkynkb7LO4ldDqui9vnOdD\r\nMU+2V8edIHAPJ/GOMyTuGWXJmvJBCksKfFBtpzbYDkdG87aa9TAALN8G3MH7\r\n6R7kkM9QCnjuB8yth+kg30bCmFbP7Ki8/wds68wc2eW8rumIGA1iDl+SOglR\r\nYoMM4cUtM2jaANjdBWKWP2fDgfRIkRr+atGAciNyOvOk6pK/DAXIERkqnH3r\r\nwsjobpEgpID7BzKsBFw2xwmu3TnGHUaMVeYWD8NFmXrOWa+2X2/SwvrSt5Qn\r\n5rhtY3manKA89PKRjyK3Ks2Ka71YBSlw+RczERRhQZfgf56N7oUFnOw3Jc50\r\nwxIDaWQ2FEbhIdDhsAkGtwqD8CYU52z7Vp0Fuufig3BIhAkHGDZZhKlBnSmg\r\nHodNLEvRAcVtV+fe7ixawmYQ4hYk+Yj5aMc=\r\n=E505\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.81e4cb7b2.0_1663945722894_0.6810814589278675","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/segmented-button","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"60169901f2a42f4f10821b16263d50c95bc686ad","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.aa85f9413.0.tgz","fileCount":54,"integrity":"sha512-hnQi6AqaArLlIlw7IgQvzdCR9yphqW7f5HENZoaBDQIJIltvW+qo1SZVd1h6uqGIgUo6oILrrMhWnYzCFqTg4g==","signatures":[{"sig":"MEUCIBZOw5rEE/jgSKbXOLGmFKYC5hv2n3byJrRqkoC7hpIYAiEAjClqX8TKZ0JcQiBIenSKVjGCjpscRQEo+MuDfvbAS0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWZw/6A2+iYTV5z6qjAnIELdVDqErOl6ToKakd1+Xw6asZukiEGLa9\r\nCmDOvs+0tJEILHaefOuniPphJQwjzO9RFmcRRn3/8UaObCFeSwrAbSjJc2DK\r\nZRR0Hp0sT0MIVhAXpcZs3rpXenkGhYdKsjYSXPzKPKF1lOgbF8bJ8qNetSVV\r\nDHShj7vla3oQ5t8GUyKlS53E2Yk0T9aFo5GRD0UFi5D4hAT4kwsr9Mp9uMvB\r\nZTg4+GmTnHyFqK0ccDk+nfLCKbZMxVFW4I3uv11NGUbF8iib9g2wLhv8KlPk\r\nNf4LexzrqdjHWc3zUp2dEYSXhiqLHRiUIouilox2WPLklKY26YWdsiPZkxGw\r\nI4uytiTSpvmdVULeRxkOCIl358mIkkryF7pqc2A6H0lCpIYAPWz3ovmrZtU1\r\nwLoNVSb1gG4WMd7AAX0H6KkFUe48LyUzu3zPh3zcqujmi0Mo7rC5tUSkSNab\r\nirOSncysD0YzTMo5ynADqfD3qvQ8xzjJC55udoIY0ZMJIojPAdRCd+Nqk/Yb\r\n8URbie//8bqrW67N0WKXcC3TiIT6+CE+Twvz4cFCw/7VrurQFckZbI2tGI5J\r\njoqixZaxGoVHYYeVW815rFOQVHlgGaeAecEVDBUZPpJ377mM3dfDjkXWGzav\r\n8/hK9O6mddbpwjYtzWO3c/WHFO9ZfVPgOlg=\r\n=gVsn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/touch-target":"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/segmented-button_15.0.0-canary.aa85f9413.0_1664215015806_0.03578092554028278","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e4ba47b80683782173c8663426198065c2ddd370","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7134a7752.0.tgz","fileCount":54,"integrity":"sha512-S+BLxzVXhoMxXhoCeGy1GYBx8K0ND5xiomUoRKBrIawgqPCr91DvrAbNcUVf2KLuQeQxLDFPHz4WRA7pMS1C3w==","signatures":[{"sig":"MEYCIQD63UZnZxWtGPHqEkiMBMB/sjxvQc9NGspxcZp2vgqiJAIhAKQwudZyZcTgyzOanXSk2k3aOlofYyuQ/Iq6XQd5GsXk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiB0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqISBAAoN5wjDu0NjkkTbt5BlA9DNQkU5VV2MLb/cM+sKL3FeqMIIUf\r\nRU1ruWcLyI0z9z4rwayQyYKEtJZ878PCq4YDOwf9PtpPiZdLfNicBrttZdPn\r\n6smukYiJSYJLeGtz2tIAT3+RkhMSrTee0kaP4fRYTUM8aibCTtjI4Tp0dL+N\r\nJa2+hnulE413FBEynw28z1p4L1TLCSLPN3bqCpMFRU2m72GR6tOGde7gEjMY\r\nGBKE67WgriInOq+T2ReOFlf0nrIsuiyikFYMtEBXWUwJNGGtdG3a4MgLHRZ6\r\nBr/YDUkT5OKCyrOCsmz2G6RugeD84GDUflOcYOSPtrOMinXSABilcByTrFem\r\nGpZ3HR78ts0tTrTNfikn33qR7nsnfshmd4Mqa6MkT8fMHT0jYUJhNROw4SsF\r\nDmUZVAfSPGr6/w5+X0Pdq0dR8MOYU/M2kekTyBkVajlzeWDXImAGRhWvCOYH\r\nEX3rX6xzF79APpNKHoi+UO0HDIxDG3uj6b5gMclQf/kI5A+EMm4TzQ9xkoOe\r\nTRgRGP3SITDKQFkiLo/B9C0r2Bk6+7g8wzGfQmDGKi3StskprWxLymfwb83y\r\nNF6/EpDXN3hX/Tfty0elnh8zhxTSTwfwr0tGh8iLmzRMYmh3ytPB/ubGasPs\r\nSXIsAINja9OgJvN45wmxFLknFzoO+P6U4Ug=\r\n=tbcC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7134a7752.0_1664229492153_0.6719633827343325","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e3c8360b32ff7c7f711a241e28141669b155db59","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.70b8ac16e.0.tgz","fileCount":54,"integrity":"sha512-a4beAZtoyZFWWvAEXUF5jZ1Yl51E0kSUoUml8ziapEPyvEirOqCn37AS+n9+GhRg3uIwq59JqrF/MkXp7ATBXQ==","signatures":[{"sig":"MEUCIQCbHFbkI3wYNLzJPMOklVDLyXhoI7QnaueIfAyAAQ8jiwIgO6/8IoGWqO+LrYdsEuGjaJA70NH+1Fe40xOIpFUTfPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT6Q/5AONHkqwnf0o8BL8ZbxFYBsoEwE/d7Mo3eegxU0xAf9jIO4dT\r\ndRuNwF1PSJO2E/zRVnObakLfiZjSXWa+HmiJEIoC/orQO16bAC58SsV7nvW8\r\nQXic3DgxlacLGSjVqInNWidvPz+HGvSMwjHOBJX3xc4OolohhfHNEVAL9dNR\r\nLc9ufoOtrpYEpwUkyY9sIH7Nw1ewd9YiTzhOKThD83MLLtgKNN+hX49Aty3F\r\n3XRSIcE+r8oVDmuWxHocwTgOII0eH0ZQkXD0Sj6Q45QdXq1iEHFeMoAMHypX\r\nhGsQRNQmp4HLskK48VBP0n61vwbM2/FNQGdpB6SLt8ePebAPftcOP1Awdlkz\r\nmqdkA63k0fcuAkbSe5LDdDAHXHtyOxrQBm7DB0IbHBbS4kO4B+zkAbwPQiH5\r\nQNUbdek9OdFDsG/nMVyX+fYESQsB1CaEQKN/r5ZQI/lVnPzyQ+4sdeXFgjEy\r\nrmDBnbB9tDAb86924V/ET6BghIjZXGZfeEaPTN+TY4bk1XkpxuYXtGYvc2Y+\r\n51mnHKZZbVBTolvSEW+xbviP4u5fxUNjAlQaNZZHpmAZsDPF2wV/8ilMhCN+\r\nXyamRlS024ZasL7cJ77D2iYn6FMZd7Z+Q4jxkXfI/3JKY5L4WKrud6zNYBMK\r\nqMl96yG4ioww9/MMS8uBJhxon3vUdPHQBxk=\r\n=91o6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.70b8ac16e.0_1664318723720_0.1601082967113605","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5b1cd0163cb03a2152c8dc090b9581ccb2ad936f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c20d74405.0.tgz","fileCount":54,"integrity":"sha512-2WS7Tco2dcjWUQng0I3YhHDDsBjY2/dd3bax5/x83a/Kt6CsxM9UMeSTfBnF5ro/wx6Ig5nowHdygmXxEKG6vA==","signatures":[{"sig":"MEUCIQDRpaNoxHZ+hBFUqR2UYKnTSSmePT+XfhhTUTgzrr07LQIgTEyZ6JdwLo0DyA8MsBQ0/9DYAzUuHxqUSC6j4d8urRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4fgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx7w/+MEw6MbfjjDO6FnIrU0RLt7H9iNk0ElcxqDh/EOCIuFgLwk04\r\nh6SsWPvjTQ1w+8DGfauvh/4V/LLVGp6BozaORxpOObbAU7mAPSy1MOIZYjix\r\n3JHbrrHQy3fJdCdTQoHhMeVwqueitwewxchTJO7ReQxLtcnU75okDINMY8fZ\r\nnCzbLGVz1nPrv5OGtB5WR6sDXJvufdz1QdXwetnArgJMma91o9GEHcxLeAi7\r\n0fYrZDRu5eurNUrqcgYjxSZkvFRYldcoBLROth27XxU3QmMdhCa7Ee4s2Ihn\r\n+1vbMn2NMlCs/2oYGybDbCNJGnJArtkgzMOu56uA5STEfgdunzLM0qCblswi\r\nF4UlzM/0zqDRhxz7/zGJbkdEMjAqVeNyZunfgGLWPP8Yl7mx2FEFE6FzbduR\r\n1NbwqXkQ0F7Ehe8c+39OBWn1Cy8c8Oz2JiGTN7xFQ2vcGW/ebJEbd/l5zmLh\r\nxkdfG7wc+nR/cs6go5QPq73del3SIrBVRbmr8tH84kO0KAc7sowf7is1X2Vi\r\noMdy15vommyP93DKmAi7YJXkzAPhlt9XobqJ3Xcca8gZYagrtyAxmn7E3XgS\r\nVhgiO//hiWoA0PN9PeyGQrqoChTTPbyypvopy8aM+ozMBSAV7GkQb4X8bmWg\r\n7jezLWU+kYbpnVnjfNU+4tdhBHVa07I8lvo=\r\n=gfXj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c20d74405.0_1664321504047_0.2526670830775686","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"490da2a9e2a4b2660d6b5c58a505d3845ca0e7b4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f033fc8d1.0.tgz","fileCount":54,"integrity":"sha512-3fMBSNW2pSfIPRa04+I08xVcL4KUnr3jLcN3Y6qv3I12WnHTlwFW/kl++93skOEueYP/btPkUb0+nAPz8tPQQA==","signatures":[{"sig":"MEUCIQDAXU044tu/qUnz+KsBrYquAO0NoQ63ot/5xjnXhnrT9wIgLm//WIGSqq4uwgJitXCEJ36ui+tned/E6wsFni5+rZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9tQ/8C9jf1Tk5az0T0FgAjgvOahHg97PHy5gCqgxkh5E9KInAaL4k\r\n+qzdvFLM0Pc68xaTOyrszkVtEEcdP4M3ZFG4Td7dw+eOtJKwBOOrtTSKUEE0\r\nWIpUmADdjwN00yGad2Kij3Hs+D5TD8KjQWpOjaJe58pnuxcnR0g1jPskZ0cH\r\nQoUa3lB0X7oJPiNNT+8st6YWy5/xzHIhb/pLer1mwQRHIzB6qnU8EM5tiHml\r\nu3sBeiTQCOEE6HswXXBDEKxVRm4ZfXPWDyEzKmqFB5AgJTXO/E+G+MTMZpbO\r\nuNPV2MDJvMG10pTiFn3c+oSJEIt6+GbrS98eqRfO309lEUJ5fYNtQiY5y49A\r\nl8LkmD+lXZy4BcG+4DjaZSf0XXTfsB+bsUjqCQhXzIb0J7Tgn6sKvV74VDV7\r\nu9UuNGyn11wTwQxYp0LI7IzmZ3fK105edo+SNT5jg2JWURTC/umufjdrr8+I\r\nrF3Zu44Al2KCuJDJiAl6KUc2pejylwttdMNEVPYwC4ESEKveUIkiLzbgacul\r\nThLytUbtiGKNJ1BmXyONY/sLnRgr0gzHlvnX45q7dRzhmieRimiBmis9roRU\r\nLM05mZOZkQ/2yyi64hfjWXgRTsaW5YGD6KHR9xy/d0LCB2w/b3hmaK6za5YV\r\na0rssVAD5T2MlgwIFVCFGQ6RrCjupMY8Rvs=\r\n=GAkK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f033fc8d1.0_1664323070358_0.20469811949777128","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"294d1fac77d6b6b0dc4cb1d491f281edd716ce17","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8d7ae912a.0.tgz","fileCount":54,"integrity":"sha512-EIWyZscelFsLcax1m4FDFEaeaLldY8tBFBEnuVgC9pESE4eYKLyrUSbseT3uQZmQRGCnlYHYfoXP62rdOp8jkw==","signatures":[{"sig":"MEUCICB9PyZgLeQ2Iiv9cNSXBYlk0+734LQSToCtMMphrWqyAiEAowlpt9wt1EVQDZHr377ZSWf5Uf6RUp2Dxu3Tl5i9xaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD2w/+LcwUbtdqYV5qc+JoOPsskGAs9qzi9nVf3ZzH0hhlTouOmGy3\r\n6EHdc8OrkWj5KdrGovdIJEpktgtdBFMYlaMclRQVNge4043fyhYG1+534/PQ\r\nyxL8HjxWH9hi1QJ268rGDLkBH9y+XmP3yvuhUgAvMZiWxOPdGUdhEwbHQN/y\r\n8WpRLtZvfu6Y8e/7g1qKX71KLtdqrTVOCJvG9E3RWsrd99i8k7aRiyjQj3RZ\r\nlGz8XdniCs9ScD4f68RnXoPAbNW0nF/eqCxAaoq5pLbDJycVIU+b/KXe+lQK\r\nQ4XmhoMix4oM5s5Cm7YvLCSYAOEhGxsTIgROoIbDq6UguS8Ck/jCyIBUCpdM\r\njE158ws7Ckb+KSEm1NUz3V9c8YkdtOKly2gj9BtQ6YTlNOwhOuyYxjAcCOLW\r\nex+RPttY+1oE8LS8a/huEy8xwNObE7rVYo1pCSL+EiYSbPrE90MARMJov//F\r\nekrsVmQ+mQvI0sEdi3DEAIYVFEYAb71E3PjVHsjytAF5B4voT6fAUxFF9FXl\r\ns5MO73mt1pqdGvBdM90W7G7pNdXDDJfpcPQhDSrkp7zatQ2PziJxIdIBexX5\r\n8BE8eHXqNcUt7f7C8g9EZkcxXmGe+2Anm1lpuGFTwE7lGlUOTZz8qjJH9T1Z\r\nGnrtUwIJPl+xyLj65DjUFGbN2GGVrkNRk0o=\r\n=cW6p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8d7ae912a.0_1664351795173_0.3887631119939057","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/segmented-button","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e13951e51fe9eefce44b96dc55725548bc2a5c90","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.db414b864.0.tgz","fileCount":54,"integrity":"sha512-+oz9rqBVcj773Ir54LU/0o2tRN8LvuPTvFyilmw0Y/OL1pZjjhzQOwmPaGICM6l4LZg99BAIHhwDuHrTtAGydA==","signatures":[{"sig":"MEQCIGTuZYJL6bUHeVqLGVyU+OYSgEnbjvS8bktYB28SULtiAiBVyEM4W82R+RUaZkqWTbVVyhRcc//EXBlOTQzjM54gcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0yA/9FN+jIDwunJgMsOksP/cbJWQtZhV2N4nHacKsvwVCuvBatE5h\r\nFxdAhUrNVRtGDpJFel924ngtDsdxWPM9m6BStesM8ws+DzkPj5OHKyYVgEjC\r\nasnbFxvSbCW/6S+sk3Bli1POY0GzA0UjdRW7wl/zvSulHQRb/6c0T1vG230J\r\nxdgMBW9IqoJ+YzRtiH18YXzJ2YikAdRrwe6WLltscp/kNnrpGz4avnMz+cRB\r\ndlC9n5eGpZCF23CPmt3apMNWe0BK+af9EwuIRwwXpLq9QOfp0ThnginEkQb8\r\np9kY9Sf+TirCMhFH4F+48UH2KQ66WaNS7v9BlSYQngKsHzg7TrbaEfiU2Xvf\r\nQ7RsYxWXtPuAjKUSkRjAJ7u106I3APKjl1LjnBTTi+Y7n/NGXtuTUcZ0BvXg\r\nUvGCOMigeDZMHbFXEV5QDSk3Zek4Wn8LZv9Yo1Ya36BY0Wfndy16g8yyWGb+\r\nuUd3J5qlRxeQfGmzsxnMzrLFXQYit91CG3u0owTXn2XnaPdbIIfXeSXeS8IU\r\niZUO6C0BDjpcDd6kkB0R2nmYUQOI2LlgX6unQwRrF0XSl24okGDWh5a5Fzdc\r\nzv+193KYrj7nZYNh2jL1f8TIZDZH3epIwvzcPRx6mQmK7hRr8wLlGQ2ESCe2\r\naiZLvaAv4nOButpeIerlqqftl4CjiV0Zw/E=\r\n=puGF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/touch-target":"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/segmented-button_15.0.0-canary.db414b864.0_1664376792931_0.5143394936448369","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"64a3d2521dcc00946332f54a7ca57b05ad3b6eeb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.28cc6791f.0.tgz","fileCount":54,"integrity":"sha512-++AOUflNIuasIW3pAQK7O/5/JF/6ktowajcd8HFvYboeM8L4f5NOhpxGfNdKcQrP4VKozgOe8Ckyg4YEe98OWQ==","signatures":[{"sig":"MEYCIQCoZY7pozHtCl7kQBAbQYzGyjCUkdiqyUhohPmvvf4+vgIhAJusKDuNY3J5PD61MOmgTgzpMk1UJbBVVp5x0aSI5r6r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT5Q/8D0e8cxLw5/4ieohoWATlOOEQTwNkEkj23qsKsu552vDxvGLZ\r\niWlUj04CH3mgDQ5/0gKsYw246EPZlUjiCbiETOBIrPDRqeYBo6eNBELfZkU8\r\nSyTa0mCgENuEeHPYDq8qlM48OFJnVI11PUpzRniZWThTKKjcGN3gwRH/Pow0\r\n0sNFcKxTyZ7sV2iJXYLB6S97BR5ZCONbF6qDknbi9/7UrLuh3NGz1MZpyuuT\r\nKyZtqT2GIjpffgNANf41fSbATa9vuCB6BOToTWdmjfOkzOrJ3GmyB0ZHJmlG\r\nO1NtBQ1zZB/aqKOMXSxmiIoL/cSgZJZV3HASMJ7vcid8kY7tuIFkJq8vie42\r\nyhM72x/KMBT2w5SG/lmpUIrHYzw0IMj59+p4oCwu/gBNd6RgVXhVxqkv/LXZ\r\nVoSq3jCqchozkciUXyDRnnaTFnGlSSe3CYWw7hKmnY0G4ZqinkcL18uHkClW\r\nIOaibUpa7tpirVmJtd1l9lpO6X7hWn8Fd4s72SC37Wv8mn6ni3+6wmx4DL6l\r\np04DCPX2GoiBIog8hplGrs9eZ/wA1Yv/Su5mlCmILwxHy39i6iwkJmR8+fPp\r\nErDWATnT+iCWdHheimURgphtLO5WxI4hCFlMmZy8xBqL8VUhosib/yucN2GI\r\nyKnJ4es/7SmeeyYl0HQBahCA7GxwLxQvZ3c=\r\n=5z6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.28cc6791f.0_1664388448497_0.6224066684430796","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"722f1545123d0e1a6c6cb5213cdb79b905340ec6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a515a2d18.0.tgz","fileCount":54,"integrity":"sha512-D7+XaFiMAFcJfWPlkR5D6eWtTFvqYalyPD1ENanv2o6/ht2x4dU/QlmXrW32p5m4QVgjIr8b90pf2NwH92m9SA==","signatures":[{"sig":"MEUCIQD/FkHiAaacVu81u3ie/eTAf1Em2atUA9HnIIKa//tOpgIgTLfuK8eSHbd3DeeE1kOxEP1XnCskYPV0UeJysOrY5Hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTZQ//W+LDOySA8+3Q/f3zAsQF2gZccnvhZ3NOWBwls+qcl2IMezdG\r\ngqqsN2QjnBUTpY1+s0cz6y1JHtnag2nqTw9HSTVw4wHHEOCaGmRznrEnANWS\r\n5jdjxMnQLpIX8Pxk2NcBSM48tCS5LpmF4UoKRHEhBHXs4vnhLSatobR9wJ2X\r\nFPV2z6k7k/Dm/KtX/CFXGTTrYYabQMZjEWwpa8o0ZWAbyZC6TCeEyyX0Z9Ve\r\nRJxvHNk2tCv/Wm3BXe4O+EQARllYO9yJOCaAGqv16AUjauJ0T4RjCRA9hQrp\r\nXsFezCjWUTBV9nqSB6L1uaFaLWvjJfDqLmHzpmcXd0jClT3UDMEeHegwJ00S\r\nh6bYVDplzAKEOED6UJX1bBXbbivEiaSbRZDb+KqzT2U0SiEJEhYj3niunbY9\r\n/ujZVQ2NYHSf8xjOGUAyo31+nX8j30In+4rrnoAzpuiKE6AWFBTMH2vipqZI\r\nik+/gojHKAMHZ0SnbA54ZiJ5bmR4/pVALYx95PwV87nd2ejgcZhS2S8/031B\r\nnBAw334koz5MI6d6lk8R6DiofsfWHxztyWGDDpbvV+VvNMi04zV1/SaxwW29\r\nQes6BVEvnQ/1zAkzZHSIZFwNWoGkfNA8M8UGwhwpKeDhM6gXlESr3zq5+PWf\r\nER+AqSXQDp9kpf5Wy7mUjlCi6DphuEhA6dY=\r\n=s0Na\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a515a2d18.0_1664391376202_0.06270242097149392","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b74eb4cb1fddfa78fb03146f816cebce4a96f952","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ce9523167.0.tgz","fileCount":54,"integrity":"sha512-aM4BHfDDXleDWtdh9TPtr3wOWWOQLYyVShYkBoqNcfWc7f2+ErpDCttZ3vVwddtg6mscl0IZ8HBof+EMKIysdw==","signatures":[{"sig":"MEYCIQDO/WePIXuGV4cyFwmDoxAJwk8gscKNuhS45di+4Kf/zwIhAMO3OoGhki3BznQMrNDxXPPE2bE0xt31pZVi/jYxt8PY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofWQ//VRAdPCVldz0qUveodqZnUH5oC+L6VSXrBsOdLQGxIpzUGTvb\r\nMRL0NFRNDfwg8X5WI/P5qWLwxys2BdT5P9SIDdbJSwPrMzehk1qNsBWCe5qM\r\ncR3ZUWoUbCOHs85OG9XzBhNONbz2dHTQjXU8Sh2Uc7lBV9YdmuMQ7WIdK5Kh\r\ng5NL7ukDkW2SMVcVlVx3LTcW2oNFTt1e86u9lCCWNC2FlM0y/nCHJQO2PfaH\r\nLpMw8M6abBoN9j8Re6pJfguol3layb4BoSWVSffHdd1dGbLmxzdJkgeZ2cea\r\nD+sEDECYvzPakmdWLTijgYV1lUXGNngGpm++lyMHhLPYaV7dWbuWEgQdetTm\r\ndBi7BuMML2Pm2D2ytq2a/9mQJAwd3+hsiKN1n0q3IxjcACuftm0//hGgvSin\r\nsApD3vBQzqlkc+OcWA9g3nU5bidPySjfOtbQMV7gVqzI1eRFGZvScVscSIRy\r\nMWOrtViQQ0cXkL9i8fC0hVw06bvTwhzLmRh/Yj4L4KV42iF7qS2eHfNeUuF7\r\ncH+dJWcMQzWE6axxFfJSP7L3nZntRjQ2znc06TlNJ2LlN6UTkBTZkYmB5kYD\r\nY5WHrZzHK/xnB7/xODSgWlaWpksN2ZRxbuKQtsPPzX0kKD1xAdMU2DqoXSu8\r\nu2XPTE59fXOttWZRnqTe5BTQDPP0zBk4osE=\r\n=IJFg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ce9523167.0_1664483501989_0.7732209283676823","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"10e80004129b1b0b7019c201c1ad180dfaa3ee49","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b2310f7dc.0.tgz","fileCount":54,"integrity":"sha512-u9Cn1xmEdqIm0l9SHEkb4GiqJmeV2ywRTHHykvTeTjxlKxuTUNe61UQ4TbOYc62SCdY59Ce0E4R0FQzgnQv3+Q==","signatures":[{"sig":"MEUCIE1SZbDC9SLEDkMKuE7Gs6t/rNIbY2CJRG4iST9RzCYUAiEA3RhqASy85b9u6+KMmSor7x8Feq3NNX05bZD9z8qOP+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobvQ/9FF1ASq7odv64fdpqsdNpU+vz88K4EgwskOxLOEk9+f2UTTvH\r\nVPwn4wRukUAc60DY//lrE0+jYTRicPs4GfeTrrrKlL0vLKNPrmgea3uctWVs\r\ndQNhGMHIl1brutzeArtgIbH5zrLbhgDVWjDD+WzXxDuKG8WRS4OPu7QaS09G\r\nBd3ghegyPcMt8dXpVpth0EUQ8iImqbGRSr9GvBRi5zehnQ7SQJHjfBA0Vf9n\r\nVLlE8rW7BBOMkv74YW7HSFLFdYOokhLPkfTksP68eOS/rwOVPdiKdp7hciHx\r\nrmYQL8wVJ42a8aK10VXuTVBs92VjW6r1H92+CNzM7KXXmZcJcRpUdlV6acbB\r\nNirMGSMfmHSuA7mIDHuxlTq/mDE80278PV+z8ViqLlF/zsszVVLqyaEwDA2v\r\nYvaf6y/8MXoCKhDWhCU29wpuVTS0Q0r1IKhxeFQH++/QhFeX77zYK7wf6jci\r\n07o219PEA6dc6yd/5P8pPe1KpBNw3zOVnMYhOmSqsgNDxhdmgI7Sgr5CpHZb\r\ncYgm2zB08WpQZOMtT//+EJGbUm48tL7kJe7BJLAkSWWsmgAaa655qLcO1zNV\r\nvrEb9AODIvUFs8FStlQB2zqc+xHpSg25KRKc6HQis2/PVD+ok58iBKgmpvMt\r\nJHlZYKabVEjQni5nPuI4B/d74ufnrXa6Xko=\r\n=hfHG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b2310f7dc.0_1664496858751_0.5815581502164484","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f1a84b3262444cb52be70dd4488fbba80cd65ead","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a44241e54.0.tgz","fileCount":54,"integrity":"sha512-XYTBmg1f1E+xZ2Na0EczQ/15+IBmfxdkIPp9nZVQ6NYogabYtapP6NKqi+4zQd49NVJ+smWjElFM85MJNPGVMg==","signatures":[{"sig":"MEUCIAWnkz9GypHLPwmfrVPj7OLcTzAJCP4KEcrgZS5hjaVJAiEAlB9+aQahHlCK19qf+b01qIRDnSCtMHLG+GEyDbWfHDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUDxAAhPUMPNksTpPqVPYywa3vvD92FEnD/N3W5Hb3A/OdsAgf1431\r\n5EmztqZaP72o4TjABtAzBrDo6+4TPxooq2x33mnREhjsKd3ySYmFPf77ccwj\r\nMKjNeqqS54IaA4PCgbEQYHVdSPAjGvBxCQQSqEAI+ndsrMoAqbf8kmNPYkpG\r\nxw692LirD6wFbWBAG29bte9WSxK/JbROBuKu86t4NlDNwy/XOv56wUJwzlAz\r\ntXkO1KVQEFC4pHjrlVRxMrLI9wFPN7E80pSdLW9PBUcikoFa2sZm2BU57YBZ\r\nmjwT+fJqhuOJBkHVSqR3tLnbsks7X9X51h5ZVeVhANCLg8YZtwF+WXBIwFLQ\r\nq4DgmlzxxbCNFFSWJKFmj2nod8B8U+QZljJYvdMlnq/FsBF6rZ1+RlmWG+qj\r\nCaGWHMiDMdkxO2ZemyEEPOk2SGQhZsf6xN0TnwkMLJQBez55CM3JcIj174QF\r\n04VwAts4XQxwfEpRFNHPmS7akczkgfFTn0x7M+vA4TV3om4HUxzGaeFQ/fbO\r\n7fzfd25Z4Qfh+n5RYF0mE2PK6LtjQQiEm4MlfiH+GXx6g+mZCzgBgd5+o0KM\r\nLosd8Q+0mllkCikg61kKOwmyjslzOL/uDaH85aqJzNcPL661PNIsOx0DYTHB\r\nn30SmNYMEIUIKu/7PjRzQc0uBlLLBIZI14s=\r\n=gI+e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a44241e54.0_1664526094103_0.9523572040662498","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6b13da156b31f56068a2e674a51c8826b1e87537","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0ce81e115.0.tgz","fileCount":54,"integrity":"sha512-0Dm6iYlSMRuCygcOWnKvYkQiV3Aqi4MRgNUJc1kcxL1UD0WmkgBhFfKvDLt+vFjP2aTTitd5io6Gp44DEYfkZA==","signatures":[{"sig":"MEYCIQCd8nVFDbThLb+O4Gs09Pa5GRCXXkOR+EMd/ZpPuJ3JmAIhALIT4k2bQZHws/8FTCwMnJUjQqPk7qVc8L6zoOf/BDrB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq16A//Q265NFou2etVEpWKIG6+3wQOnPQTTOKNg+K1aXoKfPWGFmlO\r\ntj6lFokRVuxIFv2EvKZkwcv9zwfvLXEpbfnv6M0OUMzDQG4Cyesjtds5VjYC\r\nr4lS2wiglWoWsuZphUzeXX3QUW0UblaGuut0kmsxWgT14mliTRXeg9QAohbL\r\nNXwqyuqg3XFDtTqSyUAbvGF5SLyfsmcz6LdvG0h+5OSlo3e6VgKLvDMlz+0t\r\nxvGdH9R5nbcJebEWBfnyOLEWZVM9teNto1uTnUJpzNOpv6Lw36PWqXY6UAvP\r\nfxZ5wxvJ0gWenkmnmOJauVLkWKK2HoIebFvkpOuduPlXQbaiF7PlQo0xwaz/\r\naSqGeWll4myUFGzV3pMZoPvLtmZ8COoVIfCAjeR+Y7YU8CLpjH0dyxezUFYH\r\n+ay4E1E9kDDoqkxHOgw93Atew2H2gDZGdPUyJx80p1eZdzXDbUJLFy6IWOS/\r\nL56Df6AIlXe/BWs3hpLMb6rZcC61V9SW263aWT2Iu5ZF41icpmadf2TikZEB\r\nM/K5+WYROyFk7A5Zk7KPPVR7QZalx3HsDu546U1z7Y+oYOiZLy/xgqd8n/tx\r\nYyc95r8tlzKpi2RjTTMQxYQJKLrPgsi+LnvFhwHPHdy7dYasifsnDAHmJGdy\r\n0y8Hk2nCQZgiEEHedPMzGPqLE8zvPtdmi7s=\r\n=pxf0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0ce81e115.0_1664561920410_0.035691102470056135","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5c7b9aba55bc66acb3ebaad85bfdd760d1a097bb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":54,"integrity":"sha512-IK/jC0EEhlyzFLpINs87zI20v+t+AKb2LbqKXhXt3hkITzIgep7OlePul/Ua3s+UjVBf3yKpOcwR1HjxxcJMlQ==","signatures":[{"sig":"MEYCIQDO1QlfFzJUCGCEgUMWm+5iuiDiWxTUlqHAOmccJWPwtwIhAP6SgZb0BFNXIN2xpoqVa0Pazghm35ixTTz1tmVQzYHW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGs6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos/g//dxkxj+8Cp+4Ap+B1mGvoRUg19cCrLFDXq3bOzbJuaV3Q0v0k\r\nd7UOWcpcrNxNxSKpup4N0kQaHHFsJnlHzST6JQsrrhDnI6vPGBxHRBf5RHJe\r\nw4ljK76TYBIVGmNV9cIlFtReto99lOHbYuYc6ZWT45VqESqUMJCrWu438ywc\r\npLqhDuWYYN4ctxushNe7UlKs4OkzucmasKIlbCgUYMilmr60oesS3rPMVbgB\r\n63LxqSIjqYG1bzbIIq/7Ohwu4dhdCvSTCRVWoiHxDGdYZLsJGq6QKTwtfM7P\r\n1EqDblJJodbt+iSXZBCOjDodt/+dA5KbFF9EsulsHf5YX32cLuM+TfsH4Svj\r\nv5rjkKfpJQp/mYYZXaLcvM2bgt59qqVc4LdreNYXJh/aVe5aovZa39IHppMT\r\nEgnC1q0sSo7NIc+vyIlEq2UqHmLnhecfi6Ss/z1jmufAJ7ptT3QmcQGRO16t\r\nKwpQEy3KbzFctoGSZKn2qJB7jD3bxdsS+Btj65ZOUyKYMKytFPhe/Bw1GfKR\r\nVjSbIt6UTvQyVt6OWFFBnayVzuthZubADt55wPX+vJDuf18SYWM2w9O5r9n1\r\nXzOViW7w5W777IUjChwlL0UZkUDNTntm2SVGIIi/P/HH0AsBkMbpJhwbeCJU\r\nw1UxbLh7g3tbOS5ElHydyqi9jFzsLhnzdp8=\r\n=3l+Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3cc30f6ad.0_1664903994755_0.7646065748099271","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20614402bcbeedb5bbf89efe8b9217a4577e4e56","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d9cf98e60.0.tgz","fileCount":54,"integrity":"sha512-H1jnQVRD9YVlKLAfqfxWbk106X6Wty20QyuSL9XKEOzni583qKO1Za5avSThRBq74gNDQJluXRTN4GKryECoOw==","signatures":[{"sig":"MEUCIE5tMCOEa2lmGWYDgeRuJzHuKoWtnjKUfVhj1YgUw8Z0AiEA+pK5JUUiQDT04Iw0ceVwSmv456viM12Uyj0umrLmRkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpTQ/8CaRLz+Bcl8MyTZBgfILAY8Bmzel/945tO/zlbuhKpxsN172A\r\nrssaZRzF+molQ6WdNxo6zqn0Gwlw3s4HdtP49c6yfLalS3TzaeUfj7WrgxYg\r\nztR6m7vp7xJ1PpTg35hPvOwetLbn2u7XXqWV0V5K9FyexTWLKV4TpeVCwdcT\r\nT4gUbLopWaRVaiGt2F8GYBJgnuKsogcZgBozce0i4l89ov8ZEFh47YSfbkvV\r\nbYgL28M9baJM2dyVg1s+oSMbENT6pcq0zqF4XbI7s96ryfMmI7N/WHrgSSHz\r\nPqq9UnqQO93UTXJhbnG1Dn/VqUZslwHiVJCCjuPs+z5yj6NW2c+lApZJleAe\r\nynDRnFSEyH4Ec6bthfqh9oSQp3eLRdOICdMmx+QAZoivzlhptIb2EaqqMhOx\r\n8+qzB1WAFtlh3tyqfhsXClIwjsNi26q4QXEBSQDzNqqs8ikVxZwSiNPVinW8\r\ngAceBkeZfk7CH8MlB0GMbHgGJ+6gNkTZOFfiF33BY/M4Jv9ZREK5uO6lhuF0\r\nit4b5N5r8w3rs6xwpzZwURHnchq+p88NBgm5hXwVZ3aeSASTAaQ66UVfkQdW\r\na9dnn2MFOsZURnb/sbQXgEYWStNJkjIJgGfPArxbNCMADBSpse514jcBixqc\r\nMEXWzfZMPC7hYTkr7RmJgfImDWN0zlehBZo=\r\n=B3dt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d9cf98e60.0_1664910254826_0.6091016756017418","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3b9fd75a1f73515931d08d4ac4f9d331bba825e9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d71935c8b.0.tgz","fileCount":54,"integrity":"sha512-0Jq/17XBt/hzhSg/g9vnyzOV5HBwfH7SOsbocydpsHLYtOVjoKP4iRAmHVdMmAUi0wqGfChvyK1s0L7KwBV2pw==","signatures":[{"sig":"MEUCIQCzklWR7AkPdNeR56sEbYyeqd+C8VwZzJR5rvxOvBNXxQIgGcKCsVXrFxhOn/qet5PHx2TztaFgx7+H0yIBlVeB8Ug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":571613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGuA//cNa1JN9GvkuDDzNUnEqJECWKs8DxtVz5eCsbfPTbV0RlSViP\r\nQSwECo73e6tyrn+5MaQM/B3QcxZ2N28VQs0iHtY5sr4alf+uQQhJHzY1g/vm\r\nGQ0uvkxb1mgh9Q45wNrP2EqdLXPdb3KoUjcuMS8TL5t4znnDtoQ/HvPwb/MB\r\nwxTwW+AoEHEcNeSl5oDTgjye2kotSnpItBrF+GKrbvAmGsJfyiowRNgj15Is\r\nhJrTlPObCGxc+R4dL8Vxwgc8+ed8uf2l/hAg/31XpWdsBXjkvyZI3FdyQVvc\r\nrnTiTBIDyDyGPpdy6rkJfoIfKiClW2gs3Aj8Fg9HnLq49GSwkDWIXSywfRoR\r\nnxgc8FwRbTMwJCkvQpaeVFlnj2eRswNiWes25F/VsN1rxc0W39ksCtAPeEcr\r\nJ1R4HMTyEGgrjFZfqVU8b4ZIk1i9BF0BZPDXrmuQKf1nOs4wMzbxuJzkqqZK\r\nezXpj/vZGHyxeBXhjIIH0kCXsG14lwOFw8Ewdy/nTutyo+huMF3C+fkrMmhQ\r\nw8cz8zk2iY+OABBGkD+ipzVTjmn5jdui+yqZVwiskbUx6RqARKvBo+07rMA0\r\n4rJ3dA3DFtVVbr21/aqKXvJ//P8F/VDcXK65NWHYWX3gf7UrpM0iGHJMhb8G\r\nMTi2hiLMIdYFbQa5B0+TcUcynDdr8khWj08=\r\n=asUh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d71935c8b.0_1665044124845_0.21817254082578597","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8e598390c0ed875f026b02404dbc2cdec563a06e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.49c56a25d.0.tgz","fileCount":54,"integrity":"sha512-bIZ3ShjFK9hdSRQMSt6pNcJ1gjcDQptXQusUF2lwFFP85oRWQ6H711I/EP/DhjrQByKAdmnr1CVC7+AdesDIuQ==","signatures":[{"sig":"MEUCIBIcPIUUb5zec375i3qTQ0xrxPy3/pXziKLYF5X9saz6AiEAm1O8PrQI/Ad4MzaNhC5n+zgEtt4lStJc4y9E0hzs3/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo/A//b2IN1fLIib0xqU//b9UXmptfjRMY3Z6FTy8N7+AvwMRxrveN\r\nfnc56Pans/fSNxAWX6ozrxHbSSQ+NRQpRHEVFMA3tl7navxE0+IcniXjyzOC\r\ngQoxDF3hVCQi3uxp95tSKSx1YDlx+dNb/ZExOYP199/Vb435EgVQB7YdUAyq\r\nhs2fFNhmB4JOHvJf7Iw0AAwVlczkN9GIyMtFKiGg6w6EXpfbPRVk/zQQlSI2\r\n0omyd5UQXIiETd086niw+1jo7WW6diylH/q9wtzmzEUX0IIBhMnWRU8LFOYF\r\nOS8N2/XbFIAUiYw4elVuQ4ZP/gXZsYcvde8/lKqE4Hn4bsZ9Mdj9mgdLoF0Z\r\nVAo08hqtgIiaNKdOgUz6D+Di124dc4qdn8Jb8zD9s7Rfk2fZ9uYavVRG3qXu\r\nBRrsoDeBX8hFgj8TJvgJI/hAIc76MwM8wBUXAM8y3BrgnehTR6YLezJk+2g/\r\nYkVuRpGPdXDBPb9+FMlU2CyAgtcXcK3W3jdOrgtfAhRC+Z2MSOCz2VEGqvZH\r\nIxQu5HcXEeF2KHptS4XFoc//zAvRsA/Kkw+epxXO4nTZ70VsuSKeC3+XZDQF\r\n/Gte/ngJqG6pF06C39uyPMlsF9szfkmdEMAiwu2XL721F51V5RtcB59vF8K6\r\ngbeSOapd4UClfJvqXLrh3YFHKB7B2nwPVbM=\r\n=MyjY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.49c56a25d.0_1665082283580_0.33492145819948727","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03481aa6e5f62139b4c498f338113a8231b6b6aa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.07acddef3.0.tgz","fileCount":54,"integrity":"sha512-Gb7jZauevQn0o9WVpG/xa0Vd5XKH+xro5+O3TuV9QJ7EhbmhXkC0A5oF7QGCAzdT95+d8gfTa9his0EJ8SUyZw==","signatures":[{"sig":"MEUCIQDQ1EnR9LDX+cRIfaX3j+R5e+As2aPI4MPvyDydOpiYtAIgItgnam635CZRy3bAnZ+GO9QIqp/rAlbtHkSaliLC/XQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJxJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0YQ/+J5q/pbKO3Z19leuoyPEGWLNsrM8dTmH+rok3XpsH7AxOAlo9\r\nWLwfxs07Ia0NFY5kaG1CP3Aa2ZAMFJswPkMzLK9222QIoKEIrxMWNgGYqQDt\r\ny7ABkFTKGUP0W24RPmy8R4iBYCI52/5oi1BZC3x3GDOa5evN6QbiLO5uAo9E\r\nL041CvoGTGS4wKkQi/y1j7f4NaQx7G6naM/pjwiErjve2sbJIL1Mp+kzyQ8x\r\nAUS9LPeRjKTp5ULKzcBAg8riZskpm6wyZH2Nenq1PiUYaRcT73w/au610SPA\r\n4o4evzpDtoE7f44z+4C+nwEscJFu+K9WZt1P4LlCB4HKbw2SnK5S/xXsJDOc\r\nI9KDmFg2hAoNwPV/SXq2yx7NPB/rouq7oma80D99ESuaVeuGmzBV2MoTYQG7\r\nqC3ct1g3G2ROjCIG2TyUPyIGDOhM0AASmI8B19XhDIc8BulY+C9Ngd0/Yles\r\nGiNVQGE4mWstoGzsBGKd89VtDOqfhv8aptr9meyXsUuomahsOmGllxVl/NZG\r\n996SIyIRuXCVzix/rLijEeKT0U7DvVK2l41EhVe5KUVhp7hhG/GxohO2iAcS\r\nlAE4sfNJUYHq+fvLRKuieBA+NsUHIzuYIjT8uzDGgjq0riRUeMyhzSssK6Kz\r\nerzjQ2J/owMd9elkzQdLgBdV1V+YAcnoKvo=\r\n=BFXR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.07acddef3.0_1665178697059_0.8722704747913823","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"631c1836236e06b46bcdb0b1aca792945297bf3c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":54,"integrity":"sha512-QLnfJShhKsys7ySFRaHVFap8C3TUZXNnr4+xTP4Eu02fl9/ZxGWfPnSqXBm6KPN3NFJ9IlAMVC8b5p2Fqv/2wA==","signatures":[{"sig":"MEUCIQCCQ4tn7bpB7OLYYirrGvIPXIA61lx6iIwMzUa2xXxn1gIgVNC9cGY9rgiBENSqbDCv5J22oogu5DIP1u8NzUsd6R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV3w//UPzt//aYuxgNcyBUdNZfOIrIJtvJ9onbKD92RCAPyJ3rKN6D\r\nR3Fm3iiLMCmnCLJogXxZYx+ZIIJWXHm+79ZSSaOGIDpV1p9cOVaeyi+xcpej\r\n/ypJuNFx2OyhvVYc0WS/LjYH+f5OoSR5NuWJ09Ua2xKismbaQWIYWN34mUJ8\r\nUppZJQC/rDdQGDedg+zWaHkAWjPWd7LAY+0ZFO2XKsyqY+TV2mPJaPWJBvjf\r\nOsJ6cqWvi84fW2pzfTSFY9ms3rXqdz6uXDIQSdk9ToRZoYJ2lB+tqWxqLQcU\r\nnnaNDxhszXjldxoP3BrJkGp6Eni9Yehu6TA5UpBm85+0Ic2VMihNqV7tbG1a\r\n2ZGTnEjC/p7gSEz2PtfOrkQfGDLxtGDA11f2dbnUyFpn1Kl+FsvKzcz94Lmg\r\ne+gUcxE85arLUovW5eQdhKHZZbkyT5QuIVKpLNKzr6UWRZd99Y4S1SyZM+ET\r\nbWP9cG0RyjPqY0n340dtRhsVhkpzoZ89YELASNeIF3i1mw/lP8cK6le8sh5E\r\nEr6lt7l1v9NQgmpf0S89G9bbYfHTUWEyw3tkxKsu9YA7Em6dgqPEf2AkTcUY\r\npinTg7R7qeohjIuQ65W72rAuLUvm073AZnZXaSkiUEeCnXa2pixoZVJvtD6M\r\n3iJ6/N2ftxQ+su8ZD92SuGioa5vCW0CS3Dg=\r\n=Q+nb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1c74eb2c0.0_1665179751378_0.020435488704011906","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"706cb3522648c81c9fb29259e3855279571ca415","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.dadfb713e.0.tgz","fileCount":54,"integrity":"sha512-JLd/700kXbkfPCkCE39SDUOChYGKFeLl1qCix2ft9XUN1thpdzz1bitRekWCSTmfgfBQHe6tE/LXxALGc4qwmw==","signatures":[{"sig":"MEQCIAKI9a/Q2d3LnejfXAxmKwMIcGgz7zlAe/vf0DrsR6C7AiBLrLv/Jt9wfcic8Jtmx2febsHxjn50eeAt/YuWZ8jDGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRuw/9Hr9MhVbFpP0xMPJvn2pC9U2E67eRxomu7hONdGBfozUhclIH\r\n1N6J3RAs2pbbkukTgAK42A+JQbwwAmwX1Wp9Si4wrkoVxYJgKqhm73C1+yhV\r\nQzNSZEKuGhOVet27YattS04VAV8UWAceqO/AlGWyJ1afdqZjZgOvMPnOn6d8\r\nwGHrpDqy34s9QxeMJmINeScNjS47uY0kMwcp38JscIpwt72PPcVhvqPX4zoW\r\n/giU1dDArIVFmU/IFxsqOKio5h6Kdyh0qy5loLQ5nZUXOwBSxio0SKIHja+A\r\nalJfd6VvcU/bV1VxZ608HMIHthYmcdH1USFbv6XjQ0vONzdCK/O7hAHYIJu1\r\n3LOHpf6vIWLwqcMkUaU6gAcM69A4GL4ndsWa2tfiDIb1KdcJgjgvbKmksH+t\r\nzMmMu4Yw4cV4NxHp66vZfCGd75D5gJhBzPaeAgkTCs2FqDdRURuanJBtwbr3\r\nCnzv6IdiOZvJhAOR3uEECFtRUu1T+BqhjQ+brlY1dvWoAYka1IE1J1LjP1q5\r\nP4EOj9ad2cqdNbDheGahDNhgJmDW+rRDA7Fh2dYf8sNVMh23BegHnsLciDgY\r\nYY3Hp98B3zE5kETPxoX7k7R7g/4sBzVd9iQPZi4RK3TReTeqO3kr2o/VSb3x\r\naCQ/Uft6RNr2B8C+LFFL/0g9GSzVvxLtteU=\r\n=CD40\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.dadfb713e.0_1665205589048_0.8097458296969571","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/segmented-button","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9ea6f6746f28b08659b2da76e6126db51cd16e32","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.395f1ce61.0.tgz","fileCount":54,"integrity":"sha512-HhLSSzpMTgB6EXseMOqp6IbkC1yve6rj0fA86VMmVCIJLBfZKTeW1paqUuMIEm/pl8uFgxh/aoIUn2AUjNExUQ==","signatures":[{"sig":"MEQCIByKM/aBoTL/ITK9goFrJlmYfcKMOeN1effRLlFDw92qAiA7Sfk7KvXCW5CbI91mUB1OcLg0eXswe+toDVgEY5QI5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMIxAAojrLmkr5ytzzE4EWyWrbD2ZhD80WE+6ioylDjvEnm7fG2Clo\r\nZR/rhUwaF24YmFAvJqttSkYkuFS6LsKCtR+PjlGWxGdpmbP7DRiiss5FT5I8\r\nPkBhyO6EyMKDjo7iDD1BjT09fRxBfis21Y+VmMTZyETzRQNNT5HiJiimrpHB\r\n4jbY4zk0/0U1AuE2Eq7vvXa/7N1erXBsS5FycfBnlEvVvzUCVJDK9bbKaWcO\r\n1Ire6b3NDVP3kaJml6kzLHZtNyRgEi8Tq9JGq3wXkWIF//ENu3gX6aPF+UJa\r\n6c5twusIGnEs0EywzAREQml7oxbgVRHEWIL5OevCSLxHeXwzyZeYlW7byroK\r\nSXgcb5D+AdsEiQOmOcsT84/yi9yRpcNsaSgPS5NnPHeSsIhmuzVDFXqFa64z\r\nQz2psTeZOuRihTbwo0JxfedAercOKcLh7fFzZHjO+FBgQge4KZdKwnbtZGN/\r\n4umFKDE23X9wjCj+6R/+fOj37XNiZVKlfCVfryWVRnpG3IIVBWWTKNMEhusS\r\n9Yrb2zim5uBaYPnvg0O3l4ONv5IHZHkikUm1U05b6cARzoU7kVXlEDvA+Knh\r\nm7U8d/fpTAMA6McxW5KHuMkLY8l/0DjXTUsprSOsR7VFMQa38/D5Xa0AovdD\r\np0pKdbRu0bJ6xDL9su6fHh9PaIND+SHuTwQ=\r\n=/3PT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/touch-target":"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/segmented-button_15.0.0-canary.395f1ce61.0_1665205709825_0.6420448617937915","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"16a48833fd8f428d296fb8fc6d252c5e4a5910a2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e741b5c82.0.tgz","fileCount":54,"integrity":"sha512-ZuDzDrL0t3jk/dHVg5/pZq1q+68ZipA+MC7tRMuyf3AypNNyf/KwJCGYWB7koTuDUt7mowDhvvX720i/X6t56w==","signatures":[{"sig":"MEUCIGlDj8LXSqEYoclsUQDrx+WO151pc48jaBc9AnPjbFQnAiEA3T3kS8gX3/c+yScTfPYQhCdtxY8QoBpYxL0Ksrs1eiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHHhAAmnZA+Uc854HeYxAcgyHE29lzxcN8JagPIuJSjNbnJo+deTdF\r\n1lqdrCHJc9wNfIINB1JKP2e+su0wBuM/cQVCQGTIJyPGq6rDVqNb8BgRIhl3\r\n2vCs/uNmL+SwB+wup65TwD3F0UK1dhe5VVEzJZmfTaGvbVLEQi/9Ptkn+mV7\r\nxVge7p3m+3VK7B7x7fcZCu7mT6J7S6Ht+4aroJsGJawCJPoJa1SVbDpHF959\r\nRkwxg7ev9ivxYqz5Tq+e7IxflyRvo+fQDhLa/Xt1oCFC7n8EC/u03+K2dw9z\r\nsSGRV7gJWj3ZG8DETa2jQiure67ZsQqxvQnoWI9xTHloCmpJahlpGixM7mPV\r\n9XPphbqGsh4R/+GDUyyNjjKnayBa+HYTkztncEheM3FmgGqIVzSwvYxKPiH9\r\nWlTx2um/cJkLFkt3u6LTE/ivlBpGin4apD4WN6G33u8l4R04UhXVnL+5uU2W\r\nQtuTO3yZLbR7gBQmZhOmXTyqNvvlVuyHjtYu19JHxMd4A2Gog6ndu/MklqhB\r\n5CInUfuiJJr3yIJGbHTERhr96zghxK1SL7yhOgGQiv3UGkFtrq8Db3U2Y1iz\r\nHPdNnjaxUaCqL8qJsr8/vXxdTBdPFC79kPR4rIcClc0lr93wGaQRN2Gb6I8H\r\ngimokJ7DRkS9Azi2wDGgB1C/7fIGf/DMbHM=\r\n=HROy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e741b5c82.0_1665423530110_0.24317200965401686","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e07b42da56512e206919f7680a8d30bf60d30995","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.582f3cc1c.0.tgz","fileCount":54,"integrity":"sha512-LVGoXQAT1hiyP/vZPIWnb65MP24FjnR5QzlaCzmsKNEm6rUpBUlJLigfbEnvuTXj7wFBmBPAlj2cuOgNFC7S9g==","signatures":[{"sig":"MEYCIQDsKSp9MHWQLKwzsdsoDoHQD/CreKUprhpHpZ60B7IuHwIhAKo4TQ+OwbKaECh8tUd6Fqx6GmEmXrKqu5vrzBGpL+5u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCJg/+PXaxxSIaFp2IAPz2rGCxRn39DZeUO4R/3TIhW5qElMu4CONV\r\nnIhkDYkk50BBicyxM7u5AgLYnqxCmaKtZwPzBOkMcuUSry+3TDAhiziTZS9+\r\nOwhtxVVB1Rm3fCTaIKHGC7GINfYzwuuUd+43xU0gORoVC5pP2SUr0705zpT6\r\nuuBx6vXev5SFhsuL40cJqcUaRwPrvKDJQNJdX8VyD9K8dL8RX7qbk3oH+af0\r\nNLMIb/NjHklnx05Nm3REOxowOHc7V3Ca3TDQWY3RWxzlZqdHzskoGPSDLP1S\r\nwatmJZJmkSBIlbMzIK9rUsb3N2y+g5Ist3tNdE6PT/ZYxeBK463QD0GtatCi\r\nt/yMOStgJ4VT27b9YQ/3TqjlDCPIDT+4kL4Vvj0rrLDKzRh7IFc7cLZ1LQPV\r\n55Sh+BLIRJxE0eN/74PId/tl/3KkFZAj2FBGOscLalIwdoDuinqsItPqgZWO\r\nt5pziH3NKXTWRE/RDap6SJSLpf/R7JKFeDaQtG9pbPO3gt6JntsYs5Riox2L\r\nwKUkXcqY/eWlmIqKkoWXxFoUd1LojQAVLswEu5CnMZLZ6mTSkzC5pl6uqsse\r\n4E3bWsWH/8AtGcbMsdHQA96dv+SygbI6X4zybtuD5leE7sBV0aNnPXxeY0+Y\r\nJOPjM3joiZdNCXdLSlhcbEnd/9rPUuo7W58=\r\n=RBDV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.582f3cc1c.0_1665463788158_0.8137343050787746","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4dc506f6cd85c13ba6e1dd7137a6c6adab7556cc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":54,"integrity":"sha512-OLHsbZSLat/jHH3CgWG1lmxAPGiPmNrLTd7Uo87pRQEZsFHUoDbcM44+epwOAD1ybSQmRYoglj+/cCHP+Gu9VA==","signatures":[{"sig":"MEQCIAGE1DWknulhXqlNQ4etSMQtbqD0HWAn3HPX1NAh5XKMAiAQHNRnSJCShUf9on5JP+EU+9miXWg6plHXlywgy+nmkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqz4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqcRAAiI68EWNOHOI6q4d7bb08ESJmZUAD5jiV5T+WiiwneI95aGs3\r\nTkPFvabQr5TtnfboD2iUG4E1a/rasCO9C5xa39jB7cNyvnjQ3vSl4NMGs/55\r\nwWo0DklYAd8/LXYDsnGBMdUDL7WlpPW2OPoMwDZAFxsI9VhCat+8IauBK7SB\r\nbePu2BevLuonK7Ds5ikLG9DNLWUHkOQOj44nYKupNChue1VOfvuar3uqAGmp\r\nit9PYGB8kbqcm4coHvbJk8hxF2Sgn6VlFKerCKXyBT2FsCgtunct4QOUyPib\r\n4hFOdwyXg9XXHxa5rVtJX1mKqMskL/chMLxVusSJnhCJdkteqsTx4l6u3gvO\r\nzeXRNajyKQR+xiDR5xlp8eFYRHacE4Fzyc4y6ZvBGP8Qt8WOq/wXb+oFmqua\r\n9oeHIARVutD3LnZC7RglRyN+D02y+muWG5GNihrWwWWremGwC88p7cdmGi4J\r\njM1DQ9BM7bTDPJcrpDrtbA+RJFB5OGaHhWDGfwmdNIOtdoLI0BHOJYVmwFhQ\r\nYdUKl/j21atTWU4zUyDqcxzh7QLZO/viT7TqSzsKglhqVMBLWuIApNHHRpHr\r\n/BDGHoVtoEUH5f4kg/+zieXF/ZFPV9wOYYBCPNIoub0Le7R9CDxrETbW8Xp2\r\ntrt+7nzpjJuUTjdU1sJkzhhwcpa7jf7WUeM=\r\n=V2i9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b1a6e3e88.0_1665576184204_0.7222949843395516","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f70d0ca7f76465b9d11f6f9b97f487706ea08ca2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":54,"integrity":"sha512-U/mf6esDTpfTMbKvXnXryQkfBPt0DKTLhJ5Qw4TztKUGl37PSFIjC3TTioTXEq0xIjib9zy5g4i+ITvIaLqwyw==","signatures":[{"sig":"MEYCIQDZ0nncryXzRwo8l+7uvC2fYv58u+dUU3wm6x30zB9SCAIhAM1lfxHXGxNI3dFdUI8r/pia17WZntP3S+1/gVe3FwnP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplEw/9EBKqd5y7/OmlOGtywOudPj05d2SIuxQQSH7ty6Vl7+Zm09s7\r\nNv4ZVMEY/ZJRqoxrr7q8btTpGPcmm5wmOersnRPG/j0CU19j1CfYYIRxLO1l\r\nzQQ4MdpVS6KCOKdxulrpIvBajMQlp00YjijUHr8454gMKwHscMDq+cCR5QRT\r\neAtFAgwupcctSKBsewG8JmQkMEBaUuVHApi42+UewSe1kUhvHQM0DQIYMHxY\r\nZ8c/koru1t6+s5wLpJB+b+y8yZT9QHbMvh7+TmPb9c3jXGS2ci3LnthE2z8p\r\nUzdSE4FiWFJRIC9g0JmDuerzVsYjpCKpcOPIlAJ45fre1WZXDrdpV5blbDBK\r\nSW+Omdah1a/lxuPCUYCs+j6zgeW/rLNC8HMhKGjgxGZMzFLEfHjg5wAO3r69\r\nX6BGedeXPOvRx6RRNXtZ2KD4hW11nXWqZ08slgChDUj6xtB8KGaTqE8qlj34\r\napsINRxJJ0zGc/JOQT0pFRDJcrbciPZsskWK+BCyL6nfFC0w1ttcPq02NsNv\r\n0LpRcHftc/JphEZXfIBzyWMrCak/WK7HwfdJrpv/6QSBzLNWezG10J//iOBz\r\nFNCQyYy8Fq/qQPLFctgig4bmdhckSgRfStVg5HjdjLntQTEhbr5jUcFIy+ov\r\n7Rv5fYg/ONJ1lnCuVGgda+vwhPvaJRb/+us=\r\n=o5sB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c9b1a31e4.0_1665593957035_0.2897032406351405","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fe47f760d04b68967d5f2e9356af32e86c700236","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":54,"integrity":"sha512-BFsucsWM6qorW4HQSB+xn/LHB3F2sz/aM3rGL2YR8xtgx5tCymzyJfAuRj+nqPedKf1ZfZtXQ9IYWNG+pYlMlA==","signatures":[{"sig":"MEYCIQCaTHXWEMgNGW7f9X3AxLKZQXMmiddNH/uHpfVpTDvXfwIhAIpBEmBAkLOt+YO5I5gg4WwWkdVpYGLYeFwtMCfpD/0w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGug/+PK/ZRcKa1QxmX1DQ4JvGjTCbaaLSpR/J5DuhIr9GKPinAhH9\r\nqQeisjV/Ms+a4v3xPeHJVvKQGyxX0vsWnrs/idSVRCqlSIVKHlu2W4PgBi0+\r\nWKniwoJIdE3TmYunEosM461ca36rBzmvFEX9BTNwS8dceQy01+K8+zGz7q/T\r\nS+Qw2IpQPgjdfWyXdGR/10ZwyXz0ynL2+S+rvipaOJz1jMJ7vTNPH7Fkvu36\r\n0Zmy7EkdgPBwH4Ms8/k/5iUuGUyrwlKtaVKwFQFMt0uaGDHn4uZ4yrr0UAdS\r\n8NzoUpYapuW11EJHA88hN6Bp7Pyz4AwU/pwi+Xz4NrHjEFW6vSXydrZvyIXU\r\nneabjYde+gjrAiRWkd8aqZzxGF19nF9Zj19NLzQlHLDtWBVFk1AE1Ta3vykU\r\n+2T5aB+vzSm88oXPCHAnDUslTCCfKN9BnzHhVDdL0plmFevSQTt2zS+dVQJl\r\nRmRgokawkzzQbM3AnRkKyseCb/r848DDwl7Kjm1jkH+67f8Z/FJdtqCrR4Vv\r\nN5dF17o5gYBQOzjfXSfXQgTXxA5hED73W0j43Bnb2j5Ak7Q/ShMzL7R0lvXP\r\ndk9i2USm+w0wQRDBsNfHSpivg/csmWaofD02bAy7IaUc16Ye7YK9BCxpNP7j\r\nM1pVKodEj1U65cIVKd5oD/MgLlqB4KxJCqU=\r\n=2eAD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.13e9b0d1f.0_1665602518960_0.4486036824332409","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9ef2de2d1637a2c4c99244ba550975cf0f22d62e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1dc797e7f.0.tgz","fileCount":54,"integrity":"sha512-gOuIEIVG2yASUWuolyVdEaAhcPVjfp6LbxFe92yex7Z8ZMt4SehfpHdIBoOFOPs9aBKzMagsCLyWlj0sYbGqWg==","signatures":[{"sig":"MEUCIQCutJ8YiUT0GX+ko1HlKK2F93UvWjIeKHLUlhnnoOpRcwIgcg03F4UCDf64ZXg9WQ2IfrZ4NDuMOLStVgr9N5nBxpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS75ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMPg/6AqDFCHSQlsjYordhWhOKiM9FIA0b95xBdHhvBNHJGtR/HYjJ\r\nGweQPtJq6/dT8K8uKeaZQDudgNZ7iDA8m75zZIhLTWp8SFF7H49zxgF2GH7M\r\nKth0ca38VO2d6ihrfBtslWZyFcwYkSF2Y50fjBoZgU00XtYxWB+2PN2W7UH5\r\nav+L+LJO36ALback0+Swu9YcjVHcmuPWIUSric6DjViLqsjtJwHT5VViJmnq\r\nLbUTmCPcydq7wSmtNtjFjgcYRgrV/NntVnTMYFS7FRQC671RPMNgzWRG4yYK\r\nugHdqeWKAa0WdarkErYtfwPDZC8ioR5K1udPyjfnf4+Cq7QLtj9FmWU16PSO\r\nfWjC2C0CNJPSLF0ZQVCqJ0WjL5wl6PXMUaA/UEYtnoj8S5G8L42WXBKJMiZO\r\nVL8wvI3EDXeyGrlDaGjUX34wwufQbdF3VGDuSbhItsvz9Ue3d3W1saz8gr0G\r\nQkQgH1L17W2rO/Dc59V7rVkWmw7l6PSSnRsWAm1hXcbr4Y4Re8vSZZs41wD3\r\nLnjL1LbJ+k3bzHgoses3m2T79ha2JUArI0vBlcpr0tgiv4jh8LS4k/girpau\r\nOHs50Ku3hkio9vSTQ0J3YN/T+7ynxdGw3QNVlj/h0XVzGS+Je8qXzyGWiikw\r\nioZWxN8Bq56v5Z6ZrfFEU5krbPTaviali3g=\r\n=HKPb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1dc797e7f.0_1665740537064_0.7410233552353231","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4ec5373a18c54051a8a587fbdaec78bc20cc28fd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ed4009397.0.tgz","fileCount":54,"integrity":"sha512-XBetUA9pw4uIyuBuOmC6MH5yS45bqBG2a/U19UZiQ/GSjHA8khX3ZoIUaYYkEiMLvyrrwVb6MC6f8ptISPDdvg==","signatures":[{"sig":"MEQCICU19k9vs94kvA5Q8VpN7gdUIsdJVL8iy58KaCa3eJilAiBnhduaC4YHYZiCGj4kVNAJ0NvXpDR7QCjl7fPLFea+SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoATg/8CNFSW7BclG/mKIMmx9nZWJfU1gJ4NN7lcBXxThU1tcnGiSiI\r\n5HpLOomltwNHMqcX2zVLGaHzsC2OovobiWXut+gL6uJm7aoDrMM1c0ByNHNw\r\npcnDA7DByKX/q3hw10g4+dzCb+5eSZh4+niuxLvER4wzIfYhlb7muIbPM7wf\r\nRxlWO4tOIDbf38FQdpPHQCC6gUXS/f7UbPSUacck1FgCw+AfE6bt/M4Gezv2\r\n7F5i8ua0d7N6ExLI4Qku4Wpq+M6/1wol2hxe6TSBuHuIUW67F9qU/OOozAWd\r\ndqaUyecR4z8mHjbCYLPlS0FuOQs1DGodoKFaERmrDefoeAyzjDfpNAwaFv5N\r\ngPzs8Dkqaz2zWCKlWH+HsEqUsuHVT4/p0JwQIOYJDe9oZ/v2/V+d4f6ErrR9\r\np3Ax7Zau2xeXH+r98FxOLIlfpe1mkCSYi+gFjuLttkDvUSZIt0Xtr/WxxiOU\r\ngJOh3joq9dK/uJbeYo2865DklJfCcZB3aRLp8zV+iurRQPRou7CF7TqGDCi/\r\nNiKA+b2ib7xJnunSj8WnTjMf5tzsjel0kDPObLq2s2vkkwN7+jv/g/vmp+oc\r\nJK5obTiBe14gBngOt+vOWv4jNSl5inWx1jGhdQZz9khjpnftnZPlbvX9Ccc0\r\nqZJ2y9+0gD4knmbzRQpNOVPARvmMfMl2QSg=\r\n=vi/4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ed4009397.0_1665766315169_0.6830373954552396","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f1df39b0c6e9d433be5201c4c4c6285752a45209","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.95ef196bc.0.tgz","fileCount":54,"integrity":"sha512-ugnUFUGl85dZTJ1uuNM+2ykiDpjHwVsIVisSUUl0mRzAKzzpQgF8UMIvSMTdpQtjGR3p4XoOzt9moh6RAR055A==","signatures":[{"sig":"MEYCIQDqhpswoxHwn3dj+ihxtKf6vhOuFIN49t3dktQ8G+jr+wIhAOoOIVj3IyxPVh5/X9L2Ry8QDaPfKjbr6X/zpu59UCKd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp57g//eNW6nQio90vChAnsdwQv57zUqwhzrXIate9PTJ9IVjk8t0pg\r\nJFp+F7XIpTVJJCWY/Fa8jdTmgY0MQH2XTfi6z69rJAgkfWvne/4ctkqw7DL5\r\nnh1GU3yFl2c23/awUqzUcCts17EN/aki8bFpFJ5oCwZp+T3SCiUgfLSjYX79\r\n/dHVvZzlAauEJ17omFz7lrm57QW0JN27Ge9kzP/yHwb5B5rk90mN9xfcaP4N\r\nVjmUxvJDOAbH7i3Tl+yfTgEvzXuFD3P6sW0kYarNHu3x1LpJvv7j92Ygsi4q\r\nB343ALQ/Njv9H/DuBSCK8hi5gFQzxvH+5LI/n/hx17x4NhQAS6NmmwQSKnKy\r\nfX73q7G3zwAQUd1+W951FFET/KfCZaa/IutklBDrlGlH9Qcl09knnqJfnzB9\r\n5NgZm+POHGz2rq92AJFmZPWLWjgQwWZx0/JxqVyEjmEss8YJ4l3VG9RADJJO\r\nD5NL0p1eh4rjG4vsBXJ57F2Au2YmpJiBNkN0xHuMKjUd1Z9cuVonTBurxYPR\r\nUQGTq8p09732t+YlD5OtwZCvQqXDzakiYwi5VvapKxEvGPVYcvYS4b4Xyr0f\r\nyReVgpW1kn9CFmPjoYjbMAQKqPOa3iYBqYTzUjg7sJ+1+Z1SVNISWEMrS5eP\r\n234PQ8VcFLm4RiDEayMI/hmZxQ6sI8414p0=\r\n=9VRz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.95ef196bc.0_1665789275465_0.45991739205183757","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed31ea79da42cde97ba01ba9bc8bddb20efd614b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.13eea1b2d.0.tgz","fileCount":54,"integrity":"sha512-Cu25gNmJ8px8sOqlWX4xqMfR/qFw+AlJks+HD4HvuRhra5TgEtxKsNfFGduesHqBbPVZFPjGpaTCmm1aiNFE5g==","signatures":[{"sig":"MEUCIArPAfafzx+fUIog7Bm3Prcs+sqvgXM5KjC82nPHm11wAiEA9/09Z0tA/SNXPA6hbvY8HaKknbTT50RnjmrDIX0ci7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4BQ/+Plh3PIS45jQSYlId9iRzg+gYTPl8zwL+R6bA42XVDdGmBFz3\r\n7gDdMwFsm5vWBNiQG2dVKwTFtxMPkNQER0+0yJ0QBf3BgNDhSlvuVTIl17AW\r\noZjmpzugX/mnFDMxshumL9oG6Lg23oA8wo+dCUgbcKPBHnFgyn1DK2PEZteQ\r\nJcqB1yhLOtVcXmSGVKKwmB717om7ox+qRUDbnUt7wwIqH0qgDJOGWyzZmwcp\r\npmYhgIaj3hGltxtb8dleTV35kV1GaJQquFkKSH+r6sMWIP+EqfkaMBSvd7zr\r\n8lVbbm3ciBdCv//GJcGd+a3/YOTKdq+HVGkJknIalL90AHflaA0yq27sNC/6\r\ncodaWHD9Bteqevk5yvpVChtNlbP7KAB/8/YpqK7f1LglE8gGuPh/VNhrcbV8\r\nCfETL3hY9yg+36aurb8llgk02VJA+V6iPIdkKKAyd+u/1jOspqylqSzNK8ss\r\nK0SS+6ZaAAwR1OQWoaIG6arv1M7vC5GPQvppOp1oGPW5y524bhaYvn4wSdtx\r\nJUYQVOglK6HwlUdP1Sf8EEGb+/TERIxW/PK4WwA37zjtCfR5dKTcOAJTDRJs\r\nBK7gJtNvi7Hy2N9AOIvGPzMl3kH5wD2aIOMeU8Scz4VR+1tAtlP3GMbEJwkC\r\ntv2cbQU1BJRekpgpeU5SfKOVEDl01Q85k9U=\r\n=nteH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.13eea1b2d.0_1665978733615_0.3190814493525207","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"924cfdda5bdd5ef0d60aa97503df1ce401ccb2c2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ef9b2babb.0.tgz","fileCount":54,"integrity":"sha512-JlxXkFK0ZfqWKk/TTHCHDKmE6p7oBOy8yP3pdyZIL/FA1Wk3extC8JsKhltmiNBVW7+3iFo0+6+lPBRchyQSgg==","signatures":[{"sig":"MEYCIQC+PuZ+FBeimTJBkiQUK0HdGAo2e/Nwj87CSsdeaxwQIgIhALq7kwRjvBMYur/ICLIhUepvazDEJsk7Yrz5JYN8pHq7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0rg//XC79uVuDfXbkvuv1ap+v1LQa7kWiSMBbJ5ar72tyX2mlW8bu\r\n2tOL5NVYQdxh+XlmsRRkReCKtzEKzJlq0cf9TjAwlQfRJF8pi1EjQ9IChIdv\r\nXe0zHAILVuQ3oDBvSPSDN1uOBWuYH/FMegX8zo5tl9C3ZE0C5ywW3aPc8Pwy\r\nBuMMMAalsOR9jSvKTi0Z8Eq2HLj90CQ8VfVjrIZKbWBjpZc1vbQnUmUR74ek\r\n0xWezQHDNYVW4YeHRMHr+a9nnOQCg9tMlVj8tkltT+ajNAEP3QElAF07HVFi\r\nts+aSTGewvlgOq+MMduy+FAOV9yvyP6p51f4t4gNjbFz5ztv/m61084LEkof\r\ncs5hRvvq1CIXcp1Fbrw6KVJBk10AyQHnOyXh1YojoBHChvu0sqiZtGY3mB8g\r\nFWuMf9efYJdxH2QOJPzZsCRwFVubDvmRvCIARelShhGUDgYKesmYsurKaQ8s\r\nJYaZ6Vq9qx2+vN4L3dlCl1j6D8lS4MXWgCvQTTqz37ihL1jZjI4uJqOCU52T\r\nkdn347SrxBrH54KUwuYrrqzv6FmEk1VRT7CtxnuCBkPDSRmsALoALXjhZnh2\r\ne43VWy1EiygWR2JpxhBQvLfnDpW4oP6/f6KOXHp37xBRiph4lHVqs2jU84dr\r\nkiWmwcsPDmWvCMPSV3XQwfEyOmptdpILL5Y=\r\n=4POG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ef9b2babb.0_1665998321357_0.911342792462376","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"588f657a3a8aa449c7f0af7081e0d50cc926d4db","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cec7fb987.0.tgz","fileCount":54,"integrity":"sha512-sm275Tk/mNkPnOnIG6prm49ijc3p35cRPw+KUyAMl9eYrfeQTTRM4U8PtONM6itcLNTVdln7lUcftb0cN93yxw==","signatures":[{"sig":"MEQCICklXNdGqpt0AE0+tr7K+F8Dva/N9tcsr1xpxIRj4obbAiAjl6lRcLLay5cq9jCbddpsIZNJMrsPybxs/5oX7mGFwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTT7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppkA//TPk7N2gwbUslxz+hLkdi+s/jRS2vB7b5nOau1tShWq5x5HCA\r\nlWq7ul5m7OU6yD2/BhIGyNF5Z6w30jrEg7Pxr4t38kTv3ACG7Wm5ekJFT6VN\r\nLED8OZltqbZK689LMMVOxUX3Qm2BhUvP5n990JlPclSHOOPiLypz+CNHIcbm\r\nTI7oQ527Fp0risUfomysHqvai0PmBHwSaoZ/djIEgh9sPRh9XPTiIB5pet9R\r\nZgB1mKu052pElOSUtAvBM2pLqMRnp3CuiAzCi4JZjNL+tEs3zjpH5Z6hBJHX\r\nsANjWQw+eYNxagOKr/Erzo74lFzHK9vyYIq5BSdSUNi+F033Qox1F8xK53nw\r\n8trne0gkEIP5uVbkbsbh3zgUVIo+v/oeQ4TsNMyRtnI4/rSFgETU4YeM3jNK\r\n5QsUwJjTZijcFFaDgjan69o4gxW57mWmVtZhPXWoPKtUpG2qL4memW9FsSNL\r\n7S6gai5wHfcta0azIubN/eE1QGyQKjnKgfBQ4TGUBbx3civwN6oPA85nr+D8\r\npJXJlTuNI0r9LwIX041+Pir7USDITUcHIXAFDNz7moT/otX5/YRHlsxdiV6W\r\nKWL6OQJVc9kWTlR+YSjseH84oJc+rr19/W6p5Ayb5mZzNa3s/FMiZY8hShtE\r\nDzWVz6n/yRqXKEp+U4USylYGoSg/b19LXL8=\r\n=YKqP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cec7fb987.0_1666004219359_0.7540850759922018","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"83273972e424d676dd43a4f20f6250d270431b1d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4fff58b08.0.tgz","fileCount":54,"integrity":"sha512-2pGVNxHp/KBru4b2rdlYXz18VwfFdkJ9Z+cOIF0TSwaz37uUykGfxuPg0wRJJmAyO2hYCRKTQJkcn4efdCI1sQ==","signatures":[{"sig":"MEYCIQDBXPd4xqmOFSRI4L4dB/p9IAuDWJCOcXKMbYZDxyrlNQIhAN89V17jvWm2AuUx9oeV+VZlH2trxonkNWZwDYRhe3EJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgeA/7BHLN5n+BefRIKt2YVWxgQCxnkHm/ivOHdjdmO3bafcXLHxry\r\n/MudgpPNn+hiTwEtL7Hn1dbbh9d7jSbKEB5PPjsznJnDX6h2EfnkvSPIfEap\r\nce61eJ7DzAeWmHoW2DfIIL16F1vUElLrE/R3TyfQLYgi2HVxLwE7GIcZ9UHG\r\nifd/o8jq/a4oXvtcxUVn9v75LBPiUay0c25VD7ZyqAOiWkOWwLMiuV8xYQt9\r\np1ayU1aehe7DuDJLG38sgxUsX0LfZzNewvFDNr2Xas3hJ1Z7zjhcdCely07G\r\niIkLMJHX9gKa9Ps92cen2lL6QIocuHS/5AeMKRCNSWyPRosOUpYxCzT55Nkm\r\nUwG36Pk49zjv/Vua8bqEPj+wRIKOqmUK37QGjvajiyVRBr2GDjBrArURY0Q7\r\nJ6rYQE3TQcw8qbQ3E6te66PSJBm737fyd2phGm8FQI/krakVMkfrhC1XWSE0\r\nAk+wed4I/dBSzAU2jFxTgI75N57/hYAxCBz5QBzO4MTZTiEurSh6YXPTnPoq\r\n+aUIZKvwvZsTs4wL5N7AwHAE9U9/0lDIrJ1GXj8bCHzzPOKEMZ0AIb4hAF9X\r\nVDM+5rqa3MpUidUsM2Coge9emAkMD59U5FNfOI3lsGAMni2CtVhH7ublm4Pz\r\ndftoIuuvJTxVWJh6i31nxdqlzeuFGs/6jhI=\r\n=YqQ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4fff58b08.0_1666020197369_0.5129270564371529","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/segmented-button","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"40d0b82730706405077374c4246bcedfeee9e58b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.587d8f871.0.tgz","fileCount":54,"integrity":"sha512-6eMB2UzAakBgHCAUmAKmBhPOLBQWzUKNPbMGy6gB2MW2sHWz2k8+eKNc/yXrt411n+gelFq2nMDJU+c09tKc1g==","signatures":[{"sig":"MEQCIDLRGkwMwtvuPCFqkeimAYmCRzaixrfODFWtiHFlGwncAiBV0AqU/vCLYoOsTNnhuX6K7WwIaE7yLGsSzb6ZC6rf8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXt5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCIBAAnu246r7+1/wJzP1fktGh+WUx1b9zxLB98RHi/39AFXYv1xj2\r\nZysgZuLOXfLt9yCPNbUnYQ51J/g4Rx3XrO2AJW+/aXV2RDyaNgTvsWp1blsr\r\njL2hzUzfdqVNbE7vkLaz69gbHL9CoXES0+02T3Ii7sPOxBBBqwk8SadHvJnS\r\nXGJrgHC0zebMbe+b/JqlqCppMCK4gI3cbZ1s1k06S4zzfGlfHoL54x3rPjYe\r\nxI1jjQTVRVEoK+4jvYfuFzBOtzIqFllFxhPFvv3j+6CQnxBnN2iIm/dwrfiz\r\nd7IUKIFvbhhnk+9BiP7zy9YpJi0fav8jt0JTyTJHVTUrCtJhppmnmZVi2Z0A\r\neExaphrayDkqePyjTQkvLAsdVUbeMSBWMnqMGJyUlbhzWRqh+O5QR8uYRQdz\r\nIK+BJRU8OWejXY5qnE3bS3OyaszYg8gyH5L3PlIopUOa3tYVG/+iCcaGPpVJ\r\nU1GTOBmeI24xEqc3F53tMjKjQkAHHTkkDNVZ64vWQ8ayMDwb8FuA5o7QXOzi\r\nk8R9emsxWjHkRVoU5yoywuU9oQT1Fnh4z4fBEBUEreLNYz/WMM9eJXYyeMmx\r\n0OpfpS8PTVIF0h1oJUYbXtbExRFyFiXGuNyAJdsaKdxQHdhkQfXsFONboACv\r\n+gPbOurOhJgWHeqZIJ5BCecG3v9QBFqcX8o=\r\n=fSQ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/touch-target":"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/segmented-button_15.0.0-canary.587d8f871.0_1666022265145_0.7071743057210786","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c2723ea55dcdd2d9c29de6d7845aeff4c6bce16f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.edf4b98d0.0.tgz","fileCount":54,"integrity":"sha512-FTRRAn8vdqJoy9Q135Cz+PKN705DhnG4K/35D424b92R4tuAiJO63jSqsmVO9YGayfy8TYRbQh3PP50RlTuEjA==","signatures":[{"sig":"MEUCIQCP4JfpVJkFLyKPcCrK2Ccrcq9Q7d2uj0YLygdE0PaxqAIgCaA9EgebIdILcoZUT47yPTvTkBrQqBpfX4KNJ2bSlwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZYxAAioEUqPfD2I/kJSVST6daOhJ5Glo0y5Kj3sPXPoP0+x6CUmVr\r\nqBtgJKXKlZGhLKd2RX5sWbYb3JbNP8IvbLp7JwSVJM6J0wNzp11EVbRwjmKE\r\nQiVm+8nLfDnP215JJBtetL4mItUnMLQ6CIaaCA3j3GiItXCj5LTAd9KbCzFi\r\nIovn4l9d6h1EQewV/RJnxKgJqnlDEp8I8qerxyxVDN+MxG8vPzCLLfLVVSCZ\r\nfLD1kwTwra6M/xcklyRXO5+DitsLbfkuJnV5H+qOaSu+JvYfPiWSqWrajLmQ\r\nZk3QaEmQR9+pd7uqgYmpeSfmyz1e7MxSvtPCfHDElO3aLsnC0Li+r8rZKElr\r\nBlswsRD1fk5r/LoPxvUmPQyJ+E75YquCghZUQxtgMCO9hX+VrfzvD781lVfq\r\neGCDIIhJ+BeRAaNp3wh6k3W/0x0Yvt/fvbM0xlQMp1wv5u3RovCI/VO/EuD4\r\n2egxb58UW0LWf5LwyYPKBEUQ87v38opKq6BrracAxm8OMDZuiVOfei+Zh+43\r\njXZ8OdGhCHkRtsPi51wtIIdtIOKR8wTDWVywmvlluUsEEI7JnL1udD8oWd8w\r\n2w4HUFQx8SzVnHM0QGfkmF8vHw18TbYjHiOjacY2h2CqzgPkHGSAcZ7LMXfA\r\n7lry5NWhK/mN4dL/uOAC93rbPEU3agSjbnQ=\r\n=abeh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.edf4b98d0.0_1666024866531_0.002272202300567905","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/segmented-button","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d1074d382d223003e2cac292851a90645fb2ee74","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.024ac5f16.0.tgz","fileCount":54,"integrity":"sha512-w30XB2S8LyS3wCY1/XUsxShO3hCPoBNnnED3zi8J2iZIIoWcuwU5u6ORM39xWUga05XVL9+Symdzmj4j3kKhDQ==","signatures":[{"sig":"MEQCIHTwiyIzLtsWzbEiRpCBQXXRnIQ1PqsIgZJYDZYdCqBCAiA/xtmGeDceHxAYT04+CcFFKI2UJl9INZ4n1zfKnI4OtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdp0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Iw/9G5zq3199EO2IDgAFJLXSPgieDd0N0HuMwaXCvVkz8/tD/m9N\r\nk84xDipa5JpwFfv6mp2NqrMnMPUNfEQQM19LPLdXwaflyrqoXrFccl5otJL/\r\nFmXcYkVR/N2O7mbW26BwPe6xJRNxTiqOwf/1XRWsxtbeIa9BgzqK5cWPlkgI\r\nuBK5he8CMytBpawzVEKJUahGoAztLQUaUlWc15DR985+OoTxff9cTO0KDjKj\r\nh6WXAhT9Dk7AOR/DXJHuBjGKNRyJEaK3xH3znfYko2EPsaD6bxTC+K5c9PZc\r\nLHC3dClI0umOtD1JbPtfY1uDV1BZIm/rjVsMZ85aRX2BdxSrwb1DRQ8ErY3U\r\nDub/G6CEt6ko86F1BqEmTbvU4SucmVOVuzN/6Amspp96YIXhBhFuu1jzrdlN\r\ndK96YyociNUKNC1ZIXt0u6N5WHf4e/cCOdYCgSkw8Ff6jzP7hxjHR2wCjXDA\r\n36euzaVcr6CoRdEMfxSsJq6/P36OD3ZcNsJUKUv+FozKxXMbvSNsY1oJVHw1\r\nW634sjMqZ1QZGc0wPfByjSnijHofCI3ax+/BMlKYbgCm7F5S3G2mmCUvuGbP\r\noHCGaKvXwbrbw5p2k++4dLZLrqKrvA0IQrTJ72tak46B4dRarKqOFiBtUI37\r\npfaMklNTQbOGlfSSl0O5MR8Mq7ricAqFIEI=\r\n=C3Yp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/touch-target":"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/segmented-button_15.0.0-canary.024ac5f16.0_1666046579994_0.08000460420133604","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"27a14b52037b846dfa82b19b54312cc0a83a7a22","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c8bdf6144.0.tgz","fileCount":54,"integrity":"sha512-yWwIe1pWYJIuxUcaTtzzwnOS/UOi83QnhEreSoRG/PLXOL7vISZ/qMVVSocyttWWc6xOePn7ucd3cVIanyimQA==","signatures":[{"sig":"MEUCIQCeE86h3pkR7d1OlHW6pfHrbXx7VgK/5fmkP7fgOStvJwIgEL6Kg2R7z/6H4VUZPbwPFL/7iEaIlM+wLgX8vBGHSpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu9DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjGRAAov8C2UoLBmX4F7C07jJ63hgnUDEAN+TD2YrR42hoWHm58DUO\r\nI4K24SZLO6WeWfHZQGNo8G5hBLd8p9IoMQ/wi71agWa5ZVaZoOvzXZ+GBssM\r\nKGLMmUFTn7T/Fpgza8lfXxwVea9BcdhJUmvK08v+m5tglP+H4kjoFxjiL0x2\r\naMeHJVNwRe6x6B99KduYqoxn1xRnooDy8I4sKFTlDFlg7jmnOoeC5FMNs41D\r\nNwowgPa1LDZzLtd9rlCUqw/viWkHiHnn9XUSYU2ei1cixAp7h3YwSjWg4rln\r\nl1IvirBwCrvXtAqpFyVGwiTt0u6UjAl5X1nE4UpUjGN4dB+VlMLWhmGTEA67\r\nTR4Vk7S7ZKAm2GJ+NuG1WSLsT6VM0fP69QPAMLdWjv5UyrGIA/nqGx8dTJbU\r\n9+VMeN7zSTulcmzsAhDm6rHvZqjN2Lo3UdNjBVJw5xdA/7L1k9408QMAzric\r\ncbu00Dv+gtRf5LboNkdA+o2Cw5+mJgNpiAYGIlBGjZSISGk41XnidgFoLybz\r\no55t9Z35SkGVtXjvmnZc4eBgviVuM/j0Us2Uw10hp1HrGqr1sCFKJOTyY/rf\r\nJw9OMdTfgPaBXmrQVS3d7knnGaKS8BtzVxH4HPkKxA5xQSYLXfvtUZt1XIF4\r\nwq3fOqwDG/9y0MFgd8to0d5bYrB4WmOau1g=\r\n=Rm5D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c8bdf6144.0_1666117443228_0.27067305693912513","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f0abbf5f8051b40a89904b07189c07eb9476ee38","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bacda4885.0.tgz","fileCount":54,"integrity":"sha512-Sf6EcSpBldxwCJf2wcQRLgwk/yCUZxvSPAUqXUv2boLWOX82ibUXSoyG30zLu+Y/g6kUsheQ3vM6xbaXbYyIfg==","signatures":[{"sig":"MEUCIF2cOXVlqlgeWVIbAbSO+kQlEZBXn3zsesQP7mk/dUC1AiEAzi31n9ie42eRjQwMtF0Q4cGVzIJXwMisW8uLzEyk/pE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooTBAAjeEN115cNITkp18knjPMgNz/uSc4qnYJBvTh+cAhmtDFERDg\r\nWzJB926wf6OKHm8DIO0v63utk5EPHZxXyP013TOUi1YXziC2/CocWqacYK5J\r\nqlM2lX8Ecoi3CqfJ8+XQldbyO1203SBvP4f0ljbB0Q9uSV7S689dn02tarqk\r\nIhxXkex56NPor/d/wIOT541G24IXY3X44kLOdfU4MvXxFvohP7ju02XuWTvD\r\nSFkRIuQmw+4vXYDy2PCojH89IzQK0rn9UwScTmA87GSr1WernPXGdgiQ2XCk\r\nCzUGD7jJLVD428QTJFgPH51sU3ASGUv7Yqc1EB2GKh1R23LKQ/aN7BrRERWo\r\nSYHr5gy+WW8Vq0DVye3gUPEZfJoFv6Qf/5MlQeTDcFogUaTInR+ZwGuzBTn9\r\nwogv+nphKd6CgNNLzpuZXFGYR19B3xgEtWSzqDsijQJSwOo1dTfKKtJT+Dm2\r\nBNWMiEeuvUz0swmZSB4YOZYSlDWTq///rYpzjYV+hqB5ze612b/vVKflDqVL\r\nCned7C4i8RlirzcWiyNvAu0kHIauMwes9kT/jORk5ff+coesrA9FJDCEF1Ql\r\nHnAD6mrfMCta4pU9FOgd/XuzQPiLoLr+LqOmmZf4WdpaVL9FxtV3r21cmAPq\r\nv8pl9c1xFpyHCURdPdVVlqHWcnMu+/ysBcU=\r\n=Ccuu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bacda4885.0_1666118606026_0.8480006702154443","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/segmented-button","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b0c14d11014390d06d0ac9b11b14f8960314a299","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.92b2556cf.0.tgz","fileCount":54,"integrity":"sha512-4JnYL6MZo7nrHmxvoheGeNyBfRJIkisfrwx7J9iTHZMguRJsKkBJUg5r21lHfFoD7Qj9PIOQtcCPtfa12caT5g==","signatures":[{"sig":"MEUCIQC/qa+bDEA/slHqP/17U2kmWjthScU5NtF5LzCCCT/G0QIgQ5BJp4xmiN16gP6V2wfDXd2wEAiDH0tWg2TVvKabB/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGdw//ctR6/cfWxNX59/yyd84qKu64KtFWDEUBvsLihorJyGsxGWWO\r\nPQUkd34hNYym673g6siQ8OViFCEOy/6eMKtXAehGajrQnYZcGrFzW/3Lc/ln\r\noHIoeTHlb2wotZPAlayJfQKP0n4ejWXQXEjmYPeQq06riUyX0Vg0zzy2+oIf\r\nCtLzDlNfCs9nlXr0mwCDA9n6qhIysTZo2xQO1p0vMtx9tMkTjTDgEL9+AEud\r\nHcnWxA5PN1f3GrJDeFZP6FTtVCBiq+8IRGs7VWheksest4OFk/i1wBFuVlf+\r\ntXU2p/Jie/qrAKurkWxwUQuL+y4kTRjhVk4zja89aKsNIofMwKymTEaBMN+F\r\nV4QAWQ47CJtqkE0Ja+lxnP8M3xwtApDbBtcMLsO6YJjVo1gsmPfVMBewnm4u\r\n24qH5CW6SulioWpnJHOgRPNCVAzNJN65SHAnfyrgfuRu+5g2ezrENCgkQQm3\r\nT9CjU4/+vk6uakppSIGeu2Z9yPdR6CnAPlEZhVkV4N3+TT3k9ZkNBCRgp6Oy\r\nU4MbG893AA5KLvfamcRF3C9MDniUoFcOnPJJ1KaGfxWFj5mrX1KEe4upz8oS\r\n0glK+IwjevYsZsNsuPTbHdjYsDG+6zascccjeAAQiJ0x8IV+tw9A+IyS4aPF\r\nURpcHlfShrwBhNWXTb00DZac+K/F9E3e+TE=\r\n=HgMj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/touch-target":"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/segmented-button_15.0.0-canary.92b2556cf.0_1666142044051_0.3716369164153903","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7ce6ec74eb2836fc87e582b204ce6c4342a0bd6e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cc804509a.0.tgz","fileCount":54,"integrity":"sha512-6mXn7DssHf6VFdVOXnv7Br0VcB+0tLO/h3UBCARsZRDZSyOPrDOh7xoxMXK1l3ZRO90q1DQddNreigO+A/KXUQ==","signatures":[{"sig":"MEUCIQCsNBiCOMNUZKV+cv+8PKN1BUdeME3HFwxlhOkGt5/u5AIgcu8EYLOKBndBKZM1V4Xb5ru/Jy0kUf8F0z9BedG13xQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1A9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWFQ/+LW1AEvs7VhXf+Dgj/dKmy5qiL3RLJOAOdmDXcM7im0IE72QK\r\ncP5F0ChpQLWQ47Ra1j442+pasyEstEf4xl+np2WH6/Eeeps02D6bqvSVE2XN\r\nA2vmPyNnyfQRh5bjtiwy0Uwns969IxkzL9OCLvdS70YhNXPCNO3PbbR7zhuC\r\nFhm7C++aXneFFsq1/oY1qFjIOB9ZCWUMrsvwELbJtSQ4LY4O/LItxF4TeEzp\r\nhDgDU+1oG09/Jh9oIGMlFWrA23ln7MjD2DTaBMwvguog4xCEiRsPxVJS0Dpt\r\nYV6IAat7020NbOBZNo5MJuXiDE2j6vOp50tH61wxTSjbidSPOTZgE4UJZJ/0\r\nCSK5X+GbfhTJK82dmYkQK1s/8ASwZZMEVg/HMeNDqEpq18VAUHENrd1A6Bqi\r\n/oA3BgcB93MaiqYdVD9UETRuAYr2oKta24qCG6Vw4KCXRwWV+aUHB+H8hzi2\r\nFVXLQ5ZQeM/M03bkFENSa1itDvc8ScD2HvhWBVsWMkIm4I6MpghRQIstDLul\r\ntm/3H020nM1mfX1hNQbBM+1ULpODmeac5rSkBRl6eS44fu9PGlEgjkDV884A\r\nUFxvxjOpWZLufq82r/DxMPoQ6GGeG9tqt0p3ETFsR76xKLHJ3Wltj3PNs4mn\r\neTpxQIgxjkjEAOIHXvtqRPD9GVsERcYK6Ww=\r\n=NkY3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cc804509a.0_1666142268759_0.9175106287449626","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8a2209e4147c8dc1bc616db7aa285e5007badec4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.982bedae9.0.tgz","fileCount":54,"integrity":"sha512-HNgZp6YfIraC0c/7QWEJuDKA4WJxfmgyNOwcJG2r9t99vY110ANAPbM+ARIWrLH4EMeP0JYApWaAOMLvkhCw6w==","signatures":[{"sig":"MEUCIB5RHuz8R+sI0ClULTtLSV9Ne40d4uMy/WPvZ9MrY8KRAiEAtcDn4ZmzlK4Nng1iEFgu46yUe3Kv2YbXk45IEp2zjAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYtRAAoH71+Czy7FSNx1ES/Fxybo4yHa/EgJ9abQ/Np7pdhg8AxgXD\r\nBhJuGsjIFE/qGmdZH1CQy2u5+YcWh7awb+GCZcRkQ5m6lwmHrPuu1oXk0Ocu\r\nFa1TTHCO8C27J9SOj5lBeyox8QLKFN56uih+8sj8jx5TGvaDKxiLOJTfdNGw\r\nEfubw3lhU0JB1sj/yj0zVS4O5uUVtQ2eOC38Mx5alKMiBLYrh0GXxBaw3eoj\r\nnKdJqGif1uKYv2xMgRNYKwxU8vyJI+BdVDWMXpQyiBSTapNqKGIP1Qhh62bG\r\nmCcmELzoB7DSH0WdO88NLeuYQ5DQ2u0OvaznGAEXh9eRGHiNucnzXPFnuiuL\r\nP8U0u6XGHuXiRbAFs6UODLR9XiHspNuLgYQQ7uKJm89rUn0vxONdxMug87ft\r\nGMxaLPS9eOLUVLL6IRFIlnzpboOnsAYDSgNF56M+D9pfaYAAuaLkF4b7bEw/\r\n/Pq0g0ZxU9Qu79cTHwD6fu2TmkFBi+7hS2oaOgrLDK144X4IYQFgGGjTubpw\r\nTwGTcXBZzxhGDFTxqETPtAhvEL7c7elao/NPIo9adscV9mQ7d144llIjNlQe\r\nHszmzGAp0Mu/eq+vMECIaUhQlznTpiCOLAMv4OgkU02rsj7ackVwgbONwfkN\r\nubyMP4xKe36kJntAvkT/B1K54NWPPoTJw+M=\r\n=ooSl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.982bedae9.0_1666143469513_0.975422761753983","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dfda70bb00bcaf8c6a228f82db2f2ddc6d09f2b3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ee40081f4.0.tgz","fileCount":54,"integrity":"sha512-+0Q1km6koIbtTtkcvUQDBJdvrRilkYI7SzEFP3f2QGpw3N/0quW8IOyxfn2e6nV+3XNF3A1+19JUqMtwURSa5w==","signatures":[{"sig":"MEUCICU0Yfvj7PDA1x3HgYG8HE+Q0qN0Q2C5mxdkwF4rAX6QAiEAxVrEkFEB8opHYID1P/uvIRik90/81hhLyhI/Xq8jJ3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSAA/+OetZ3fPTBX50/YZ9zcBMrC5XEIHFbzxxkMUZ+60odkGW3dd7\r\nQL+3De5IG4h608nH4Qhksrg1jKewTQkhULFl2+AJjoNVzQtV/QYbORJlt9oO\r\nrkZqQ/JwUgRzAh1P8tnG3IDh7VeQu/8VtG+vhJb8bbCvRqoVFQQtLbPa4Zlk\r\nfHzthUffprh9KL0VvwEN0EmEWF8oXBqRcQ/UUHwrivM4jgP7GpRCB1lk6tqp\r\nFwC9r57jtvTHvSKw7w7s6RYwD3zfecEloiFNZFGpG6pHXlrKiq5uGM74m0vQ\r\nMkrfbbLRNQXxUo91kIMHwV2zoanug0soT6mqlHuJpCfN3GcVUdt9uJKlVW9U\r\nK0ZXHnT24DBZFK0FoYHx8cRrgqBu/WVtnanGKtoPQVXqfdkgGE/9fJlBgRjY\r\nGYlaxH3lFbDnrmuoAdVJjBf8DdQKO9LPyv4rJALwwfy8B4BuGQT2wofAORJ7\r\nXg6akheKsQx/q7iInivIa4UuT7MM9f49yir2/MLCj3ePEaggXFotWV90b8c9\r\nIIzkS4ZsBhXXAHW7L8skQ/8cm379Ma2OpSwjhv3z6DHtK8NDqCxynPjLAAc9\r\nXYc1Gh6XMTSTc3exiWnNpU4uSKNS7ebs/1Yxrx1V9xWZnhMPix0Xkmn+F8Wj\r\noRrzWYrY2V41HsEbRJBG1+NNS8Z97jUYfrw=\r\n=KuAp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ee40081f4.0_1666210353688_0.9478668538913468","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7c579c96b185a0066fc96c57015b355c7fa69159","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.98f1b54e2.0.tgz","fileCount":54,"integrity":"sha512-C1PTt6ThgGWVgBe4d9J1W/FTKTEXdhdimRFVP4hl6TiyzbBaB012zWA1H2fTVDC3Pt/pl1PhpCY5YurYcFE3RA==","signatures":[{"sig":"MEUCIQDCKwQCrHoS+ndgrfXszBLf0TQzAjqNMg4vtx/T3WFkYAIgDrwH9bO3W9zc8OKSnJPC3Of2wJr4WYFrXzgIAxejyTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP9BAAjSIpR1avqX3UddepGgfq4vhLdcAZC4ZM/CLy5b2BX253LsTk\r\nBMDFA5qKyeYtPkhgt7ztCVtMhN8NJtdheDFsq921qctte5wuavVvF7UlRIBU\r\nVwkLi6TxyaOrnzKrwOF3bO022zel6gHIKo0Q+VQjg1OwQgM3QRq8PWPMEsix\r\nVBveIydQbggj/9BuSWGgfF4pe6UBpm7NSfu+wLM+gicG1JQPTfhwgCmjxNI1\r\n0JEjA4n3oFTWpIW+xKzXJRjjlj1UckwodFq6g+AZKaOcs5czpxsIPdmBh3mE\r\nCyiJdhH27nxACjdLcGBV8yb/BLXbyQCmdbD8fBZjGW8UlQX/4Bsl1Mvk28tr\r\nS8sbiAjseJb5LVprbOW+yXXFlzaEMyy2Vh8l74jzp9VXSEa9TkJ6kGZI9cs4\r\nUsOljWwTA872DVFC5EIQYmoWBPmVKEsb2FHK8tkOoeMsIerpkJp9V02UrL5D\r\nQXTDAElTpNlScUML5EhQAxlg82FJvcW3SGG54G5zXepsnVcG9JNAUu+IUFd/\r\n8vlmOYMLSfXqwS92j59ilbT8hELvyMGFFHnzssCAb/z4bcEdHYwIg0Y4Zlni\r\n2+Mj1BkAqLea5QbCXTd3U7VotOux6fuUaTURjV1jZwK7PuNafh/91k9zy8kl\r\nVyWawUOEkpS6rVTJjPYJcFo/vFyAXMtNqNU=\r\n=F8bR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.98f1b54e2.0_1666306642389_0.3987621871661975","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dff19f643aab5c7bef8f13220546ca2b67022e7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":54,"integrity":"sha512-tO3Bhw1RrU9Tgj2MPf66vjFi9WKfhniT7v1KkDZz2fsrsorXC5yJmUlD6ZK53aB5bbQN6dVRH+1JnYKe5US+tw==","signatures":[{"sig":"MEYCIQD/GJmWCxC9OBC0o/NBY0ax/PdJ+tc6LAzpXjbp8JD/BAIhAIu1Q0R6UIo7l0iyP+n0+cY0DYxs9zT7KD09VrAKn1S1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpehxAAoPmGjcqCpXvsZYhjtL5WB80IZYikJIfAgp0vGgcK/Q+EH/VZ\r\n9xpp9OB7NxCL5o1INaYbbw/niZGMIY3Bjr3Jl5rAYyEmZ/DoDJCZyqlcqyCQ\r\nENjEhweEkV4NJ556Jqfxlx0DrgIsFNcc12zNJ2TJwenzaVdVI97UYP9o1FfJ\r\nYt03DyTJQ3PHyqW1XkgKTatuiYk1MHljf6b21dGTWdaSLBUtwqwH1svaM3L6\r\noVQD0dVy8VgjKYjJbRsdfJlUH6wdrEUYKflaLLsDFiosikLxAOxwj94y9CHO\r\ns15HV0JAkBBQNY1YsjFHLmSmVKUulwyPPhD/TVNSl9IXcOkAUJOyw9neVPCo\r\n9ZzeAoC95o8I+TOu9pcKAre+6MefM0oT51anjQn5Ipr/YJcg6/F9CNamx9hx\r\nnJE19NFTggjkusHNIavM+RxJ2hzjYQjjS7nHFWeuw2p3ldDgn2G0/kJuFMzF\r\n3fIspWDsoNLDoMOZ7L8eRJvXvIUH31InKAjoaOLBK8Eh6Sf8ka8JvN8uVLIn\r\nOz8vVGYkA3TG5S+kL+BHkjBogX3UaRGO13HDLJK8ss1NiFBD5BgDnRans5Ir\r\n2IpGuI5bBZDfXQYJhUIIengMeV9gx3QMwj88GRlDPmjdlEsJ+54MNfh/a8RE\r\nz1Z/iVwnf/3g4pJmTSzXIE2MZ7G+KfPtxGQ=\r\n=PpE8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e74b7ba7e.0_1666371986249_0.7555671471377283","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ce518c912fc5a91ffce26b9a7559bda06ca95369","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ab55c07d2.0.tgz","fileCount":54,"integrity":"sha512-zUSxDPuLNT/FCGVUGBCNILnwBSEyxCpnf6r2S3n3FzY2KAKZip8roxHmQTFQlCWTD1TnA6DwSGEwAhE6D76UHA==","signatures":[{"sig":"MEQCID/BdMzSWMnnax9EmgZ0AlkjameSABQM8E15TCnAAZM/AiA66qtc8Yu8Kc38FG2XRgrXjnFN8NkJssBT7nlprGDhrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDREACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+cA/9E7RdqDaNjAYqWBkJtil1TAqjFYmRmNECvlvlp9oeeSGbu147\r\nVLVct1cwZB0Xng0mNpcwBYFRCOdyydcSgEEEWQyc0zgDNu4uA8B6PnTBF/s9\r\nkbe5OQx41OuO8cA8UOt9Oq8K48xzZa4EZ5whmcrhJuwDL5OG0a6Mk/bi+U60\r\n2Wmo3sOjIyDKC0Ap60sm14JYUiALkOCfBY7yNxEWVm7L/n6mNbTK4GMTMD5D\r\nUm/ORG2sBbGPP5mmWDthtgMoNJmOMgt7jlh3BS8X3fnkxCtQtWuTcyDlPhfQ\r\nCpYlayPzhXBDyrIvjFAQOZkTdyOxNUbI/LYkP83jou1qeJl61dRAkUeBRlGZ\r\nuh5V7mL9Otr5G5gekb08pNLZmK0uIpcgcV+ppRJSj8fXmLVkHgzgvBAIUtmh\r\nJyVsNX7fUVoGs/fij/VLNtqecdtRanFclfYk77PdkZ5h1eFw0XF7YXihU10f\r\n+qoiR1/yc4f+sEjcKVA3KG5/UYGt8MnBjPXrqezmegwiS1nDH+JynlT7+OjF\r\nZO7pmWuxqwDqKZTyfppCv7uFj+IKqKdu5tn3VvEDVc8jyBb+/clpWcQoWOWM\r\n8PioIQBf6frxXo4VxHnNj+9so/44L35j/2n6+sZPAR1DSMZI016b1G+KHlE9\r\nLElZg9EthED84Fjj+x0+Mfvuy/Ya/8H+PSw=\r\n=J+Yz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ab55c07d2.0_1666462788473_0.3806306872357479","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"30dd68b9264eb47650d1968a439be4acff5978b8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fc539db34.0.tgz","fileCount":54,"integrity":"sha512-wPjcEbSdWrxGQrBvfJ2M/AzqcB0UYgaQ7O9uLwoOR6KNL/Im2UHZ9KvixJ8CVuv1XUVdW6DPMHHOTUi2qw7NHA==","signatures":[{"sig":"MEUCICrdVR51HBIbr/K/10sOnGKkRBoqB+E2h39vv4FM7GrHAiEA1oA5dQAz26NfwWX76tT/b43+5Nd9d0x9DSdknO8ZK9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFLw/+N1lL7FDKNTGVK+/DJ9ZHlCV2NQQuPcvObjuulcMigs4XLoOW\r\nrZZVDn1PF7RC2MvwrBJ2XDAJKiiMe/niK05wC11TEKcfAh7fIrb1Yp4QTMUY\r\nQpISQG4UDEpfvt1diqMl+MvcscCB2e2u+ZPuCSA8qxYmtTwhBrqtG8iZq4fD\r\nKOCEkwzLWo8Jr+aWMFG2IfO4dwk4bC9u0Tnq+JrPd1aUfuDFbOsMz53vXF6O\r\nE5tQH4+N8XKKrSt3WEdy1hyXuvJawBnQaR5ZcutX9piOdCvAk+x5CPKEFmPo\r\n7sd5A+JZ2luPPym+aJ2xLR2TstSNDAVK/y8MMVcxnv43Nr/XXJ0ui++E7nrQ\r\n+BsPUXBa4j8Du4i1wzFxoVUlE7HZhvm6ucrMXJfEakQmT16RqnY6YX9Eyf9C\r\nKD/FNwP5PUKqz5KOQ/CsYJjGTaoJLXDhNeV2upYxfEgcPAm4kX0Jkx7HCfiy\r\n2T+/AtdXfHPtETbSMW5srzSj80Vgg0j/TXpZQIecIyZKR8B64KeMStj/nXAh\r\nM+j31UiSegdSXwor+lJPoVwkUHY23gnphSXEXQ/K+gOe65YvPTuVBOemo9+u\r\n7dnPKbSCDLZhh2RpdpLbrRDnz5POvap2J6v6wPDIzP6GCHi4qSjJii+zEE1h\r\nOMfm8rPtlQgXJV6epTBcLW8RC/TAgV3D9n0=\r\n=O7sy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fc539db34.0_1666637988040_0.4032045661307113","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7f418db62cb2f2dabdc2d5e82b1d44cb9c54d651","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e340b04c5.0.tgz","fileCount":54,"integrity":"sha512-xgwOmJMAFMnFQQMNuFeIFLbQ6/C4sUoP87GsAsW+eiIEFMEiiyoIKlMingktF1fDZs4A2co3SRmH2umYwz42Ug==","signatures":[{"sig":"MEUCIQCw4QtyKnIKchJLS53398aJt/7pX6HJ1C5GZwMuB9JycQIgZPKLmsRkfg93pj+LUgqQ4cQsEz5SCkJyPC14Px0g/QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbpQ//RQwWUTM6g1fqZBycb0uH2YJXVZfMqPxpoVEG+wpT2LAwjULf\r\nZwEtyVRfeKfnPp/TPhEX8uTeI0Q4sVciCLVVX/sGrIdPWZ7icQOqhEaKLuY3\r\n8NR8En3xYvynUuDaCRFDGctd7fAV5G/vByz7nOGl5L6mwm9WLwgvQ2htaVN2\r\nznuMjP9YtAejcpHqHuvJ0WZmO3KiU6Gvbtynz0UiBkL7VNXObWPwHhPvH+w3\r\nTcNW8qYo5UiPkMgqcTWVHY7exNMwsxGleJ3scI6+W0b2G+lSt2QQe8QStlb1\r\nujiwjXvU3+YRvwA9jHlZlf0TXtqPEfQVNsXeBH7Sp9SUV4OyJZqtCk4g0SNQ\r\nmTeQMwP41eRIiTaPERUzp/SSyC01g0t4+MEqz0QJY7LJVxT1/HacJ6MOj5LW\r\nHtg2F3mBVxstbqZrZQxb0Dii8W/KsVWocckeBvEBT6JwfmBHIAyG2qHScI7/\r\nl4dVzef+JM2ekFjRr22s1vrj5F1NpHusGszSJZNEY9mLRcrRcgmucVbOv0jr\r\n0LKjmRlbOtC/8ak/6qj+gXKkyqWCaymRhIu7+hQAGvwK+fEeFXDWXPSdjXK3\r\niOwlEUmsQ6lfHcmh3FeG04zwPGVtiKcwY4j8FGY6vVrzeyUTgSB8Zk0VBua3\r\nDgtD8HpkT4d4Ty3P0/7DI4jkpSD7weKo6xI=\r\n=pp5B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e340b04c5.0_1666741542046_0.6077088307880048","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3e98277ba3512b7d9abc6f3b3da05dbf54303e25","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":54,"integrity":"sha512-V4slYTwsc6076TTlr8RaUpMoEQgrlaaC95CcPIsj0ON/n0S68pZf+sc2Y/jQZ+didwoshROk52OWtLyIwRRojg==","signatures":[{"sig":"MEQCIApt1mMDVs82Dl1R+zWyH7+3N4MWnxTha+M98PLbtIzqAiAhsNhOW6wOo9uLcra2psc5JPNbEstWBECaOD1pMAMWPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPqQ/+J19OnNq8N45V1O3Hm6Z1Y9D/9v16bLle3+XPMeSrRn4tNP45\r\nWzGUQCWl07oAvrpmJDF+B33u4Kl0s+nYCRIK5bV9FHZ0hLppeJGckmcPQZqu\r\nnCuy94cwAI6MAPDBazcpI9KjeAUgEA9aDFOsXIrUjhMMidR68Q0GY9cmE2My\r\nTqEbesSbIMrHWmeAUQ4uz2VV33cBzunpegnlTlFCshfyBpvgqVUpGCvG/WGx\r\nAXCABQw84WrTa+NYeWz4cuz2FAxFXIPsTrUYkuZ4d1OEy+ra1DsCA3tthwyC\r\nSHGTnXEgbXYxOiV14POvSNcaoEYfWlcH1AVM4L4JknP25/0uyB+dG5LPZMgn\r\nsg39xQS/Tl8ZzMZO45jvZkO0pGteS9+/jyNdBjHex5kXuNgmx5gx3yD+/rRN\r\nrMRJuNPScmBDFhW/2UE2uwRgDOyw5pW0Q6+dSyzfJRsqB3jb8g1LYAKFrrrZ\r\nQpMdJb+UDu6NodYFYomfQFrs/HIqofyiFUEDQ5JkSIlieCWaVg0JtukOrzV0\r\nupBLVnmGZRhzT7inSF+/h92erQA68AjFQkSkfzbn1+5PUOnjZazdMNzanWxj\r\nGk9YhrC4Zddv0iyZREm11X8qQ1zdunLCaoZ4TQ9AMyuBouMdDIUpk3U6LWoH\r\n2TpFtWxH34xdqB0QGzsmFqbZThXIEZ6Uexo=\r\n=ropL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2c1a8f8fd.0_1666805478278_0.25581303234667674","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f3e12023d3d9120d07c137201ac198b9014f71fb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ecfee946f.0.tgz","fileCount":54,"integrity":"sha512-aCafnCnZel6ZOkA1y9T/OhySfqCjpmzrfNifYIuC1d1fFv7Gkfc6rMZr+ocGb2d1GdRwYCPhwvEq5/kn8Hnr9w==","signatures":[{"sig":"MEQCICkHYfLlH+KTw5gG3CQbQ473QHJ7s7/d4pO9nXvBAhcvAiBK397ESVaBROghfKtYp6lnxZwvNrQeuV64Uj60exP9Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZV/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmqQ/+MfePdGCY3gFMGhMuJVkkKs5Ghw9ENIhWcShfr1G4Z02zhp7i\r\nAPsXAF6hhq/dtameXaDH2rpV1D0v8kAWVVubRjbqqmzzg3T3wcZHOtMdRgAT\r\nUIBARxkgo3rFDbsiFOIVcfZuLFxnwUE3WEL146zckO9LB1xYU6F2qD6LC+3b\r\nSeQ2hCQaz5/qegCSoci9Mf3NRF/BlP8ZQK6SU06Lh6AaGc0jBWwlcQGAaPZS\r\nAhvwJv2wHRFY+Hx3bn338jBMi4TZuf9A65OAV5bvqxETO5XaiJK83Hj4/cCy\r\naprC0Fj2WBPfz5Cnzrc8cdoVHZC+Wnq7O/aFIC07vZ3vbeQRqUbWibgiz71V\r\nCuATyrNMU1RS+5oTWYvaDpiXK27CKRkWQvTKB8/CiSyEW08xhuHUg+25tn9a\r\nMw/zMQtffnM3qSCfWxgVuY/xklCVi7WUkc0xAOaYU94l8mfFmUPT+Mz/4+oU\r\nenEb4SP/wBMTLi2t7u8o6yF8xR04N8Cf/Jc7zgTGtt4+Pfj+AuYMQzhQGCun\r\nRnExPYfvPh7wGhhfn1y6W+QPXwdyhlliQ4u5K0M2gGJdT/o5jn1sDxI5Ty7n\r\n8I2Bq/6FSQWOwoh/Y1Iw9wyP9TqEpTxks/+Ti3n0GsCM5JpUT20JQbjHSl8F\r\nmGUWZngo9H4nHg6vvA0m59Zw4mWugBu1zj0=\r\n=QVST\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ecfee946f.0_1666815359473_0.09176380975617282","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e151674398b2842630a8a28af27ac8ce961233a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":54,"integrity":"sha512-NJd1U47gNGO9AC2rJLU6y+iFPCG65sO8J2F80YjP4rglSY8KXBh9qF1z3BzV/IJFQ0oQUKep2CFUvGAV+A6jiw==","signatures":[{"sig":"MEUCIQDwuVHUUpbw+g/IbhzCWy78/aYA9C/vwNkNtmLc70tEzQIgJuOkUIDJIVmUFoGKi6nQGeIuKrD2mhxVkHZMj/DSWws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtRw/+IIrAzBvSB2QzHfNcIJcUF6lKfwf2lhn12wf3Fci5C0pGmg/V\r\n31+weY56KxYdl3jv8e6jr4nNHLKNP2QpOljcurTQcqLHVr5hmHulO8hV6rUv\r\n1gA3ANVgLDc6MfAf4C0123ceY+WDH7zL1SaD5PH3JSM/mz0z1uV6/1isvjqk\r\nn8tIfwcPb2EFtpnfW/XtZMRdL2w4MYH9lwDrhCx1aT5TXeIGkun6GtDUxVs+\r\nQqmOWUJ8fCikK16BYUvHUh8PV9zSLpy/rhcwbPg9aBa1ESMrtVDhcYJrWjRx\r\nGkbceS5j63+HssTXQHDo6KOLgAb7gcj5XodFUOjQAfo1XDY/fhE5WgOCP3OP\r\nF5AK/wePx2IcoJu+/PcR7UDSK+LCVmxdm1Twhk8Q8xguPcQiyxlTjYVtqqrm\r\nqR+71jm0VULnGS3HPOXpoLjLN8OdFwguTfQjvHjb6GI86sct6oPh/zpAxUHG\r\n+mPG4IBzT/qxFgb/kQ25uKv23B8veenGQAzeOgQkO+SbFDcBx06ELrTk/Zyq\r\noDj3dRCotCsQVVVVO35YhJgdD0kMV4p3e+ef1tHduElHTWVXhqX2hFFaCuoL\r\noVF/xQgXGpHqxlaxXiKSbW2gMtl6XabbHtU3OQi9R2MoH8HIlLhA2pp0T/Pe\r\neNRlaFUFWZr2l78Gqrlc0CDiqBJG+34COJA=\r\n=hgS4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.73ca9dbb0.0_1667237588200_0.8857503466277588","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e93b459b0856b59679500e8efe2a28c3e03d3401","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.357f2e5f1.0.tgz","fileCount":54,"integrity":"sha512-bPIeNAjMqNXgl2dmpIdb803Pe+5W0tIU9wEOxQ6LlLlD10U0mKUdbVrQrsOOK6hKQzvuixJiRmRGC+vy9lvYnA==","signatures":[{"sig":"MEQCIB1m0qMfdq0R0tynO9DWyEWDOOlqEgm0WhmtszTHSWXqAiBH4i703EWNC87fFjafCYPJlknux4/NrNdMB8jtb76fTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjBg//ViGMBGAkrQOX+zn/VBQl8CxwjiVNldqdwK85x8Y8NenvK4QI\r\n6oEF2m4jlWx/JtTdKroO1E0X8UfxAY2HDtaO/3nXV+0ozYeJNbBH5L+cOdiY\r\n8MZerin1spS2NiTIcKo0+12JwdfmBBd/+9Tl8y/ja1jngsTpRzAHDXT0EzZl\r\nHWchndj2Kxcgefly3M/u/ncySr1mh19+C5XdECI+2hUr2tm/YevlubQARiKV\r\n6g3pAeT+/4lFVxXolNKCUlCqhkPN7nqm/T6JKx/3dqginfhDs77aVRn/L1hy\r\nRLfVcgK7zuUNr52rvrzkaspfuTun79xft3U0azDZYhsoBJxdWR9xccQany6K\r\nwOzXMJOshZj1HR8nu+xSh8rpC7Ng4Jb+WOYiwO3mbWrjlI56fK6aGjXTGdmZ\r\nHUZh+aNiTUFZ6cqqa4c7ZlJiAoZZmLRvOfNWKCDolJryy87z3m3KyHpMKBVZ\r\nL1uYdX5+CtQUAiQzY/vH+ggLYe7eSNA5ifFaeiC3j5F5apW9NBLv1L96toR0\r\ndJabYTxvxqQCfgZaemPRLiUB2BzKGGJlGPrFpiiv3WNATrUw12x0Ant6r+D3\r\ncoMtJbONussDcvuEpLhFhxsdPVIGnCVLBnp4JXA1aj5Ch9n46xl16zpsBFjz\r\ndp422RPMAup2kD5b5imULvcII67aKQFr238=\r\n=1SVT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.357f2e5f1.0_1667242211674_0.031184400152622027","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"476e2c1319274d1d135ceace75435233043d29d7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.eb103d4b5.0.tgz","fileCount":54,"integrity":"sha512-nkD2DUBMc2cQjBJ3j41JhaF27WbttrHAarLhG+tPFNY8sxcWYdQgrgB0OnyZkikQLkCDZLi0yTf8vcC4sAugTQ==","signatures":[{"sig":"MEUCIGUSbBhh6sz8iSoBXcLHTHbbphaxXLRxMFErY/CTY4daAiEAoGDDogauw8/ub34xCSdKolFY5G+oduFt+41FfNlflkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCiRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpctQ/9FX52AsUZ0Z62yBU1lFouVC4xF7dEiiEe9wFhYGGx/m49h1fu\r\naKp3W3Xu4a0xRD4mEJITYiu+Sc3wNMphNP/O9ROtw/hoIi3e6E3u5yTfTHVC\r\nYFlObgxrwMYM227feRidVGL5y+gAeiaqrlFbl2PX16Cv9MNZ1xZrGt37Z5KZ\r\nrotOG6UkYSuUTWubAhDtDujJv9HS0vmE0M/NUvaDdJzVunICiOooXDwyGbcd\r\nc0BMyjy7MBKBm2NjmASoF42bMGnjfcbzt3qyXg/2Hu1YFxOnUQfBx0dY9McA\r\ngYhcCuTP7CIoY+8zefhmj1zDh2j/vLz06SHRtDB7Gh1T3W5NpTmsz1fHIudW\r\nb8XJcfsPjfsU7JAPKv9P5CL/SNJgQMVyIdW9LaXx4Z+ceXGVCjnvhXjjx8sm\r\nLQuvZ14aFiAzCEOc7OpFzNafFDlJ67r0RUwtvqG1WUDWLix4u+RBvJ1IOqJ1\r\no5C0577UWvb/wDDOoT57XAe06hVdsZR9x04DcjsYdKi6lU6x14QWVfUdwxCo\r\n7TeMtM99Tp9FlHdrYr7YRHlh7qjRYZfDO3k44nL+tlUot7lEgmGENX9XuHVI\r\njafdLq9EVRatbMG1FhfL8z22DuIkI0JbedfLvljvRea4ZLnqtGPXJ0rLgnLO\r\n2nt9yWfhwHvjz+lLlgoqYkX/HwAQV34t3WE=\r\n=dCYC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.eb103d4b5.0_1667246225641_0.3832377626440726","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/segmented-button","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"53841e97730755b51f302fe4da36134b2fc17e78","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.af5f01223.0.tgz","fileCount":54,"integrity":"sha512-ylsOO+xdkXh5p7b4sGPsW23wy+cfNs08lkttSO5ujKD7kUuBeeT6x/YmRfEok3O3towdnF3xXSSGtLq8ETPd0w==","signatures":[{"sig":"MEUCIE6kufpKdy9IRdINpRlwz+pcxY4HG3IzdQR8yCdEqEB8AiEAqNtRJ6u/pxzhFprJvEdjtbbyx4d7Z4f6e738Uav50r0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAVhAAi3YZ0cy16a12qijyoK1CvzQPgJENzZs8w/t+WWU+rw6y3lNe\r\n5xU6iCjcQo4DX9hgy6KZw1WhY7Zc9ZUpiyr3Mi1uiJ4d1ErvLjAxhgoIsC+3\r\nP0GBfRdsdrwcgdnf6Ta/QrJh4c4r46HTuONNjVfAqZxRihug+NZ9FYloHX9d\r\nwBb758bxs09IIK+5qctu6SvBv9ctneDkkwrrgJADKN8TvJN9S+pDOWx6dCiH\r\n/FDYNcSCkLNEOLobmfFS7gM2e3Dybdu1FzAI1/3MNw6vXCFwuisxXIgOyPnW\r\njJ6GHut4cjs/c/MbTBYx8K/GutdHMv3epcquhtT8VjLh67frXp6TLm/B8rpF\r\nQ36N9jZA70qpX5tryn+LyGUFVKp2D/I8JuM19A2sHDFkw4hcrLGO+6YO372D\r\nfTwFifQvMyceCJeNcgj1Sldmpn6jkjRruA1fKQr6QT5XArAbN7Zy9ucDKZ8G\r\nSdYgEcIkTAq2WsV6cY+1SoUgFTM9hZlRyb1E6/Zp3hsRSLbYYuQ4o7iivWes\r\nPu7ioSF22LDh4C891cqhgrpr+HNrkRYryn6kIBWCL0RFlkEDft+goQuEGlbi\r\nVdf2SUHgVnuTQYJUkeon3ldRPGAXzLiLh/HxFTEKT9m+XaXxRPVWVHdKw0td\r\nXPsiiajuKniltA9Ibc9ie+OX/ZCWk5rdt74=\r\n=q4nQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/touch-target":"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/segmented-button_15.0.0-canary.af5f01223.0_1667327851654_0.3596819287486466","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/segmented-button","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5aede5bc1aac12bdda1bca5fa91f6a62d41bc7a7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.58733ef41.0.tgz","fileCount":54,"integrity":"sha512-haIyxkvTAv9UF0rMyk09x4Jpd31ewDOrdfCWV+KZmKgaPpeX4q1dKOE5JLMOkYRKxBWyRa/PegnkKFvebbfLsA==","signatures":[{"sig":"MEQCIGMUA0TJ1SsFEG/yJrK7yBTBQTFPij7onJqBLya7hi6/AiACOPHc3wbCX6vzqhBobCvu7IlCk1BuAbcNLtj3adWL2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrLNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9YQ//dCptpsoM8CReqOxWAHTemW/QKGTCwetO/pFPjni3Ng67XaQM\r\ne2E0fzj8OJbfgBPJ74MF5CrPtUThygBLZ8rt2Fpvm9BBpcKit5VKiMeha5OZ\r\n6yT0OfClowoi3uoBeWu8ARI3VL+5ZuwUKncI1/cNEeg4ndfliITP4+pArxEl\r\nSR0z06BhobYaj+7fCGlGMQjDRf9kU900of7sGqJXXSwW6GHjet9ndDbmHrmZ\r\nR8NZLX0w0SVhn/7PaIep7CmAEjqnIlcvdvm4kOcO+EXRj19q1FV3jssijvFx\r\nKdALGdp6WUAH0bxdhmAQAqLH211i+7zKovCbO0Mth8hRemi6UnG7dC64OCL/\r\nJFbsBcglFrd9lLQ/GiZ92BdOoeVEhE0muwAbu0XZE0QXX/Cv8WsJDFfFuBuL\r\nvwJKCXB/o/DaXPcNSG1CO9EfLUfXWPoYu/f6KOpBSZJri8eWiPJxpUNeqz8h\r\noyl+5oS2LSx1NiPRwjyY6gAYMjp3NON2GBJIo8EPh5q+EkzcXAmZm3bF5m6f\r\nV+KfANPEgLzaLN9rzFPcOrcX7Xc4gcNm6C9fqq3sDhImvC6fq984oMIApW66\r\nn20ov8cxmjStzO2Yv6pyLSn8sXNW8VnpG4hHJGILx49kLK6VibDoFQCxH2oq\r\nUBmY5Qvb+Kw3br27oDkv80AdKmnrhjjaxIw=\r\n=75+u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/touch-target":"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/segmented-button_15.0.0-canary.58733ef41.0_1667412685004_0.037953435504629596","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/segmented-button","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f6ac894759dba7c4337b1dfd66ccd8198c1344d8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.909b48215.0.tgz","fileCount":54,"integrity":"sha512-iZbwBNfs+v9XsJ9BjMbNTlHnKpAl26qEVj2XRn8UiuHRM8LAPV7W+09BlbIT6ANFk1TzKXrXCwUIoUYOfgDzAQ==","signatures":[{"sig":"MEUCIBcZcLxd8LGgN2+hB0Uvry8pYkWEHT32zifhrwQAOEb+AiEAm/5opnhkIJK6GFmTqdCozixmke6U8UkWfkd8KEFqgZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraIA//S8fUgBhKa24/BA9KgP5S8r67a8atIOlO0csCyz4dknyz84DX\r\nw7gu9Vst6Eh/XH3rbG0VYYtkjNb5uWJr6oTk2ewAplwlqXtMh6ZJQmDS5S+r\r\n6xmIJwlRrPHK32Fi2XDx0+MQP3QxBhE8h1XVfjtA0ShEa81yaehwORVTSCxL\r\nCVJkOqkfwHClS4j7QE6g+5d/94yPUMlgFoKszptwt6a5EE/DQi5ks8vdohFX\r\nkAYteF81ehaF6+0SHVo6oKSl/QJtK36DUud6QdlbqxiJ039F9Z765nA1Cb3x\r\nVWg0jEb9nd6dhnIYD0njcZqi3iFYqf5VCsRtopqwourHFBOssHB94css4UgU\r\njzo8sMH5rSL6TvlMol0mERfSZu6GSAb1zmrhSggql4tbyx0SL7Jd/pp36lwD\r\nt0zIOhRa409TA3UXDfEwXXsAaaS6HJRMF9u1Zr+1aRAzHLZN1IEMV7jqIty8\r\ndjtjOKIuSPM/t9EOq0IDtZtltd8aQSWM3Ecw7jM6P+RXwyb9N1iOqQ722T2p\r\nZfkkD5jCOLCGjUb1c9lNmarU0y4elOvAyNMw2ZQ9M2SNoGGUiNLf0bD5Vu7d\r\ngDQCcBzlAkGo+GhOJfI+x0oDFtmULXKouSnUYWu/vMalHwOG0+zlu64HlDtA\r\nBPTyubUDKIcP/KTamOCMxcxCo5km7ZpBlgM=\r\n=GvPS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/touch-target":"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/segmented-button_15.0.0-canary.909b48215.0_1667448515097_0.006935828910265451","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e4b18a4bc9d108d0356a3b29dc23e0a880e4b17a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7f17127d5.0.tgz","fileCount":54,"integrity":"sha512-5LSfeNCsFxkuNTAsXgSJ2C9xh4bmo80Y+F0Clm/aGcAxA9oqZj+17I3zSWgy3gmeaNZS4jbK9BUxovK99IUAhw==","signatures":[{"sig":"MEQCIBbeqoau+f/kKu3OdptxiGJDs6AwcmArr2dJI8/w5UYQAiAYKaMrlfibMyiWF6+14yp7kABTdXattSDT8qKqnxCmxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdIQ/9GWgrMyhT4JvYcKY/kWTI6UMG8BRP0G74hJVyNZ9gbrMfY2sb\r\nkxZXG3oUMWXF/Q9TGbQbk7AvrxX32yaIBBKTdZxiOFXEIqHQPIiqp5VlRKb/\r\ntweh7KecY73cBCa8etL3eiWZ2EUlyDsefEQIQtcjucY0udnNUDML3l2qVyqe\r\nTDMTUlTlbiLSTggLMSJFXc4spQE9RoVYP9i4X5Txt1I5eY0AlkXe7jqxBb/G\r\niu8IayuyhaSRbZydN17iCahdyPknbugLCPSHbsW6LRJxCLQH1DnjpkWOb0I5\r\n93rGj+vm4FF4SZIr1mb8EAn36qjI35fldxXS+6Pb57gu2CuHXQk8p86wAlCH\r\nITmrbl8MM5sV3LltW+nieBCqOPgSVJ+lvYI2zkcVw3HzoLdz2nHx/YsrIP31\r\n4VzKwsyzJPZyJtNIcJI8IQSq0Q6fvhZn73fXNlS6W3wOR98A3tenUR8UyfXU\r\nBISS0DSSr35b20psdV4sBMFALfU+A4UUlxVeXATY8v3YNAoVAFDb2KCFTEo9\r\n9dyN9vqp+IC5u/6VJu0Wgi4CKNolzb/31prgVgc5ENlAaJoACkhnlGxdbw79\r\ngzCFMjpnSn9zA4iKYY/AR2dAzhgegBrJvzg1WE5uDUgCJZkVgcFzMRxVIoSb\r\n64BpJeuFhSPWwcBbl+CxjATS47ebtjuPqHE=\r\n=SZmN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7f17127d5.0_1667499592033_0.6043603707660627","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/segmented-button","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2a142ea1fc085208f613dbcbd6f38d63bdec443e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.da95e2a05.0.tgz","fileCount":54,"integrity":"sha512-nFs8K3v2SbTqoN4o4W256CjieI9L8iOilSgrMHe4uZS0hSsxb4CPwid5w9U+QaHiBGfIFTIicQ/86wRjHNzljA==","signatures":[{"sig":"MEUCIQC41M/8dJbJHFiPUYng9VJsOWNKNPf+S6NG7mxjntpYRAIgQFKOor9YQ2EMI5iU7ayDSuCth32se/BIKk7H+s/uNFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUUCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaUQ//RM7fR8d7Z7D5YxVa2MtMWs8tLOByS5LIvRZ/WKm4f1dUSfEK\r\naHEV5SPdOYFY4I5DttVxCyS/Dh4binaQdfFHQP3UnanxL7oo8yVBLaU8mhD3\r\nFnlp54PdZrA1/2Yr9aLfNqWNkDEqu19PVruiZhmf1Ka2EUqx1346cLNzHcL3\r\nioSBvapI3SJpYByp+KV4T9HLf/KDSBEMPg1MyZ+kU8Tpev9WTATvtc8mUZcn\r\niKPmdbOx+smyYohkI+HibDN7AFv5rf7KzaeHeA9fG2yYqrlkiTQlSKas+BDg\r\nvK/pEeUBLg/20Kiqh8Vo10VvZIsOkg6nENeh88Jt5KSnTL7MPKPnO8d3lb6M\r\nSV1uqNZR5IONkBvcNql5H7srSvT6t547jw0JDTtJApN45Vq9yauEY0PCF+9u\r\nI+QR16Az+KhHgp73PnfhM7OVcmGHoy4r16a2aNGxUsi72k9eHXHeVzu+mB/q\r\nw6q+Bl8+JYQ4VhTGffBBjIEKDnbKTIlHYrTjgB1AJ9f7ehy9Y+Xe1OB/QYt7\r\nWDZE1eYvQKFgAVbgULF5o27jjVmuWsXAE+VXcvZSUkPIDxMj5drqsa064Eyo\r\ndC+C9znh2p4EQpl9nTJjGF54v3pk2+CAxjL5MIeQAoC5Oz1fzuW/kG/UEgLw\r\np6xjSW5vG4W3KW+jGFcfGgGqcbtGJUfSOtk=\r\n=hP+K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/touch-target":"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/segmented-button_15.0.0-canary.da95e2a05.0_1667581185955_0.9524705040807822","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed7f48862fa1a770728dde82763490dff2bc35d0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4832e2750.0.tgz","fileCount":54,"integrity":"sha512-lHH4E5qGpYOU3Taddo9305jsQP0WoMoTzq/qCf4aYp1WhKuId4AQFxekPeC1QVzHiKeBTbbPaoVF3JsWgHpSPA==","signatures":[{"sig":"MEQCICJp7oIMpqjO4E32KEBEuG5OpyMTt48mzUPvkBAf5GsHAiB92dIMf8lGLJ+OzpeIBopBjbPOaRTPPQZl8DGBofr8bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXzGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL2g//TlP+F4WY63byVytg5f6Vk3dY9hAyoWWs3P4C4JdKDeSSImyL\r\nuJgKfRR1j4f81jtWBP7xJDSIlf5JsnDri6FjHYiOow20kcQsMIS+ekjNdyJi\r\nHtQVmhjZj6uvvAfqtj3yZH+NNizJqgKDOT5dfC/ebaYaAhuOlo+2t1yRqP29\r\nMtwyy1Xhh+QsB365IEJ0HLbJk9A82WjlDNk5wMeHSP121C/4NyAxIO0AqvJ3\r\neIVVvK4OfubWmK2HgXy2Zy+wf/J6ZQex+/hOHlyDA3CwFQPHZjErEUFy3ufw\r\ncACJvmgF6qpaShMZVoxhV/6NNAl8JKNDIzlsYXx5dovuSzwYztfaBR/p3BOy\r\nTa7yHGAA6HYAj/wa0GxOnx0q4NEKwzFjdxPZ/NKuYLX3qbUFQVHeZS23hQ0s\r\nnbDppsyLAi5hkIP53laHvy4r+sJZtkKyq3pVcKe9wj86BpC40MWR8uFiCt9S\r\nyZGfkMU35JvqilzlUHrNudi69W6CG0F+fzDvF/dgRKCtQjNn7AiuF79IRaxr\r\n8Ch7cOSZcdPHinmGOmS+8jRzXfWJiZ0VCaM/qvVyK9eF+JShscYBNyw9BaNv\r\nTKnYtZrKUDPuHHlxE0jwFgSR1fR7QyK+zDZkmhsZwxzBetxCG+tJH5qM7ABr\r\nbfdemc9FigtNwFUyoic8176Rgz3s/rsd6k4=\r\n=fMM/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4832e2750.0_1667595462658_0.31401933764148815","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/segmented-button","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6a6386b6b1af94fd7a16aa1706b10fc57344a040","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.215506426.0.tgz","fileCount":54,"integrity":"sha512-726iAGOj1JAx4hgHN1y9f1tANPpIcFI/7Oh10fZtYY1zerGRP4Lk96h7ux39AETEieVpMSOIseY34BmwRTF1Kg==","signatures":[{"sig":"MEUCIQDT6XXLeSpF2QFc2ZU8Tvm63FrJBrFNYRa4UtcTqU2f8wIgGoXyhTOdeGqcxIgphbfPIo8DFPZbGRzpnbCj4Mh/qnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":569567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbceACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsLQ//Z0gJl6ZJLIwHQ7yDguSa/4ZfUU1WxSgyUajLXz3K6eiIN7F0\r\nsh6yuk58G3d9AP31iVA7ovmDfRx3tIU4KA/TCR1q7va6NYZyJW5VuQWk0+qV\r\n4nH75KFwmvuqNUurnJbqx5bDxynHvneT2IXOthkWtxEpZWdgTaQ2iLK2MqPi\r\nbn4luomQg0EHoCe80V2quQxQQ6dC6i3tmp6LP6lPXMbDgSzpRISSbjQX4Q2a\r\n6PohmIvmvjsYt9EGJi2mm3aiO9z5K09XmA/Xq1iWWnxmkXkkvPdgRfi/iLt4\r\nE1TafLkuyXTnneUgxGu51fyZzHmMHz2rEZpNxGW/v/qW1GBMpAM8CZW1te/C\r\nyRLZID5pt7FreeE6CMu3UIYtZStrrwrEesTjKGYs5Ic79TJ8FVQQeeGVK2Ce\r\nq9Jyq2tbDs7wYJvSf87fbeVo88ndXt/yFywGU0vp/8qgoZDbRu4c+wosikJR\r\nNy0t7Zb4Qqx81Km26sC+G7Mxv4OA+5i3BYbV9oSf6DY5gg2ZONoO5Y62whcK\r\nckvXR4XD5No69p3zGIzeqscXIE4tAXs+xHuHbQmhYsEkYqrZZkEIESUL6Df/\r\n0VyPcyv0BLfy04HqxJbIXCNCQ/47a+M9LzayqcKKjmM8FTaX/jy4T0E2q/VG\r\np3pSjvAmyhdRayoyHKIhKIR+Sn/XpRAlKOc=\r\n=t0T7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/touch-target":"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/segmented-button_15.0.0-canary.215506426.0_1667610398412_0.17611144086398633","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da75f529265cd264618abef141667588d0de51b6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4cf917476.0.tgz","fileCount":54,"integrity":"sha512-FG599pxngk0dYqDb4rpX+ctHEUYpC0C1Ft0c6KCQha9l63nJUzHZBwV3UC4yN93DgZq7DqNYhGwbNmUQ39nP3g==","signatures":[{"sig":"MEUCIQCAgZWAj6SGzlYQL1YB8XL5sib+sTuKbwx18RjzsH+CMwIgfNbO0GkzIdS4FgfmyVXYMN3Hl4d0lNmzCMKMhkwBFWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqW8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGhA//QBa2QpTo1w0X+vt7f7gCoVbJqWrq6Jf2zKRSMbmoEyWIU9nR\r\nmMFpw4Xfa/fPvLXktNs1DG6Dr82o26DUVj9hU08tb4Ym2E/KB/Z/qucVosyh\r\neQHk4wMzWaFFC4mg1H7W7c+4m8bhIzm12KuobePGVCucXLy4CP2Wt3bz+C1d\r\nZbRxzSA2Bm7J28oDxPnD5cqBwA5uWaifzEr5C7gzp/2K4Ibe+SLtAGDKFFc4\r\nKn58+7bEBr4EWjKS+qXtr8Hil48GTl6pauRoRGDQZF2Odh4A9zroRnEsTrBB\r\ns49S0qjM4a4jCMNQc6dWUIhNSGmRYrUWmLidoXx3e47vbz65EmtU/1pDVIZC\r\nvoWBwpanG0q22eRFn6ycmycBJAtjumMp3FVNOyxXFHlVJpZPQS9winM7aFf5\r\nqSK2XPFeWuSO/fLjQs3/G4XeLI52RTGBtLmJFFLH43w7SJbyrqe8lyfrjpxl\r\n35OSPx07ittkOK2dgAoa64Y/U1bamgTh5reWQCRBSXRSlCyAU7J/HkvREGhR\r\nU9ZBmdzwKALBcyaOyb+y6JUZ2hP6dx57VtYyqFXm61WpHS2wQnRSWYa6z9qe\r\nY0uJ1TyDZq9ogRPU4xntBr9w1rKEU6Vk4kMLK+8iY7NdaWEfz3lHaCwFMbLi\r\nMUz6BpXXugYaZNMPvDQ9spJhzYwvE+fcris=\r\n=T9n1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4cf917476.0_1667671483996_0.6779303769070186","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/segmented-button","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ab6ef39ec6444d817ac14a82eccf03bb4fc003ff","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.eef14bd32.0.tgz","fileCount":54,"integrity":"sha512-R4pXwmfkqABLQa66/SzxnY1m4xlTgyGoYT6F/NpO67XuFXRacf81pIpluPNLKUPXmqZ8SlFgk2Qk0x3pipxNDg==","signatures":[{"sig":"MEQCIAgyFsLrogOdYTYzJF6GzI+6+ZiYzJWthLzEdPk/pimnAiBDAd0In0DQFzIFqmTR4UAN73ZncAPEuo5TzkzNlof+DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+36ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+eg/+KFVl9udNIot5lkv1wD2upSHEufcZUohXtN0t2cOu8DsBaqA+\r\nsWD9uf7q4HbN02uFnDFWtbLpVZvz3gHedyzCItMGshkxnahWP5BrC0IVzUU6\r\nxIP72uNtKqmr4Aaud5iEOUCe5eZ/oN5ihHB971VeOCxxQakWdPT8ApT+LUdA\r\nUkcETKuf5gD20u2+lSNUhs2S1CVofW2sRQIYVunBlOrsOHyFGABzSrkL1hQN\r\n1j+FKkwv46aq8wvJHPTLEYtyGllu8ho/oq1g7MPejZOj0Fj5BSv5B6Ikr7Zj\r\njdcwu9XsDjiokcBgJxGb99pnB4Uw/3aRBMz/qku/JioP5JlHmWMQYhnPpIoW\r\nwA5FXofpIxZUtQq2c/WSzEVr7/r0NAVUqjj6ok0EOf+a3tsRUu3nIuVo1J0d\r\nurU0IWFyRL74SG221XpFjw9FbGguOEyKBlAR/JhVQsyWWSmTiHGmVaetd8C2\r\ndvny10HMf0pTnLOScwI4NjJKu0rGCsxbOVOX7vmAIbosmISsu0SFuQbtsXaq\r\nz6jyXn1PboLfCiQ667QXaBR107wFpsRFUlfNVYAmo/ztGSmyYtz0Hi4poNr5\r\nsl5DTIvEhSVcQKN9paO3uO4Wc0VM+cmBlwyhUljuklgQ7nBiGWfCfZmE+uWA\r\njrhmt9EcbuASB0UVvAy6rV///Prpoj5TMJc=\r\n=6RdZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/touch-target":"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/segmented-button_15.0.0-canary.eef14bd32.0_1667755514467_0.28910855889552023","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"69c71f098a509d38d9d432182885a8d46a676380","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6faa29fe9.0.tgz","fileCount":54,"integrity":"sha512-sEUSWnBr+CM6tFtCN/0ajJfGvjl5CnKBi2tsSwvScgMfiW69EcNFjD+lqOfC9IEV8JqPLDDYYNd9EGAtcQtcNQ==","signatures":[{"sig":"MEUCIGt9xMufTLn+Wku/05/EiDtcEIRIR8MJvLDA6gMDIGORAiEAnIoiNYE3zCOLsdPKVLegFLfTwDA1QXncYbHSkXPu5tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHf7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCCg/+JSNsS5U0cKZMDw42kuzDfgTpm7GQN3tgk9CvbgjaKG+WOi9G\r\nbn9HneKo6EHCFGrMKomX7Hxs/S4bK/x1VKHd0FH3ZxIFFstYCFhKipCAHyxT\r\nM5BIHRnenf9EDXMxmwm4phwAL6G7H45um6smQ4iHZ8UXKdAIRKjZqToVSftD\r\n7pRIPw+vveguEpO2p6ttiXsNK++2SI328YfffknKMsgW7NV5XeJIunhTI+bL\r\n/YylZNWeQNA7uUCRxmLgDz2ArofhN8v+BQ4t8QcPncvQZoDn+/zH17V4vBdP\r\npq+NXpeonDh8BLzoOKcyNDGs0Fx2DbH+uKbDrZAXBZeViLe5hKqVlD6JSyUm\r\nwd+MR1un3Rd6j+hu19T3MBS+tuqwDgORLyhR1vIx5vVEoTbne1dY5F6m34id\r\nhqllR3Exu33SKjq+rqp4OljbK5TbZqr3oNHGBmvxNF6pvT8TSlo/VglST1zt\r\nqO3fpEPgbx46uerVudG3fDxl6KvCExUnupBMy9cUqvT8nxGGTd41piHIHm/c\r\nSswg1iQf0FMKHwc0PbA48+NWkV7aSI+k807GkKdqnZLGLkXVZnvJBGwy4A50\r\nGYmqc3uPLPE9BBq0+C18jgZ2s1ERxWXQeB1UlbME5Nh0HV+X4eFZ8IDvrzsW\r\nNZE9BiVIX3TT8EBERtpxKrus9UYbHcHQWCY=\r\n=7fF5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6faa29fe9.0_1667790843553_0.9383346793831748","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75b65f7dabb4338d4608378109c4e7a8e5421f94","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9af09b967.0.tgz","fileCount":54,"integrity":"sha512-f5VVD8xi0A99t4QaFOD07VZvJp9na1HaTy1bggobFhFDPRtig+kZJeasz35pynFjMH6vXacm/CyeM/F60ZGjkQ==","signatures":[{"sig":"MEUCIQCR09aoSQKQLoz6eft36mK8tnontStCJF+Deap5EcFtQQIgEh6RaxupoGCqRNugufWBhGoeQNqTNyCvCJ4gxPam4wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbBw//d9sNvGbuPJ9rOFquubi+ThEAboirfpLAkIwdE69Y6o1VBvfG\r\nxJQ2upla4BX45zO3K2C2z0RpaqRusxGNDEk2bOvqYC8XEfauId7iX8QhtaqX\r\n9/RFZYCi9Oxf1Q871WpVaSq1hVRHx01y7O+WZII2FjXErIqFXLTUdbYfJImT\r\ngBU9ATEUhgQaG6ZCTcjO7WKm3MGjnijWEAZzDT9czN2ss0q+z7OmMfks5tPu\r\n9zfibdXu4bC1O9l11iwSpas4zfb9wYyqyKOfmrN5JJM9UJtI1neRzo1Ud86M\r\nGR7LQQrhWjyQSx0oijRHo28ISMs701eY7Ptd4lLmsOaKlSiZUgJIZtNMP9Cg\r\nXeMD91/FJvFZ6kkk/vNd+t7ETCEAQydiDy2rtCHqVpIh3Rd5ieoTZJCyL7nI\r\nRIZPGvu4a6TkTYXMrrSHjQo33kd4KE/rXFrOksIq70mogIu1HjQp/eRqbEZ9\r\n8nJu0tk9mgiX2ORLr2iN8kPGUXInFjkiiKU0bdi8uLobWAk2e2FsVAvY3aB3\r\nOsMO5r5LE5o92YlYKMbOFdsDhrvdo/5By3gPUlWs4X6Cd2lgduofzF9nPcrv\r\nIflME4sZp/lnmQy4Avym1eCzyDsSv5DzFLEJhrcI9TQDLGlIR9rYP/o//4zl\r\nZBsbc5+UxfZDbkmKbANi7vqpyXu3V9Yn6Nk=\r\n=XfJ8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9af09b967.0_1667845715003_0.5567924925959404","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1f4a1129f169e9feaa9b224004a9a6016c397149","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0f54fbb93.0.tgz","fileCount":54,"integrity":"sha512-kRzvTC4bRJ2S7MjOGG2gFGEGzOdW6qlowO40OfL2m+eL727lHupj1e2i1bh22xkZ4N+lrRjeMOembtFigIViGg==","signatures":[{"sig":"MEQCICRLiX9HGmeOiGtfBtCVIOBYugDyqDeZHIUEzDAkJnhxAiAszgY6BSDIxaY+NVET2cmAK3sr9TiW0ZsVOtzCm5nqpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatC5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo45g//WhuTudAqxcAxy5fSZob95tjoC+ED7/raQvbo0+HEaB2gBFfa\r\nEmJDR+ERvRKgs7zebX6ZsqOumGZ9ADNX2iZgJweZXyOYKj3+91VM0gekN2Y+\r\nR22TX4mhRDRhTMuTfzbaaS7vlRKaweKOnSP1J5JgvWHnlriOeNWsPqPYstDF\r\ni56iErf9SW7MdBSqjm+aTDlXhH4Aoie2i2e77LQOVv1JJT+ed705wbIJT8rz\r\nj4JI0u60fEB3bWfeAjy48tGk456LXc+9VEeMIeEsP+T3mpE1bwZhz/sgQrft\r\nHDVNkaai/zZQelc8aAcpQKF0dynAJwS0Y7VEeqMKpLQf2Zc3JoC0sRMNtUrp\r\nv++SpnbTvKFGu3+rm8afCxAjpd0VY4MZxQX0Rnh04tP2WF/uEoqkIHbZzZdg\r\n3fnFysIXrPt+jJTQ3u8QuBbxdH1gYyEMDkyXb/oe+kT4F7g15kZmNbGQB8Sa\r\nw4MOlUK4s/6fKOnsJsQaMEGrCYDs2hGArIfWnOrziAwLJvCE56bFKevHGbwZ\r\n9nzixbiKVXDDTpzNBlUkYIRIeyMEuTNdjq8822ISSFBsnUNwjaQ9LT7uAZ9j\r\n24IJa3jaJ2kCwDmwlTJtuCux/UWJs7OrIZfL8HPbVugz3gPzJtNuWHMA+x2H\r\nskgYlaSODBrmNOlSKtfxOa0+/L5iBwRXlaY=\r\n=Vdsg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0f54fbb93.0_1667944633492_0.5415940033309519","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6c6cd993424eb46dad5d251668d24f1f99132810","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":54,"integrity":"sha512-KjlBhmhKiYlw+SgwBPkJqXUr1aS4EtX/JVmpcivw3U8IkamqRsHn0XEd3uyw9aSbdNsCTVEqKOxIhp4oahmZ0g==","signatures":[{"sig":"MEUCIEcUwcpuOVDmvJ4W9sTHlTXi7xYWDMd6bxP9/x2AeamhAiEAxA+nciydu43lYTfnbIddxALNaouKiEGr9s1rbJfEdhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQag//TDnM0YZp8Ge0ewl7adKHCGcXKpAhc4NgXLatP/sJxsjkrUV5\r\nhnkttb7wm5APofWXeoChp2pmWI/4OG5cmAdbtGWgeLVtH7VNwnKIt05Owey+\r\nCZTy59QBYAnIxgx0HQLps7TGNM7RMMmSU7P9eDrrwwarue4dqNQXLYO/ZhFT\r\nePK8kVTjVgi7nUpcHbs3jVIA9/0x0hFKiSi06A4WDHYZq86gyw6qZCtqBxtH\r\nwNaBBktT9DYp/NmS/2TyryPvYZiGl0NYEhLvGTQk0kg+RTEgNDSoP0l82mhh\r\nlEGXng49LNvC/GzMxrWp6lDJi3LkepxNjHTe4BGYwQzu3ldqrmlCrQBVjsx0\r\nk3uo++FA0G/Q9zEvGwdi9v4jRUfzh8nrsolM5JjbR/jMAjoSLMIUjKuxJkpk\r\nRQseahzk6i1S+8d7IVwILu1h2UyUKBp0k2rn1mrFLiJVKGSIhfHP1tXS3tTq\r\nL20yCaloZmmgFKovKG3r1lqXT67CJhM3NjV8MGblsb9AVnC6LUAEOgJHV8sC\r\nyW8s2e7BYwm/pG+zjFIzPyYMwkSUrq6XOXST/hZQGZJ9j2krYaVSNN1bvrAO\r\nEPFURXaOASFQ6BSOJldlLxU9fiwxntRjeiouatF26CcM1jj8qKBhEH+xoaWU\r\n7RYcu2VivuL66R5qUGl6clSdZ931Hwzsg5M=\r\n=tUOA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a8d47f9fe.0_1667967519940_0.7298702926175651","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5bacf3cf0dae157f8036d6dea05ae85ea9ca7811","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.66a1e75e6.0.tgz","fileCount":54,"integrity":"sha512-zd5UHwE6SudN2NuLnEQZrKvLF/u6/K6SVghCMKdVGGEfKKjzOA+IB4IDDoAKeAqTPKMN8ZZtWIIgyBNItv8TEQ==","signatures":[{"sig":"MEQCIA+VskOxkiKLBBK9b/WNTB9CRi0NCufYRu/cEUYz06dMAiApgKar467b1C+mJlz84FFQVCuHGlusI/5e1ckerOVXfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIgQ//TE6GyLwcz9VFJQKRcyugTRUjnGdx0j9/Snm3pj2r8GudDYMa\r\nzQIEVqFyzEi3oJ1K2Gl4T8pBIKTJGlCbVs653QnnB8t+JqiXnkSLqQyBC6OM\r\necXO6oHM6aPL/mNgevzjTgKkt2uxMBIl7cE2beUUakusDwUwxlIiYq02k71N\r\n1wcIatbBKxGDKb1MxKCZbcHzsWoN8esA2CEXLYuahMh5Cjqxxs6KTVsFQ1IL\r\nea21L4au10KIbJORwLNDCzAo4lTkeea9vVWQNrz0VvUMd6yVgfzlyGFfOXnu\r\nkB9DLKeuztJvo42CT3Q3VxXde+EVyXOoSRh8WYwu0MmIbIatktCt1hTBcm/Q\r\nfSAIXlPaPO9vK28ELq0u0iVKPH757O3tBIrcpOSIks78l5vE7906hK57wSsR\r\n9lkCUMr446QOk5XD18+w2ntoEt+sKhNme4/Kw6GQesf8jxmo+/UM3dvccxfw\r\n2Cmsxg/6xJcYv2hytTKUxdg77IxGZ6cD1tGH9SqDFfoi4u9X2b7894VMpfyt\r\nNQ4/94NnTz5QtN88zBOsnIQxrAgyKs1GH6JfhyK0j89B/hf3iXfY9wNjq9jZ\r\nKsyxtaT0HY4i8JVN0IXMCcnBeyoBx07+T9Dj0Kgnreo5Zx7R2VLtOzCEC9A3\r\nT8//L6opjn6eUfOsT3qHUgVtdAIJfyMiyao=\r\n=zs70\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.66a1e75e6.0_1667986573094_0.43738452381168713","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"598d22272a2cb5450615d0c9a50a179dad7399af","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":54,"integrity":"sha512-xfgdSfvlLUXs1snK4hBh9hp48/ksc6wvYItVNufBD24d2oYaTVF3jaS85lKIhqZMyoWCfoY7ICnSvaWxcvWzUQ==","signatures":[{"sig":"MEUCIHyf5g2WUw8TGh2y5QxI3ewUb1VRbYk9YROVy6cowVNUAiEAy5K8g2qGNUWxKd52Ru26WsmOIdjyTmZ3jYEicUSmLUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWyRAAoowCeNdKCFKGMG/DMMyJCsjz6PqvzaEpDr8dQ6htH/2bzDRu\r\n+/iTAYRlZieYiSY1PnDE81O4hYSkMQpLf6VXCNdQyAmUCr0ufHywcHs3oXw0\r\n8ll5i179UU1AwKI+DtWuIwdX9ER1MXu0BRETPdDQeEybrjRa5LC9VI4EkxfI\r\nhcivtXU+VWS+4m6iain1PRaMOez9M2HnU81erhkzBUnCVln6MHYbhWzJmG/9\r\nx5a0vpijAjJWqi+NRLd8KJt4Z85MWAjDndh1qF2+4E0FOX+XANC6LxMZU/mB\r\nMWuXe88N6FSnleIplKNk/HCR0JT2s+d/T9tX8bPFFCfGPt/r5x/MRyMqtu/s\r\nAWGkG7Xf8G5w022cmub1wlgnZKhvUVITgEfdeub6WUoeT79m2bfH1VskEica\r\nMpCf4Sl9GVuLZR3EwDBbd9XCZTaRCw5oUdnqsTM2dab0lOqyqxKO0Nc7IiSF\r\nuQLyKjBxbnL8uz1edvyGSzBERJuTFNcYajO+tO0z3iKezPVLKE33X4rJQ/cL\r\nQKzItr7tASysuzGga6BIalS5R/S5Ie/w2g5ySZEC/KnH05fJzQSWlP3qAF+9\r\n/zoTtvhHO5Ln+tDVeDPO5zHNJCpe/uEBheJcSFFdnhwKeR6t+Onsw+9vzbpi\r\nEWdxfTo9BdEIA8V3fJYK2bl0KeuOFAYSbvE=\r\n=MmHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5e5c2afc0.0_1667994836233_0.43903608136948713","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6507c6606400d3c2cce6c7a2840204b7ad257d8f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3e3f43359.0.tgz","fileCount":54,"integrity":"sha512-B1hULzhrfLH7zHKyIk/V+Jp1DQY5FnQwsEByMEfEKIVvXjKz7JANiqspYLj0gUJESLTMdtBsIe1KE6iDGsu3Aw==","signatures":[{"sig":"MEYCIQDzfqlHly3t/3zeuaTZPGuKSErw+HP1O7FJ8Ck8mb50/gIhAP24o0TW/dXCgpMLvEjJIsL2wb5H7uoTANERgxsAUfPu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAeUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJPhAAmXkIz0lFqd94iUndocAfZop3LUgrf0F57NjxQ2ye8w23rNyt\r\nggMzWA7jSunRbPTa/y5Fd+Vz5s4U/zs9nZunbjddq74Hmqw96yZ+EGeuHBQk\r\nSwaYa4Q3xetAP3Oo27vKvUmcTJ+OGwAJxW1/n8FVxNg5uR94X+YhmET8RlYs\r\nYRiYjP+Gf9+ecMk3cCGIU0l2K6bUVxtNHXO1RI9kvcR1U8r0S+MHt7bT1B24\r\nyQFr6QGqzXfJpS+VpLX1dG4EHh+5yr83DG7f135Ur3bUHMP8Z0eJoqaRoWN1\r\nZUs8MY3h0TUEZh2EjyZH8X0IKdAJelJexpDJRm3brweIq44yaQK/HJubijFa\r\nH0PhsV2q7lvvHRlV6soan/pLBnfhERztxRnXUSRoSL79t8VDu9KIxMphCScK\r\nvvSGoFO+wfshNf4VzFIgeE7IjvZuEHAxY+pZhf1ShgIlkhkBdXfI0tE9AWhZ\r\niKqZLecjHrTmsImR+ZXQ0gvDHp7bxiXJWyU7NqURS49jn0+Krxf74MogRp0T\r\nYOQYGyUg/gBJ7/N6Lb/Vo2+r98WWox1R68KDthJwDwwKN3QYiLNxh/5VcAoL\r\nbkvvdsY41JpFzeqCUcxX/A38ip24IxdvLwd/Jch+gWiOsZneBC4lAIvrcFpB\r\nyZgp2qkeCcgErHoq600Iq2vEuistaBhJjGw=\r\n=DX9Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3e3f43359.0_1668024212584_0.7139485143439568","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ed5b9545d2aa2107ad790770b5d472e41e3888a4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3f667fac6.0.tgz","fileCount":54,"integrity":"sha512-WAWsATi2es21Nk9p/OYXPW3Fnlz/lGyw9EXXV3Tuczqj6yW0pLBQFkn4dB830Se0duyxy1CKzbQJ55/oSWas7w==","signatures":[{"sig":"MEUCIDjeQH5QQnSEzqBSfCp2T7e0zaTMi3l9U2RmgjoUlzTQAiEA5QpYSH3kkUjcts3ssWQ2INDRjYDw6ECkt8sfPwgI1I4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCR4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmriyg//b8UGrkrzQC3WAxL1U0ItxwetmiYN3HMxM5NTOPIXaCZLa4GY\r\n9GyaGrmckmneHUqcn7Yem/t5N4j0dP1cNIqcZMmgVYCApnkvd1GUfGPc/Yz2\r\nACETP8tdse+iqt8R3RUWLh5rj7RWvXBG41cu+2P1MWi26R9lp6o3rXlpuhBP\r\npL7kgclzPUQtsSJiKDCxQY87032Du5txxQk71QtvtufJLIEnGWGxnsgBt9gb\r\nNJN+hPMt4sVT9jByw27+reNhNBR4eTa+wV9SGL3VcvnhwplW2hgdzlxLm5a0\r\n6/f/Wh/kQLRbtBNoeJ9G2v7TKaEiaOwtH3N7hvMi7jL+NFA9NHQWVGnVmF70\r\no2NVBuk6vy6rH+vgRB2bcNqPXTflVCmouoQiYFi/4p5RJ9r7Tftq7FLDTj6k\r\nLyexonDvUiAfAjcPbGaWlhLTh+qpL2+UBixBDGxm7naF79u30IWblcMKC6JC\r\ndmxGJdel+d3l4QWCqmrMCC96b2mtgi/osnT3vw3Wr65cS+NYaUxhJgd4oPfH\r\nZg8XoBNv95IWa/R5rBFS7alnYu+6eJMaM+Nh+zmX59x+5o8R/3hBRSP8vmh/\r\nqAQ2BxbzBI9TGdSwR/g+DwWdX8/gUHVsaA/Dq7MbBwDbPjjjkTXH75ZPOdTQ\r\ncN/JC20vXApXu9jKa5S5ZNT/QujhFpPZkt8=\r\n=+S2i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3f667fac6.0_1668031608224_0.3165846778168149","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dc96e03ecd9dcb11f477b58149e17eeda3d1306c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.faa28c1c5.0.tgz","fileCount":54,"integrity":"sha512-ARDQFFuf3QFyJ+LTRX79k7w155Ntv8OXU3CKJuv91vp5iKfIXtoycI0XZPEBRScaCDSD/YRatCormcyT4cKVXA==","signatures":[{"sig":"MEYCIQCjWLY2bU9+KOCeBi8oxX6jSP0BlBiSrNoDVtm4hk/gxgIhAJxL4gY9Qh/t45FC9h1aCLFROJw+sOoaPXnDbaSXSnle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqTRAAgGvbUCzhqV6a1VbVEy558H7skv6XdjrNyi/N6eH8uJCDvQ0b\r\nXUHjlOds2U0uwNDbczkxl4WnYxKRAEmCowuczLgwGRX3mtsKjD4REowjxj0F\r\nr1+IcJtD42PNAyx3x4TmmrCA5D7wOt7cy9e7+uX88V9A3nma+pQSW/LH+qYJ\r\n2wstRxHSCR9iKlEayX0wgfGbmMkW9S7VhlLACP3cApUOqr06Vh5BV7/tV60O\r\nutHIHKj109xo33Q7DswKYPb+5dgjq20dDZOU82TTadV5gJBfLhAggu6aw8Gx\r\nvOSfcMvzAgZJ0HOj60SPOktf9Ndeoa63tKmbCNwb2KcaNk4dkHvwhDK+0/RJ\r\n/ryRV59J1O3JkXyBkl3KCYDIJ0AEkxrE2IGmEJcdv84leOUcXWB+koE8us2u\r\nYHp6tzkvzJgKX6s8bBH4X/2f2M/f2AHGiiO+YO5xZnGBp0Rfgaw2+LLK0tsG\r\nuLPdOh8ZEQkOrBAx+TO0MsPMm/j7PxH/P+me+4JcKW57GN3Zdy1y6M1+9ajy\r\nlUL0EjerBrzlYkTo1xNq481Yn9Xfbl6ODhHKItf4SFrM44epGt2poQ6zM5Sc\r\nPXhJlaSz4YWex8BQXOGwJmb9Z5bTyqiRbiEvbtC/A9xGTlIrBMjsMh8s25is\r\nET9GmJb8LphFAnjQY7dPY77qwnClJXWKL+E=\r\n=sqKg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.faa28c1c5.0_1668184591094_0.39724173561095255","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"82cc8aeb28f1a584178b33acb9491418be566c9f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a868c7866.0.tgz","fileCount":54,"integrity":"sha512-Q1EQJt1T85y3NDmTqbxHyWl4AieDgZfAYe4HieVh8nOW5dCZs2sSLf++6gZ0RM5+oMy0SJBP/rndrMYxmBIEXg==","signatures":[{"sig":"MEQCIHAoILQemWD3PN65XjUxXS56hBIuvuLGn8XhBJvAZbWtAiBw1A6JHxqoXYnNjQ4qDyma1PrXEKTta9+Jk1+WZUaAsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbno3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH+g/+LDbm924BMLd7okIKNl8ZJO6W7HcvepZmV4vb3i6IiS560EHR\r\nglzUoLt6vwKOWS/X+qzLwaasJgRxgSt50GLaaAwoXhQoV8B/Ggml/LuSAZCG\r\nh4UP0piTwrAkoYrjmuuIl/Z5A0IrqQCQkrRc0rC84GVdKzoCFWZDVNcT8lqJ\r\nxxicImSFJE2nKIui/7FjBOkLP6P7leXo+burPBqxT8dAjWo8L3L4AlX0INrt\r\nA4Qde2A6fx30PNlybC5Y/Ib9V5BVmgY3IcZFqijYPXmj42uMrvUESWS/4U/s\r\nXQ3S+NOSU+KXLmZwwNdR/V1QqI7/aE13tOTRxZfWDQRWWQnIl4ClT/15EWza\r\nO2AiydqarDUh88Ie6tUnDZL7QN9CDSFAyL2cDxCz/o7ogupSDhC24aNTDmwD\r\n5uUaN4FMQOJ+COG0OzH3srWfg1v2mb6zqa/KaH8giXwMqmSZQvouucut7C2W\r\nSxwIDgM+KWF7+AwMdA7ETRYXbtczDffmjCks/52AfoKKGVA+lE8SPu5MRYM5\r\nyiwMnaHHU92iL2oYj46Z60LDUkUzBGdAT5gR7ETubMGUfaRe9aCFRrO/4khm\r\nuhEkwYU+I6nEhqCMwApl8SLHqZAfMgVF12TXeKIzQmUFF0aV6oO/VPel3Lc+\r\nkRcSmYlyO+X6RkdfVJ+GbaAIMlDBf+LFQTk=\r\n=qQ7b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a868c7866.0_1668184631263_0.466002550897592","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/segmented-button","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5cdad017373920d098a9f454ce664d60ba3e6bb0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.602fe8efa.0.tgz","fileCount":54,"integrity":"sha512-jIir5HTyTtWVboWqwgNIUZmLAOHJ9/AWeg/4Vn8G5sWoDA/ExeRZco/K56JYo00pw/E77ctpBtqgQlGewsm8Yg==","signatures":[{"sig":"MEUCIFXKbnlyTlUUxNEzOFG64PSrBbYCHPfLa0+KtSUCj9M/AiEAqPJrdC66p1/RpiJVMybp/KxJQwcLb7JF+QPyyHHEeOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboKAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIsRAAiTzZZFo1d1vf/8O7mCLfilLxwjLVLGeJ7se5mqMvGomgwvAP\r\nxJJhdZprMC7NSogf5eiS07pz6/GEvAjyTuVZaMNGuSXHNjmlburBJtYlH8ri\r\n+Zy1ci5TW6PfoO5sSe8X1QYX+qxnax4/tYLywcTBNE0so0lrh85Aogis2evd\r\nOXld+47J9QP4Evpf4RfeK5Jaa2TiIdstxuJ+ccuBSiBcrdj76lwV3BRw8E3D\r\n2Fs2FFpE3rCQW5pu7+a3y1BO9Dmv0PYMZaqAhkYQWT70q3bB+QcwI9+JvKoc\r\nXDzPOCsQEvvisjpR17ZTG5HJBz3g8pxWQ1KdD5xZdM76ygokjF0M5QfOYS3o\r\n5E+fRYZJVFPcUdFtqHvwRR4x7M1WA4qQoobQdx74HNXZvZLSIYVYsQw1XBEB\r\nO2CDbelB4klKhp8hLOFSi+RNCVjPs5l708XZmNvPEqjU/EOTLMka6ALsOmW3\r\naUhKk5QaTuAECVTKnMzTdsBTL1/Ec6pGjWMnJuCLXZxlgM0U1qBMB5R5eXDz\r\n6eqaY7e60/LbTpQnAsxPVNRBeCWo+yA2u2QiCdlXgfKeECFilzw9p2xs9WTJ\r\nvGtBZPD6OG63ndfajTNuAvbGslgtWvDAJzU8I7uj25vKloTmMVXqg5LKG0dW\r\nxFZh947Czo4hrijGBVgIQ/dN/JBl4+XQ79c=\r\n=o7Qm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/touch-target":"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/segmented-button_15.0.0-canary.602fe8efa.0_1668186752054_0.11301517406864092","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/segmented-button","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da1b3d984d68e680d6a56f689cbe2ba4498e9123","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.558c2be62.0.tgz","fileCount":54,"integrity":"sha512-yjEYbgtRTJqRdcsLc1UedIhYkJMg1hHowpKfGwRVpRZr6jufUK4ENOvyNVZj09YLRxfNOrT5AlwIBiRl3m3gzQ==","signatures":[{"sig":"MEYCIQDv02sgvDbbKkDV1UliIFBLiMpqp4N/ES5q+ZMjOT6SHwIhAJiMBF8nyiw7osh6G6jzqaYtfTrMI/aVGaYg2rC/UcJZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOcg//dmmBWAMCyA31tzr8VuTFhXlRgQx0cB3LrwdCEThEMrh0l/L4\r\n6pKeyrK5HHWi/IcDZF57FvufuHtQM5GgPRFCEQ51P6c7TbkKC6HAQ9bIkbOz\r\n+3HQLreEEWMWPshMxGG90wVAhPnh/YI7+9YoKdeH4TwT0ZJHCcsE/MsL1gIM\r\nZew5ZwJEK55dmjjqULnlRBALzMsE/iYz6kcxdC2YPRwfTkMVNXMP/Wn0QjoH\r\nk2MHEdSHNFvRFKdUdJPC17HRndaz36ac0WqWgoecAoJT3qs5+j40m+5hxogO\r\nOv2bcOfQ16o1L3pgrLU6xWvPZ2cvqpHv//9BYC+/667K9J7Jv2KfC0/ZHvYd\r\nDZB8gr0/l1P6A5SGF6KH5Pt2v7h9zC+gdHFmhOrysFtP9i/X2ZTwzy2tmSVc\r\n7Qph/WyM2fE0g76v6qdYTEh2Esu2ZsRT1DCBazUuJDe7gr0/guG3wO5hMUJD\r\nRPJbT6PbNlLnjMO7V4mPE21sIz2+ZcxcDNebs+3z6ATc6kB4rfXexTB1jfAn\r\n6GrpBQ9Qis0B1AZ6XxuRvEbWxI9Vwj/vv4lF319P2LAzi0D+OEikCeUYmNd4\r\nuxMO+hzzFlHnjsegA/PFKLM/RSKSHUEAmt3CAHXJtQO2tpIK1tp1V4B9+Dqh\r\n7z1JqKBWnQahDmHEHJNYlN0acuxWE9fKUic=\r\n=OIHC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/touch-target":"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/segmented-button_15.0.0-canary.558c2be62.0_1668206755705_0.4318169314406408","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"16a39b319471d7c4f2d42406a6c1b7ee9ececc70","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":54,"integrity":"sha512-l2eRZ1szJgZyv7mzm2AVI4WfXN5BnozzCE5YOcsq8rTURA24MgwhPjmgGKxgejMZDhOvOiG0Vqu9c7By5cR4Tw==","signatures":[{"sig":"MEQCIGncrvAc7+z/YkaOUJ/cmip42JROfW2W2aVtEmqybHzDAiBOI4NIy1M7WO3SmLoHwBOcA1HlKE5sh6b5IUcR51+1kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq81g/+OWv4rZF7/vBpZfzbIiGE2sffgtVAFbnsMbbLXtMYv47whtaB\r\nw/wHvJa4ulA/Pl04r9ieFE/gk2pdQRlIsZwLoXF1r8Rvzym/u3ooDKZnv7mN\r\nqEeErQwdarLXMS45iKaCzsl63lo7sQ1yZLc8buQRcbBUtRxvNa79q1MBqi4I\r\n+4jDf0AXEM+cAx3CzTBqavYeYBYMG22z58e9nSgFHbUMfA0z9azxMOLmrqQW\r\nj2FCmjGU4zGLfumlT/TUY8oEe+iwby3YJCD7LoEOLa4GqK1j9N58jwe9iw+E\r\nHCILU1SfuKkrKAtCwKkYdF+TUb7dq4rJEwWFEUZnZx6jZ0Uu0W4gbrmcNQem\r\nNbDLn2O5ZopqJpbcZvIaY1KUckpGPI/yJ5VuagS/c5qQi+fOpvVnz4h8owQ0\r\npx9+olmQ4GF8bZmRCtHwO6O8/ESbmAXbxnSbuvGI0hjfcZr+BocX/h11S1tf\r\nrCJHNRtcYQ5ESIiE54clJGEX+B3kzE6E9mYtSZD1YlUhBX3OrLJ3GvyXCoF3\r\nH1N9UYtfy2CjR9fDa6AlrzE++aEsUPvg1t+uK10dY7C9FHaH2vo0Jsf1Bt/D\r\n2kK/1OEWB9yc9img2AIHR05El37Aw88ExjM5+KIA8g827CflccF2AS8PihSk\r\nPAVl18eaAh4yfgEnQ8tXmv9O4QuaoXydBLQ=\r\n=FMf4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b5c13a7a8.0_1668441555702_0.24280614976520543","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"04b2de4153d87ad988c5bad811e9ac3882c6c24d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a6e1c0702.0.tgz","fileCount":54,"integrity":"sha512-22OJOBoxTg6/zbztWlXQ14OLTmylaY/Cfgqpr11AvWafYeRCae56fyy9YqqzcTizj4qT+v2tmkwPEp2QN+sjXg==","signatures":[{"sig":"MEQCICVQcq5Rqhehn7u9jSdAlW8W1vKFAWTw1IL+iXnPqwHcAiAGBRk3sErBIXvJnMEry9ROYGsQ+1vRTMaxXCdhPl0TAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnqOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU5Q//cdJYJgPw6IbcPEOy5+zFn2W2zghk+DRCKkaN1si9JJnlB1Bg\r\nl82FDCZVls/XZ5Spmeh37GFhBExrAMIClbZRZLDWr4nShmGjtum8XwsHIWmn\r\nx3c0cCl3UCL+WId1Ds+Irg5mvxxlk93emKtUiVEGFCf3DaqwSQLPKSu8Ii2k\r\nlgNp78QW5Jy6Fgkj6zgn4Ie2NqdfJ1n7v1eI4HeMqKsCxKoQqewYqPLlo9Hd\r\nmOlIN8gEaGTqTpx2MjYhA0etq+S6sZLP07Ulc6NCKT+Zw6HGENR9962ZQ0Eo\r\nLZPZ1oo/ErbZreTcNac0o2Ekx1irB5DAuc3fHbPP93zrUt1jsns389zUXX6W\r\nGmwm2YrFLByC8jp4+mW3O3MJogwG9+FvHmMh/O9QB/qLE+EDcCXNtZzP6hKt\r\n+ndw/szlHZSoMF2CTb33P4Kw6Fg7BZ1TmhNPxSZnKcSBYtYZZ/9cgLmKvtMj\r\np5DoDEZPgK6it3ckHQw2g2/qgAb+nm8BIodtckAKpFpTkcuz1LNBAp045Ah8\r\nrENkHBM+vwJ1ElZWu/k33VhDr034uKGxMZNok2Ykla7ccBlICOE9BSHmqZ49\r\ny8y/2XvJcE0RDTiH6c+SsQI8kMcwkimgx4KM23H7DmclTDN8wBN+IcQ/A2Pf\r\n00iVOlOrOVCS34n9bTvis7K7hbfrZC3APdc=\r\n=uija\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a6e1c0702.0_1668446862430_0.9565530832197895","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d6f4111b9b26e83ee66305acf928a678f29c5a22","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b6f8a06de.0.tgz","fileCount":54,"integrity":"sha512-lN+cCKc79XhQMBXUGLDTNGajvueURSXIzTkpe2r4oXPkfEB5OH+8Q7tI7JfLPZ6zLXsclGyXQyR1hCcWGdDigQ==","signatures":[{"sig":"MEYCIQDSuHrYYJDoJIXgD30H6qg/RyfxrZKaByotRRgOwfxnnQIhALxxvNjk27j5XEGitC+9g88r8+qq13Z+nNgfjNq9rCN1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqLg/7B+RiOFdmRx80QLtMd2n1rDRVxyhvXmnzhfhA3gW8P9mvbYWo\r\nQ7IhXxfbmls4s/dxd6gAGLe+l807zDMYHwlCULcGGEkysysCm1IRWW9cjd1v\r\n1tOUkCZM8cK46J/TDk0d6o6MqNJwj4h9rbyV2jnvtEsYf495hMRDBQ8AVdJJ\r\nfd4luCt1hqXRB7snQa1VNGcvgIzN/mrbitwGX/x1jzMk3xIcdQYAqex/JmiF\r\n2TRLFc59uHBPuOGmSk4UDKuAXpwEVmzxJiDNhQLzvbL671BMEF5zds+KBs7g\r\njJgxH4xp15S2xxfwK8TQQr9Xcx6scWcr9/jkvaeo0V5fH6k65cQiggG8byTV\r\nfT/COOY4kVz5gxXT1hAHeSf4jEu0Sa24usbPQPeyDEmb8MtkBbdJ/bnVI+CZ\r\nOmmDvuwAy7Wq0PfKepwr1Tqo1cqy9c/HgK94IOg9/jm2HhOMkL11wnz3VSoo\r\nVcdcM9HIPc1IAf51/jwyrpqAzA5C2X7RBxHLhLq9KjUy7pHqieCYYVAUN5MR\r\nmG3aoRk+J84SFqFKyEWDg2v+FgBW5FqACeM+f0P1Ayw4fD7c2Wcgq/MSRu6+\r\ndtkJ9cEaCLIbDYUHBn0ZAF/JpO3exAgP+eZG2cbT6MBmiyjp7vruJgxauDT1\r\nRvQ7no2doCQlYc/nm8x8IAZKkfc9K/Jsc0Q=\r\n=LeUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b6f8a06de.0_1668504548104_0.37553549062848823","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c205af6958e6ad2e8f284ee9c265a6a5cdd359f9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0163f3ba5.0.tgz","fileCount":54,"integrity":"sha512-7zukzYMs9SYjiXtNkWXhkweiXsQceKvMWQsDxBNDh8suZvw3dtxh1J95KGtyJNZniZGg59Fae60Wzo9Y9hzFFg==","signatures":[{"sig":"MEYCIQC962f17aj6P/qdfRim8jTo5JBuO5cw/5BQeG7BPfsydwIhAJKCU+mVD4ACrNKOWrBiRgGqGnZ7q9bj0To7hhmF+neL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9RKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVjQ/8Cw6pN/avxSW1gwWpNwrqu14RYGFOqnNFSbJUrHpOaY/Ti2Hy\r\nP1aH3HOVB9/uj9NOBJB0M0fqgs4LWWo+eelLgWkLoLvXivjcFQY7uVAyqk8e\r\nQrjTu1fwyVD+xkp9zfub4bkHLd3irxBuXWhXlfEBr6Ozk6TPWMLsaiSDlP/E\r\n6fwLWhBrhRNsSNf+qFlLybp3xlyN+pagI3cFDUBUsDld44Armi7i/D+vVA3g\r\nSzIHs8f0N5Pl/KrRBizhCBsPnrdhRgLOmBzY1UDLdP0UhJpfpV6eXECvX93z\r\nYV57oNkaitTHcVKsZlj4+tSyJ97EdES2Y1rS/8nlbtdZKYTJKyO7IeBO6mPc\r\n8FVJQa83Myr91xf6P2IyhKABtmnL5/BfVzdQttdSnAIyrLd3/g4svZBQb2CV\r\n0EaRPZTBOCmlCaduWWJJAWnlbMKlvfbLy+2L8aatozYqZTFtCTJUrdp60PfO\r\nUTMeFAd/mIGEuZx/TdOsorKXp1I0uqYQJbLp9nkX5uDXKuwv8JvC+jlJ8JOG\r\n156uuyUysDWoHFa5ieTno80gMZAmDY87RsmVnxVW8HxwvZzpefCx49XxJyW1\r\nziydzZp4pM8m08n7WNTLOdQ5SDrXb/Oh/dX6pZp8DFnArKbtWu9yY37/FTHV\r\nYebWSOFtNRof9AgfKeCuCucRUru22Amch10=\r\n=Rw8w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0163f3ba5.0_1668535369948_0.22991942340571447","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/segmented-button","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d1bde51517b1d972651a0c316eba068974fa1968","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.66c5cbb94.0.tgz","fileCount":54,"integrity":"sha512-o7vgVdL9UuyuKtcj4G0grtIpSZxbAfz559YR87iZphtcDgXyFaiql+6M9ufs96+2PI7bVXb94zQvVP4ip3EyNg==","signatures":[{"sig":"MEUCIGZjSj3p0w1I3ytEjJfKzrAizNoC2rxazTCKLUfQtebvAiEApHLFEA40LBY9uOdIiill32eDFkRuJSsfHailPkBte1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwBxAAnz1UPAjfISEo1+jeZaTAAoIGcj97g0eHggLoUZH3qhl69nQn\r\nL0eykYF4dxPJowpySP+NikW3tswxeJM0I4/B6mp4fnsUkE0MTeVES8tlLocC\r\nIHV6ocjbOUrFCWSH6Ql1/D3YeosMo2HB+ES5SKU0lbDfZI7LfyR1otWkGSPA\r\nkFa21gphGGl4IJJqurfPQJ257ylMIuZ8LtM8lu/DclOY8Si0m/YpdvNNGCRP\r\n221pGeNnW2gYaZ3zcSxQw72gimQlucUJTnal03x2e95ftEYmrIQ3UvcC1r3N\r\nixOkddri3abAzhe6A5ETCtUEINBhm9qfdQlN3Y3+k+DBWcbxtSgDpFpIiclg\r\nbsII89rKQL+fPXZsO9CB5J9eXamuUy3rTu8ObfIVNqt5eTrkB4B0qRlRyoOJ\r\nBlkcayuy48YMoFyKcvhjQIDQPtqUW2JvFl9dDvUtJmL+K0s6qPUnWJ6sTtO2\r\nbq2rif1/0Z0XHAI/SFteXlMYO5xdwKrdUNJ/KGzKxDXbwJsqeN9Lk96bFPzb\r\nH/BN6mWZew1lgrqIHLUtm4FrUntyLW1BF6dxd0LjeCsN8G+W87Rjf2QGd4yX\r\nMXt+Ut/5eSAbMpNjqwk9TCpduiT18KArF7zEKY59q4gmTwor5IMaGlrH+nP+\r\nr7/J16acNCzCC9DzZqkfolk2VJU5CmYEj/s=\r\n=sgEq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/touch-target":"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/segmented-button_15.0.0-canary.66c5cbb94.0_1668540653700_0.30052551318188514","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"030116949a0817fab2519c1f00a2062ce7b36591","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b01136063.0.tgz","fileCount":54,"integrity":"sha512-yKn/MA7Q96zrH7n7gxSQ86ut75uj6tfWlLFyXEQXsaO2JoZhoMHoD8DcTTTWzSV5ZQavMGLoxQ7QuVaMU56Vaw==","signatures":[{"sig":"MEUCIQCwVUjzK7w2RP0SaKDwGRFS2EUsEEbXS7+SazBiU0W2CAIgVyydUJE1chkYqjsYQjny7wpGsMyYTyBbtfA1403Zk/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCviACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/yQ//fcXhklIKLuKwOa+T7ywg5Up2qtN5uMw0B4oZRVIYe9R8QXJu\r\nl2JwANfYkfNzkKe3sQ89ZPda2cTn7BIARNG9sAOePtjoNo/m70QdKmeiDdSV\r\na4gM5xGvqq1WkwHoJT0rZ/eqG5DrRe7XGpMxHC3NGKmcYPo3yXZvJZNMmcVj\r\nRdF11SA2uIfgipC/zU3vSaj3UrfCnTq/vUCteXbflFkVJhw9N30WATdkf4RH\r\nsDQuIQpwDCL/rBolOaNne8/U9+aBvZyxI97MoAGfQ4q1mdvAqYN+a1tCA2f9\r\nBv0awe0IJkO/DYXfw9pXNLn+dr2nNqUc+KAKpXk33MCnARom39ln+elibriN\r\ntHEI6AVYA/3AxvcT0nUHIQLBx8Z2u/IOdMCIj2Cfa/E89sMHSOxyqAw2bYQq\r\n1DzDUEZcOKLtSXezRvCJE7Mh+c4QDeykKAzWmVWBWK+hLYDiB51ms8Ndhg59\r\n8B1Yk4tWh77ZCeE40T7hUKa2coM6nHSjZxQieQonuOtBkWDBsv4cMHoSO283\r\ndj70YiiNks+MxlJbNhB13LOwlHRvl31M13L+4StrmEOf3UVe3Q4SOSqSjqWq\r\n6s8Y8JpooFxbWT92gChDE6tu/8LvX+FW4s4sw3IODQboHuQvoewUnAH7Unk+\r\n7vZZppraq/g51G+p+R5KK7+RMwP7VZHbEA8=\r\n=p89o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b01136063.0_1668557793965_0.9207300033822603","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e2c66c757689a30adabc451cfee59008371e2cfc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.01da0cabb.0.tgz","fileCount":54,"integrity":"sha512-Il/bO/8GDAuF06+29Ps+1CybIzRRZzMS3v2oCmRbuHMHvDomB1ZgMZ+mIRlsn0nBLT0kw3P/fTo1u81IK3stUg==","signatures":[{"sig":"MEQCIHa0R6HGgDkb0BKu3yfkD6s4hmYqhTOWdnFCRF9PanyRAiBmjNObotU2BeID4N5uQDdl5/zj/Pv9e3//oXyi88Np1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Mg//a3YRi3nOWfKplHuEhHuLTdbVlw5T0TbGtcW69QlDPweuyCVi\r\nkh+iJyTOaQLGc/2LwjaDRDVd6ZqtT/85ZqrB+3sW/A5nqHYKOkGGifLJetNt\r\nKpX4LTr6ZldrUIm722MXKHae9iK+bvP6K0K2FpmRh7H39iePdPcYRC4VTaJW\r\n3+0D3/NJWOy2uVe//OltmJ8oXcCoWoa8RQKiJYumQo3jIjTTKcqxpEE81rHa\r\nP9WBzogacnmM2Bn8PHoGMHiAWpkNdOQ89aXC5q9DrcdoyHtXnrDPfCn2KDq2\r\nKfeX1Fc1tZQ03cQvTEoWAPgKXPc51pKJBIiZcvKi3z7v1U6D/MWTjAw1aCQ8\r\nzjsp7Pt362eI+CTXWvH9Gz9c4UQI9auOkNADfyzbra8NoBDdXWi3cwvIQJba\r\n95Idw2bCOX71BFakklf/LVVc4+Hle/k0TG2tgrM9Z2BnW6/Kt1gHf/Im0IHU\r\nGfGfVHzbeckAV/oBMHHHQJo1lrr7VpeATVz4ljDtSRbQqWYlDN8rLVsGuwAw\r\nh6SgA4RZKN+XdahFP5c7nMvXJVGAU5kIelIKJr2fn5/TdRBBTyFcHmOgEYt+\r\nGrcSvqYCzXFMMQC8r6jddWimfktHaOn3RQmCe+ilCntbzCzfs46UqJrJARq3\r\nmSswHbkTTa8E5ERZkiz34N3kooN4Pa7UaBc=\r\n=muJz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.01da0cabb.0_1668590041754_0.8355259097189538","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20a9b3430632b11681972f1b763b992300ff96ae","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4ac393164.0.tgz","fileCount":54,"integrity":"sha512-jg8PB/ScdR8a0K6dw3KjH5LpfXAojYFDI2pGqgsXuq3zrHtnGKfoNP7UHBBFBS8bqT99/92+CCA6oMLDFo8koQ==","signatures":[{"sig":"MEQCIA587p9nq0BkG8D6cbMGtGTir3S0JCuClbtqNFur7wkvAiAUkTk0IIu9ts5Yz6+AKMrhmtSi6A9zlLVBU/LGfb+SPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF8A/+JKGiTcotuwiO5pvQn0CzhjVNLSskSUm0o4jvjRkqESu4ap9e\r\nVw9bUOAgJyyh9t6wyWIywPzyT6mvl9gnmBg+AFwjoVLc2CIm+vqHaYEt8GLa\r\nDSHFaMOQUubO/4FT2okQVnJ2mVoKcEIXeguiEWuOR3H6W7cvegoCU5iFwrTZ\r\n+ul9VCDsdhccT3uzh6EvQ1l4rcvjmgJHTkMPTZzZsSa5d5FoHKQyopZVBbJb\r\nrdAESA5Rqfdg8V+8ywNJz3SufnEU7EvFfiA1K305OttSjzvTzFcHHVOoeeOp\r\nt94RwKudxYydQLRnySUMkuUujRf8ZKpj+HYXmQZqIaisK9NarHC7WLIdz6Io\r\nEFfgmOalWTgFr+dxdRgSQyvgs46Ya4r5QGajkcfcbyIhqZsFbzCd4GMgDKfQ\r\naQNzoMTIGo+dCx9s++Bwr0dfzeDdvEz/v95tFQhpI2VNC+uIjO2VKfeqQck9\r\nbjbaaXMrBEPCV4C3JvH2xopdZh1VZ2stnKC7u31GPI5BRSpfqR+C769/AlL1\r\nq0DVfdAAtDulCyeD48aNkI7jzUL8atElTwsgY46o98hr+qzF34LTuTsYiWgI\r\nGPMT7tE+Vdkfqhr3HfLbzzhv9uK52lUv2fKkZi2Rz+Dapl2dpe/ipfYbstkS\r\n9qkwTVDHw5yQWCPASmQpiE0eVV1PrZE98ZY=\r\n=YT3o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4ac393164.0_1668615375040_0.016209771712186738","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d68cef1c999b44f3b6a9de1c73fff2b8e21b2c83","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6048fb563.0.tgz","fileCount":54,"integrity":"sha512-rds5jZN8Oek9KEZvwYmFdHc3J2UNn3UngbsDmXoUXbsxZM2i5mZXBY0ND2KECjAXVEwYj+/+GDjfpz1X4EVOUA==","signatures":[{"sig":"MEUCIHnUlXdJ/nxnSa/YMLv1gVEv9KobnrchQa30qm55hlJmAiEA260Mxf1TzAqw+hEXX2vYAQ/ij8BG5R6G2nsBtDCGetY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/pg/+K4sGjjhWppP2vti81Z4ueeJHZR75C6LGggCll+osVGWYIFA3\r\nJs09TSfOMVcxS1INXZBch+CE90t2VBPNx3aOnxa2Lz1jdS2S/hjbzAwI1MB/\r\nFsJzdqc6fs1QIAbcy/xvK5KHQl2z0/3LHPLWKj9SxFaL5PhT4LdevTT7z/Ed\r\nLXySBOdjE+hPi9mCEvj/nDosFtMB3p9qNznY3kMuKkpYA0tcaBdb9YtYE4OX\r\nfg3UuJtcjVoCkj8oFnuLvvpnr+0dWaKVe15W3KRrsmaT24TKBphE6ClwfflP\r\nejN/BQLXO9TpnNlwsQBA9kT7g31CvYeqAmpCugeK9EmyfZGS6n3VKypooMIe\r\nFPPI+jOm7EQLz4+Np03iPKXHP190p76khkjBpwCG6IZfSu1zVF5v3VuUzTqz\r\noNc0Ni6/nXFV3Jve7uBv1SQUY2104sLhZZGqlt7Jhqv0KoB3ySKyCbkSUIGT\r\nXdxX64HcdJBMRC0xK3I3GD7HWW1+ftPZZPcktz2bu0tXHbl15/f4uEGR4+Y4\r\nuy527Qoas041oYLA8n5a+0kd4MR2WNKwBGpsw4ZVhRlRredSx6uTmUWkx6np\r\nkKplXCc458HDT8xQSLiF4xHzZ2CtAGaNprreE7F9GiumHXnPG1n+IWaWx/Dl\r\nBlPqeroLzKEYJYttfNGUDOwz7+ZFtZoY1Ig=\r\n=Szpo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6048fb563.0_1668615496597_0.7956262504010612","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f31352ee2d5caf8235972dbda4a822ae5c675697","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f7f56fff7.0.tgz","fileCount":54,"integrity":"sha512-SXCpyiCIkZPrl2fHcxjl6mCx92OnzR0SPiBS3KwIvGk5BuLxHPQc3aEduZ49snqQ+4uayamunLAIVuITal5jhA==","signatures":[{"sig":"MEUCIACfbR9YntbHtys4iSPI81GDD/t6/1uoSslD1fhuT2KFAiEAs0fmVsIifDuE81KAQn5Y8VqrDHIGyYULU1ytvrRkTRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUB6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqffw/+IRJehMj4u32KHE88Bw7WDyIRCUL+Zkuf3d1LPHcJy5l3+bMu\r\nL/r2QHQnseRJi6y8sjbAY/owsoVFAOI87q7FdviW37GmZm0DtkfbE/CoHHp2\r\nx5CiaZLafL6vL9tAJjcq7eyETT520LQjt6w99v6+rb2xJdF9VZekrmRzhJTY\r\n6uM7IhtaXeqG684nWlOdzOyQPlgfCO1dO+tpfDawb8xFZpj/zsgHDxdP0/41\r\nr+Irp0MD6mUeosS9B9i5zE5ysKBjmN1jUuRPBlJNYYr6O0ofVYaIUDopeRQO\r\nyXmd4y87AW2XuUbn9JIPP9OmHORgOXQZXhHrj7mZizUajBdchABCb9tjRkdc\r\n5ABNACpYScgOVvwkpNHBlWbNuqjgF+VsX0eU3Zh66N+u6y6G/3EtBShCk1Qu\r\nLME0tF+uHDmOYBFVJckpBka2uv2aoY4bgKe9QUhamHE+b4uBQ5IAO+da4LZQ\r\nw/fDAATA/LyJF3hhgYA01Ymj5hXmbDUtqhfoCbRZJEb6brF5Axg5Do1DQDQm\r\nqH8luUetWsSC1eKdt4CR3dChV7nMn+QZKCdqtZE3yWTncP9Nrjj/rhiZ/FjD\r\n+CM1WTmIPbjmXrJf6zKGj252CL8uTnY6FKF/bDkbo/Cz1sUtvf7vL1zrz0Hy\r\nlLZaiwo3uJbYf2zBZDoTAgcY2YIBlDPEyFE=\r\n=ctXz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f7f56fff7.0_1668628602075_0.7952037131167267","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a5be6d486702f7688936fed5a8c2572d05002144","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7c73f6134.0.tgz","fileCount":54,"integrity":"sha512-1o4YsOOuf0+YiRbhxydUzylW1zKRPgNzrUmbjrFDPFQjZNcNKALBMf5SQiUBtlbPF1hkOE3NSGbwA26X2Af4Mg==","signatures":[{"sig":"MEUCIDvhA5TOeQEEt6L2cGW0xer8+eZoD7IpUtf9wJED5qF1AiEAl+1JyXGl20KTqm9Nc6d4DKkKWpnVeO5Zr6DY9fZdCvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUFGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkpQ//bTaaqh0eScECj9LWZNItHxAHnCXut53+TYNdrSaq8vzGvB3w\r\nXE1+eqsyDThyjskLo+lWweYTpHLvHM9hxmMnGZw8CXg8tlKODwOEt0U7/diQ\r\nNuSGLDSPr8gPrkM0wL6i1c1Zlw/4qkq0AR0+K6Hy1d+q0HOegJ/Q8OewR4Cc\r\nS/HOzFfovVLz81b58sCArjlpbg2msOZhuRgWNLBMFqgWIII7GPGFr6GKGeKt\r\nWBfnn4T8swRD7/KvVsHJY7lKUBUa62spJRLbaHERIdW2a5rBF1h9aA9rXtpQ\r\nxrpQ4yUk6q6bHh8PMaxQX/GHNj21u69HEDJByN63Paza5OPJIUX1eDMCDH3K\r\nNo3eiLaMN1JNxwcF3wESy4+IWKvZx8/Rm/d4yVTZMFFpE4/PoIyeDNeJPfa3\r\nKLLOiWZpnFWzuT2QXKV3cmlWoYNQbdt0MEQ06mvQn9tXxeVdTONBwyuhEoEG\r\nlYUwkZlez0jRZsNBBcW9OPrNeFKcrXlEoZuvMdbGCUcT7mdW35spZhbUjhsb\r\nnGmrMuDyBQK1rNBhNwtU2AvTkOUPaft+vQKTETJSNO8OR69qGuJzDAj4uj1j\r\n2XpwL1ywdPXc8ByHEWMC53GWWQAFlKTQj5is/hjyzBYVaMKH7ysKR6BdAI6X\r\n3LeSfN399cDnhtO2LvSv/gVmp531HC7YL24=\r\n=zW5Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7c73f6134.0_1668628806370_0.48574968593609524","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7204eaa46379fa727cca3bc1c96fcfa2feea0b1b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f1e037150.0.tgz","fileCount":54,"integrity":"sha512-C7AI8y99c6aPervkjfSPdbhDWDs6WKjCnc5+6rmpMuDVcSHP8oBcf0+351BRvDk0plcUGiq8RQa6CaHaQkDwfw==","signatures":[{"sig":"MEUCIEMtnFA+5KgUw44wQzw9A5wznRob4VDAeAtyvAWM1WsUAiEAr7rxrXt6ZHu7APz1G20CSI5NNc34tgsuXV00vOcejUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQFQ//YDOrBYuhjq1ylhZ7pOe2x1yVbLyucLvt3j5okoVwsviPtcZO\r\nMfWy2DSv0vZ72X8dktzWhP1FTu1uyM6ofi9vjjDYlWGNtiFPxek+Ro5+avDi\r\nO3AQiuG5ONlMi5cjBNBTr83eS7OqBUefbIzCuYSER3NoFL75dRvzr/mRRu01\r\nAPrbRcEMQwKyit16mLXvVgLQqQlJZ4FjQxYteumfAXkdf1gDajylzPT7XLIr\r\nTOe4sQkyaIymRF1LqlrayCuUPNKzJ8NZx0bXL2XNdB9Tj4jLJwIkilNIHuN7\r\n56+zdrV1m+MVh/UemAkk9BI6I6H4YYRAQ8P4028Fd/VEaVlpPTuKP6VspNPw\r\nL0jKdmgqXtQHINPFm/LEKT13Q18ala/gpXd5TpYUoQBT7DpvNT6aO/gZrn2Y\r\nKYCMx/LFpy1V8/Gf11w4MK4oM9tid3kVVdiIO8Q6aA/a2kwWNzdGHmUNw48I\r\nsrC9+gohTVH6JL+QS1ugJF6sAyAPmtMlOMnbs+eqFUpWoBdUnIqoFYCKjYMK\r\n8g3qGgpQJSeoaJ3gGLt+vvkh1/qOFWWd7dMWqqt3hy9S+1xkkG27NNn7XcLU\r\nd5Epxzvpyb6Qoiy3nBSkk296S5bIr//zh5/spfTMKAK9UXzhCdzsO+Zz/qb1\r\nlCBIc01ugihSOhk3aoobpWEMSTJwBsvaTZE=\r\n=bkQV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f1e037150.0_1668629161887_0.14699395506132107","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/segmented-button","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"681d9e94569dda8c52e7d9608731938f50ef6831","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.40b18d043.0.tgz","fileCount":54,"integrity":"sha512-Q8gc3vSY5ncDJg30Nl/jqTwJPP8fRyKTOUKWwWkDFWR79MyPT8XtyP5HSOe+/g52SFmkeHOlMFB/hoBB6uYzsg==","signatures":[{"sig":"MEYCIQC9Wj3i4X9AdJD1X7TA+Zc6OI58S24eC2C+rpeOOqEN7QIhAMqmoFgIllqURDEalmOH2psTT8k4Y39+Hho/VgEC5raA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWtVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNDg//fFHQ2q6xFTP/w0g+0uys+YW/ZZdqq8k2yr+/rrniX+wLXoPl\r\nch4udLjUrtW1mcwPUNCENhSpxrf/3Ud5+C93Fufwyjd8oxnrJhdYoURH7uc3\r\nWQoPIl0e9aRF2G/iru3UOLnzafGNi7l6zdQTGk7KPRbAV3QH01zbze8sglPQ\r\nQ2jFxo2oW7iTumXv+Uj9/j9FyIHJ34Ram7Evjq5qxjfoHa1bfG4uzW3YHfeB\r\nbWIGqlETLsBZLB18b08cmGExDU0V+/BPb77DFbQsIISoDUKpfbo/jjtWlhr4\r\nZ05pBI7nVi2/jE9vLXmyNxIq1NKEl35cp47YN4SinmmEWfTVg+cGwh1hqLcE\r\n8rGg99O6FT33x59ejCkifxOC5rY8c8nDz0JpOJSQcfITImQbNBJmeGw5Fn1a\r\ndyNa23YLKURFP37yvDKEYa0ZIU4MW64s586cO6IB/2eH5R0Ji938qyZvZP+w\r\n27XSQXbd3FosJtbJ0jbxuodzyS7BsTzKRI2N4jJW0SlZdRzZCiSEUq8qytJa\r\n98M5LgmJbeubsOBNkrvH+zzsKau0FGa/EpAILfYg2iaFgqYMsjvtUf0zAT5p\r\n3Vv/0W3y1y987caPJOlGzyP1uBirl7HaTSNXB2BoTCEBFiAGRs3ICqueojgG\r\ng5UCJLnH1Qm3b6asBosC6O9yS2jEFVKDlaM=\r\n=OOnQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/touch-target":"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/segmented-button_15.0.0-canary.40b18d043.0_1668639573013_0.586005238411581","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/segmented-button","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"646fe1f6c8190a7cfe1f6d724574a4172bc0283e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.86bde5c06.0.tgz","fileCount":54,"integrity":"sha512-MZniA0xgEvftgUxX0R83eyIdr6ZZIvNVWXlUhf+E4FmoHfQ8xW7zixEtOzvn9fAD41Br6OhIM5YAin0MA45Txg==","signatures":[{"sig":"MEQCIAJdrvxvnEfFlfDX6Q1ULDr5RXZvjF2q1IkH5Fw7hcANAiADkXNA02/PqLab/n58zNOAfUC5G/YJA8p6aWMa9jrJ9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonaxAAgV8jw9JRPb4k/FGxXGUUW1Gkm3x/0IQ7ru+JioqpX4pNwY5D\r\nx+HClWQubENwp7EaBXr7D4cGBdkVBUcHuSpmEhx4B6HPCp/KRBECGM8GVs9b\r\nygBQwwSFvIo2hWlMSvAo3OZbuL2EFzcheUBuQL3WgvzzBpeu0Z4kSmmRw+pl\r\nr+DjeR5H2RtU7G7a4zS5RSqFCiMYIlpwnfhV5rjgi9wVNcpbKV0rYkgbf89w\r\ndWWPVu9pRUPg8bbjhR/i7d7Md2XkUHfVsLcG2S0CwSliE3UD94x9OuEgXz50\r\nMUFzSSL9Y/evGV61SjHQ1+l3DYSy9S0AhdAPJw+kTFZgMK0aH4T0rA/ITnDh\r\nUhABx4MdeaWUt7boaEyrkN52AFWVdUCjZKb3GLSakMQqTxqptDkTkowaQpKS\r\n150boC7Im/11V1zWCuTQpuARDBHvxHUK0M8vgVCzU+00OMfed/51NcijhnmW\r\nFBxWrUxXLDOdQWBTHN83zBJlwKjuUFWGXB5nuo/T2wZAcWbD3bcmBdKIcSct\r\nXfMXPDSXFu1j7eYhUZmG182mIwP9j49ZP5IUyZLKLFM6uY6fDm4UxmeoMNNh\r\nry4W0P6fLubkooFRRht3m3ZdZP5mDySmMoele43KYmb1tB89pTDPdN+LJqXU\r\nxgD9H8oESEEiQ2qYywv0iAXNqxYHau18Hgs=\r\n=bsIj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/touch-target":"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/segmented-button_15.0.0-canary.86bde5c06.0_1668640176834_0.3761667534407418","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"42191ac60d49877de82bcf9948e51e2bad5d125a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bb7751002.0.tgz","fileCount":54,"integrity":"sha512-hEyGJOAvA964Qs2CY0EhxWuRoOj2GqJmzR6I3Z6UV71MOyC4IfuNl2wJbe+Gj26bc4WzqEq8eH9Mnvu94Vk+RA==","signatures":[{"sig":"MEUCICegQ9obrxwufGAdcJv9BVPF2s4aDm780PmfRtyNMTJKAiEA41ArAYbxgPqPG4pLXbkvBXd6Bo2kSn2gs19oVE+Z+Yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs9A//d9gkXRnYIq14WjmEAWk7AdhGeYw/y1mHqh5OUsCm2o8ObkhY\r\nPGtRltIIdjuY4jxTmuWfm+4NgSFnk66kRCF7qqm6pls7sZeRNjqRYlc3rJo9\r\n5Ivl9kOzONLLX7+D+1/AFGlkgHBrjlnZuzdYcMtv2mqE2udpJVLh8Mz+S2vV\r\nAH+RVGjkFxlnjL5ZVCn/cVoEbonn5gE6H/HziUzHRXFTIQsac259OL/4G/76\r\nVWod5USQIJeazpK0l7U1+j8EzWLgTvH+hkFtHf3BfrylvuF01LAza4JRJs5V\r\nLz+FWNwe4TwWw86CLMxkydb/EhMjhn/gFjP5C53rhF6NcGKsMhCjRS9hacPJ\r\ntrew+1NP+g9m+QMn0Jsd6gb+KCt/FqD+onVu9iJh5aZ4W6MZPsB0gK+K2sux\r\nd74NLuRLsPYaV4S6WvdVzocgdaY8pwNtSBCtGRlJpkX+vPU6ZS08hj7RoFzT\r\nM7XQRo7phWrZ/no8YaSgco/NeiUgwLOIDIIpMBPZ65upMDzW8b/D9kyPzg5/\r\nGWBtvTwE3bs9ZLVhJqS3lp82sRiiwx/VeOTBfFzHtJO9z4y2lP2szPDd2INk\r\n50OnG68wwt868tvQwOeDeenxO5Z36Gce2OyYbG+nvfPg8EacnWDlwwmo+9ij\r\nHfxakjWSnENdkUleAqF+7t0fk6nvVlJbgE8=\r\n=wcvA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bb7751002.0_1668643251347_0.0826240468275048","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9d9fef962a8e93da50dc614f9f0a3e78f631e859","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.63aca9af6.0.tgz","fileCount":54,"integrity":"sha512-zn+6voDwA0RnR1xiGHmfUzdRvkY93hCxRFD2ZfPbrJ5vHOH9UHzM0Y1HlpjlsFJPLURktsKV9PnJdljjrQuheg==","signatures":[{"sig":"MEQCIHuSxxlwzmfI4zh0c7I7vTqoTXS4yPsxnar9Kk4EuCluAiApHeb74ZKy//UCvrFcCbc/BsrZI/XhNq9Eqn4DpyfqxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO+Q//eXqchDpgE62QMQFPEYM/jqyk59BsOdJy3j+SsTSJ+7fKTRAb\r\nynuq996umjc4XnmI0yBH3mlLHrEKlG0BWMYfNwoHGl118mqfJQApV2/LsDqB\r\n3IXk7uLTlbl6psr093EwlXUi068Sld1FSkPQvZcxOOi1lJp0FGEpwtoc5eeP\r\nG8xXJff9BtHOt5sNlssWJYkY1jVZK5KAte+fNE+6zGEqRm5HYNgXq6FeBqPh\r\nPfM+SHSoQSFKwe4K/Gryx8jun7hScuMZIqdV0XZjJED9d9OfFc4Dr7RNNCwU\r\n9dUHKpsNRIPxISukBL4AtwRk4Pxe/d3KMM2If8/I6cxe2IEM5uq202twkr0Q\r\nqsJmmoI1Gmdsc6wxk51Q31/ZngAqFLhZU1S5kvHO/HhArukWIl4HHtErLPeC\r\nOEOsV9Xj4LDlScT+wGpbcbz0Emh9A8CI68OOSTxNu/Dyb5z0pLkmLaMY3zv+\r\n8uzimvS31UHV+7Guc2gwZaTDbOZh1zSBxfXHM0XBBZNXFtY+4OWdNT7FC6af\r\noz1Q0fLPe9+AoSRRs3SaIGNqb6ZVzn4xZX7HZe75mhkNsISagAAWS9QgylMm\r\nO/bsnbg7+IZhDhKZPWaJnQZTs2OBuKOYDcwDHNLq1q0siAcw99kRiEBDBRqm\r\nDRCg9w9056C10eSGnLlsf4DNZhVKPXjpkO0=\r\n=Z+eU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.63aca9af6.0_1668711702143_0.7757703827308653","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"43c748b9adabb8c7c8c2867e84b3027abee8a2f2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.56482dc2e.0.tgz","fileCount":54,"integrity":"sha512-61JGne6We2d/Cupe5X1Z+GpCXTjbR9CifRmCEddib8hZLYnTS1OEp6sl6Hh00an/YROQ/bq48379lZcZhyOTDw==","signatures":[{"sig":"MEUCIQCWZDpioxNhgAXIHnwWhHJBjY54co66AYStP7zCtOellQIgGc+RKWqvpyuQm17fGrxem+K1bov2lIG9N8WazcQcDu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+aw/+NW2hfE3UAHOqGQlTxkXK/9ixC9O5muFDZCusmn3tEp0opbyL\r\nrM+xpuY9F7fbpvyuHvjnh7Da0TO+fF7TeKc8qYmmxP2qhRAIhsNtP75vzxdK\r\ni1Tek99w6RgauKestof59wyOT5Z0VK35ERR/JWUeko4C72rstvCacoI2b/md\r\nhvOwMYm6WBLonYz8nSQz7rXyaksg0QOEX6NE7FnUsJCgoLizfJKlHoZfSHqt\r\n09uWCtU/9czr7Hg6H4ETHE3QAc9gQwrwaWWvTJ5j4Hzt6N1NHQMtC8igL9x+\r\nJrCDXhY429LEFXc7m19bt/bg00IvYRbPwGNcO4C65yHxJzm6P19D8a3ezUmp\r\nhcVjoQiCJZcuF2thf5SE5TZBqv6yCJgHdG8gzPSh4sp6U6TK9Q2BuUdFbm8A\r\nzJn2T8CMXsbNQXXrVadJbYS95PgvH8iEV+9CZcv2odVy5/MXlpMIjQ9gqTA5\r\n+l6kaBPk3JV8+XZTHjV2uk1bdVqpbCWWZ3jX6tO+fZQaD3sQD7Ssx5y8GBr1\r\nluuEnNSqKkW+TOAlQ3NjLA2ZzcG5FXQ9p0HHyndIRkvYK4A3hXdsXJxV+/pz\r\n1Pg+P5xk6dTn0uhSyqtSh2nMqik0E1/JL4Zpvm6WNhuhbM2zDoiRPa6QzBXq\r\nDNKT8kYZTVfi1T9GvckYt97bfUJIqe2eggY=\r\n=XibY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.56482dc2e.0_1668722137904_0.9762558473969127","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d29f9f6cfdc67e4fefe02f740833dd8623a875fc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.953e689f3.0.tgz","fileCount":54,"integrity":"sha512-WVvC5tId6RMl5zoC6Lz+9UiUSQ3h7dyut/p1+FaxwuueAW2miU3SK5pV3RazS7Lfw7+MJWBq5nR2kePTMZD0cQ==","signatures":[{"sig":"MEUCIHDk43j43DwLqqdll6LQNkJq5dNwYvU4/Bq4H7Qry2GXAiEA6CIe4dbmE+vb02J6Z7DhPniAiMWRCenU6Xsk+Dt0hTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrAmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBqw//cq6akG5VSZKFnY7xQbwlznV3KBWmXjSLWvhkhYP9nljph04w\r\ng889BtEJGvhGA8SwWVi108FMsPdPkciydKacsTcK5s8gAdOwfsTy1Pd8dqW4\r\nQO9pQxcWmfZyDnwqzUPQKz8aAPEONfwvcCDFsBwNfugIt2mqapjxgRgMolT/\r\nKJKXZUIsiZlS7AfA46CyoNhvRRrFSgtYW7ZZbFGsv83v9rPRfXBjAZvFSxHI\r\nRBvPBYROMhdd2ytE9TBdnaVoP6DAMOr85HMJ+tOHJKQO8ajDREo9qb2smm7x\r\n5G7LkZJ8vNA+Rj5kvZWoSxUnjtT6UHZOmNv4WuEJYLmJHT6IR95phpEkAf/2\r\nPDooa/HMoi+fb/Mjy5BVe6yJE18Zrt50QIlF1mlHGlJa+vDSHFF+NHhtJXgL\r\nMjudryTOmp2P/5sgNI2QrNqrPwQlojP+bcl7K6SoG5b5l2LNwP59KMdv8fA3\r\nNRx/99yCQvak5ZyNxAVe6Pg2/LOeVGdfUEAnI1WNf+Qt6h+nnvXHNqbyJL5K\r\n3F9nx91BOAOes+nxZ/YKA//fWWvrLekWkljThhoxeQywQW/8bTgwQQHftBub\r\nJFRTeeuUhUc1hXxeUxhw8hvBY8kaV/04fXBQ+/jCAi22lEsbP2DppmI0mP98\r\nG7ljUk+lOmF9jumkmxSbnXLlRu7C/UE1GV4=\r\n=z786\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.953e689f3.0_1668722725881_0.7036241747223648","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ca57b70058e184c40b2223b97e75f09a81b702a4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b5606a793.0.tgz","fileCount":54,"integrity":"sha512-ovRMzpHvsEzoxUSvxlVCXT13Akq1E05pZOy+7ZyuyQaKKLdsHHHwDHaarzg78YOyDNgOKF9PBIYBPb13ae4Xnw==","signatures":[{"sig":"MEYCIQCyBAdpbT0oOYjAc6yDmY5qcUaloskNKahSqwffrz6IrwIhALGiTbiJptovjYxHA7lgk1Y89iBNl9WCptcZv8oILBS+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1zAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6SA//YZ8FFd9CRyrefUIw06Zv6/dkIcdgarpkG1Ab1+2aiPG4E7Gm\r\nivBvXAbrnJDrstGpWDNZC/u9Jq0iy2ry47056snnU03DGNdejnGEJ+GwWLaf\r\nJTmn7ZYoqKzAoXUPbEjqIS0vIGOXA02N6sDJWBt4P6kNDzFfs0Ds7Byu0HE9\r\n8PBvJHEs2XGOiczont69cuXoiPxcD4xe/F7/pPRDktZ8yU/MF9pd2TugIQh5\r\nqMRw9hn8rw7B2UEHiS+QRFK0czK/XYHYF6FWOIA67GlqCCMHxpWoYiclwfeY\r\n8tmz/HqjtpD7wIf/InlBJYQxFg2UgpBidEANRsPDJiDZxmXHK3o4BakfxRTj\r\nIulKWF+jajJ42+4qj1zHjBxWmMwtataApVWUaDH9DAOyAW/jT7PIuYfCDsbv\r\nn+SW3U2SQcMMDOQJW69h5+tkegvA9iMxS0okUqPQizmysXGyg6y+WHaSnKa6\r\nkX5C/9Vq8fQ9MBpTdEc7VnRnkDM3GrAZAnH96dfQOeKsg4JQaCcna3YolJCr\r\np2EdLOvxechlpf+zdHrvX01cUYHgpQveuVA8y3v8BWMi5TE+nkCDf19EecqT\r\nJ3ottY5btFLvZEYtAR2MKjoEHBNbFMGa//7vl/Cfi1YaO0IOgfEvDM0JgL9R\r\neV7T/JgUD8a1Pl1xl9IkcPKMToV1DogAsLE=\r\n=Kybd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b5606a793.0_1668766912159_0.9978896719127643","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"93207d69378ebff73b778dbcdc7fa42c0a6acc2e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8c5675942.0.tgz","fileCount":54,"integrity":"sha512-efXOBVdnOntJbUK4Xwckj7quL73jJ4gYDvxHeiVOm47l0ONION9x/gJKLEkGqkDwOY4r1YkRw71qbISjudWhAg==","signatures":[{"sig":"MEQCIDh2XwE1YrJjRebutn0CBCgyq2e1DqI/i5UgSph92urOAiBQE+QhYpJ1UFh2fpqnaQ6bssgbzgDafLbVyhgiuqIQ8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrapQ//WtNxcVeKZYbye6njpcnFa/eoVYGI+HZvhsuzy25krs79P999\r\ncHkRwzcyh/hJ7hQL20eLgoIQniyVU1l30EXZ6MMH+sJh3ewseSlw89HCyjsv\r\nd7ZzPg5tDCWEx/3whc8GMWEQE5Iuqr0dTKeTFaRK9a3F8vAfLhQEOwgmPxJa\r\nZhVXvOZHD0REIC2ApRmr0aisurDK8c0K5zucV4cosI6DpqfAwN+0kjEqMRuy\r\nIIXALPaTuIKvwdFnlBsElZ5GrHrqUZdMPDwEBwoXAfPNq9LSpP7/hPntcpf2\r\nZz9BIWmMiN93VU+Oj2lW2RtX/Qn66TcAjggL2prBGcYjd/WHcBFi9wucZPjg\r\nnxXO/ymNLSYhOd5a7fcTWHjjq2J9CnNk4oAxNiGl6oVZ5vmSAq5mkLBliuBs\r\nybCn7FvPARpyncN803A50f2WwPojGVRdn9EO6ZC2ciIQNISRPj9UuXLDvIWV\r\ns6Yq6cwYRIHSenK50exXiDS4QupV5DArUODhkObDdbYWiL4tgORET8upe+5L\r\nhedkAqzf5DuL3exIjBuUNCaDYKCAUpz8sp2HovkMkfIingpFa/m0hPxX2s2p\r\nGs/RBkDbJtBXueqeLIR3a5bPjGTS5VSDExSHx3W5m6mhslS69+pdGGB+Ld6g\r\nPo/69dagWEhwaie7MdD1p80JSCdXNwoAMgE=\r\n=YKVs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8c5675942.0_1668784622076_0.1974590205937019","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/segmented-button","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3abd816d8990390e6f2f1eac37584f14f3bf3db3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.697fbdebd.0.tgz","fileCount":54,"integrity":"sha512-i/Lk69X7oF18YkevNWl2tkgI0jGLwZY0gNyQYYYl239i8J0SDVt59/Bku35pAJnH36hxVDZP3a2pnEz1ybEhSA==","signatures":[{"sig":"MEYCIQC4XX1o75SJbrPxu6GYiKuedsqqHd3gccQE7lnhzgulyQIhAO3BXFsbgR/abbEP9tzDmgR313H8hNniLsY01BBof5tL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7psACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHAw/9EDtloSXhCdxiiB40DhTefxcEKGg3zxYMGVg8t0tX4QoDjIyS\r\n6PthALB44da6KWt5E1mf6P1dbRP5vEPq++WqKV4MZHOGfRbftFCwrdWABAIs\r\nOQgPcROeGZnXEYCD9Aof1sd4cHeYBuMyXZnkpu1HLnJIwgTPuPEM3MPXhGJC\r\n3KZqgKCjCNh9FlxiEisNk9eFpNTTbgyk1nmxC+eGwuHnPl5Az+jRWoRJSEJh\r\nCgcYndWsDFgHvv0GtOEgLAXa5CV0CzCpHh7XfwFnhW7VSPUyGpkh3MllGi5C\r\nWsCWhr5mBS4NpvGeWF/w7ps+DGWIAVqvfwnoDQFgeagZtTyHxtLip3xpc/Es\r\nGoMtH9Jw7taBKZWtAx0sZwKJKmsRBceniWPuLZYaJJnCoXCE/+dRtElRD6oz\r\n0WNGfWOvNAUwkV7FAvSj10uZ0Ghe2NXMlXZlBjjrgUYj85OfSfReY39Pw8VE\r\nzSxIg6pz/wAAWHTkkBUHuraKVrbbfdBJ6WR+Xbuup0nqANbmqBLu59R5Ktee\r\nZWzEQNrPbM2Qbdga0pWJen97XmAVRwP1CweFiD1cULDW2dvUoW33ZtkunLwG\r\nEsuWHDtkoWi1do4juGHh5IoGAWRQJWpuppQfJzOFm7ecys+YEkQb8nYwajMX\r\nItm72SP2EwttjPIWXgRMRikm/sTZ7hXCQVg=\r\n=HkeL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/touch-target":"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/segmented-button_15.0.0-canary.697fbdebd.0_1668790891953_0.7109763201323605","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"981c05ff43d6bc9ef83807aa1a5795ac9d5b7a3a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d58410453.0.tgz","fileCount":54,"integrity":"sha512-1tn5TM1Tl0FI+qvOxv49eLHtasrZ9kBFdeat5u5VOHJg+68XE3i4PS2Hmlyomura3pavh62cHUELOmf2akSZBw==","signatures":[{"sig":"MEYCIQDsPO6lfFVLJRqjmn/s0borVkBaFPmDMzPwAWp93vi1IAIhALSD7IHbylIBj115pkIl+QiLuYcsdRbnqmlpB14AoAEz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9w9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplZw//e2JC4To2Y9km6cvmHq+IDp+KQxBo/v+qFfBR3lWgFXyTo/Nz\r\nnMXYy4TPpC7xCySYMb2CUbaM4e3tiXohGCsRkk0yNnlFApZwRxdSIm5WL2Y4\r\nyFygbIqh36ioNo8txNFU/fC4H0lNZjZH+eSExGStgC7xerls+sJdOrs2qjwQ\r\nhjBcF7KbqwMd0pUDiUg44NePYKNEFGSCMynqsVroBWCR1qUoIODC3YqB1cni\r\nXdhu7JQ0sahmorSu0ukUYt8LaiI4c2Xnd9dQj1rOaW8xOte56Q4wH3gfno+D\r\n4SUBSSH+xaUw+JPE8859QZQc0/MFeec370iLqCKoDWvzTZXOyuyTIs5dMvlo\r\nasPg7lqIt+X6ssuuooph1mrNs9xdGD32HLPXT83ivThmkd0xMbu9SN7g0Trq\r\nANySv0fly/PClPdrIPrXPzZtxl4EKR72UwSMQSWd6wsOneH4kJGHnc1ZZEXA\r\n2dRy5yWFKWw+gy0qadAmLot2FXOCWldVW3W1R5suANsqhNDkHrX2bRqyOSoD\r\n5xp9z8tmyabHKjav+4OHU7+Ui+RXnkr/73R6u92f+zwK4NoHJeMRvYt8ydLT\r\nnscJOubBFzpYmdYH9Ss1gPqFBKc+6HN3mrOUUhGbQuxkLC9wWU5CzjINuxmF\r\nSThEXozwq9gltON9SCV2DE/FqpSiak0plTM=\r\n=dqet\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d58410453.0_1668799549438_0.7314645258452874","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"617cff84167736afe558246e7ccf4d9dbb710c80","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7971d6ad5.0.tgz","fileCount":54,"integrity":"sha512-qu9nfKkPAxv6YFFObZAXHgaC0qq8i4Cr2lUbOQdL0E9HmKG+IE9ILualGJrAl2LOpCSJdwA0CjOuv2IsrscpHA==","signatures":[{"sig":"MEUCIBTlZ2uptYF1vN7tnqVt3SMGHZTOH259FhPy6LRLhBo/AiEAuUkxw5mu6u64T9jzUxrKqildu+1uNmByph9GHM9CLR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJfCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr0A/+NtFy3oM8r6e0nJxVgtqaYylC5/SaXt84g2QB91QKxGSG4Di1\r\ncX+XRjcmZ5glKASJdT98n4oohVZAah/2j6D2HfRhQQctSAehHUCZNaFDtYZP\r\nVijkCjasM5KaFZVVMKOrksnqQKpWLp7LUOBYlndXlmosajbsVNoFZezzFwFX\r\nQoDJPD5KaET34myI+IidbaRBMXbzy31Xl8NappEbF4i5GRxEKCxcOqM4oOCX\r\nFhDlIgLntXPX1oxbPCkbvMxkfTPW8FPvHYnLojW+onICobC/fRXBhMgy26bZ\r\nvkJzbJYW+Ljn0sc/OsJ4UHUy+mw2+lGixErXagaDkrI8bM1x8QE2ZhnJ640h\r\nEmJCiPqSete5DvOlyPBiqryw/XiG31gV39qoB9XexntJr7KmyQ3HOadq27Jd\r\nNWmoxKi+uqLJ53wNGQ5aDFl1Na2xXEGgp0kWE72uX92iwK6BCVgsHAD0w4Xe\r\nKaUVqQWquBjb0RBoTYEEODn5Pd8joDhsW0Q7GryMs8CiVrF4JWbPcpzKh/Ad\r\n9doHHfPfXyjJsp41VUbP+DEQGSwZlM7Hs1bOicvZoRbP57Fkxg8+Y5VejS31\r\nik4QTyonz1aqlIUFy+4sWBFSv/aBzZOnLEaa7F0LRXSz3scbkL68kfVmKgD6\r\nelPL1rcydSN4ub7ePZlRDM4Gl523/as6Vgg=\r\n=QMVd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7971d6ad5.0_1668847554533_0.7662154647938884","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7fce59f4edba47c2354c2ba0d50ca3eded4f306f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":54,"integrity":"sha512-KgEsjGfWhlDT9t/H6Q2e1czw8HUNwO6g1mPnb8DJ6MTie5LE7EqOcF51ixB9TEypyCFwnxpg6HyKkGa+dZagzA==","signatures":[{"sig":"MEUCIHu7cA0P0GQ5bce1JsxI6TfMPpprTDzx0WSVAddjajWTAiEA0a04kydKyBlyAsS0QCcRVhPe65Os/k66MqrjosPvNlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1juACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ5w/+KUmbVdfRGEOXuoSRY89Wg/3ewMnZ/Pu7xEfpkUvU+55dmXrh\r\ninzuRGbUYOCchMrRgrNEGn87V0Ay+BYBgD4/c4S6MsUO90WZ8U309S1tbTnq\r\nAbhh4ApyEsZ53FGDiTJTRaMIW12wvBuHsMRZCT8lV5YFXYeWN5yhyO3xNO/p\r\nftc2GURvWFvGrpgGKs65FO5vj+pi5BmDqxA37G3+7es9G8LgpgGnTH4pH+Ld\r\nIFvmJtk0bQrMvtqKg8XCwNgPSGnDPGh1M5AeJWMdoatip4DDZMpQUcPYnvCS\r\ngb3wDc+GoUnzIJG+Vz0PAcsXITf7sTfUOsTpXO9ijwS6TBEM9cFpLyRQz8r2\r\nZOXf+w+Estn3F3oTyZlka4ntHqnETu4LenfOVZ1XDrX4TsjZIoti1UdWTD5u\r\nclDFGIAzIvj+G9dWk1i3XnU/aS17KxTlLZJMB2CUYPCv5UMgPAYZ6P3/GQ5L\r\n3b+pN1wuwjVIvQW3U0X5BWE5sbzC/JS5y5TLRuyDA8ZRuDC4nmjdbLBJJAtV\r\nQt1MmluG8ECloAhWcVCHzfLXx6TOYD6XBSpD8+LnxIGndZmTmB69CfJsGDSX\r\nrNwtzzqoXg54TsP733qeExpNUoda5GxSg1u4EuMC/Dlp85uU+CsqvxX3Piq1\r\nI3UXfthsxWl/ctn4xt4V+T+8MZ0DPDZ8x8o=\r\n=A885\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a0ae73b0e.0_1669028078062_0.3553355279326236","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/segmented-button","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a302cc4d3a4ce22ce7543e19cde9f9db21923beb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.96f472604.0.tgz","fileCount":54,"integrity":"sha512-Nw8MN1VzNO0NBLQJToKkDHtk25UzeLSViEC3GEyZ0zw+wlFGz5T9CYTztCP2zklmsQYNBnpPheDWg6ywEBL0pg==","signatures":[{"sig":"MEYCIQDdHotvAfxVHIHIrKsV+weUnXZdudlooGBboPcH1D3MiwIhAI0TwOXAnXnGJN5FsFYyhdlMP+Vjde5LGBuNuD7+Kvja","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3TLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphGQ/+MEpvVyZtF/iQ1FHglWsU616Fr0gdwPWsKzUJZ4RjzKUPuUg0\r\nmMLwsl2CGS2q477fktQochO+yL3xYThP1LAmEK291Wb4Pcd8k/GkswnzALOc\r\nNCt09jbPFbgl/7Ud5WN9AS9NdJfqbx7pPVNlfUJIBx8vjS/Lr+KEEaY/wWqm\r\nC68S7kb1kmyYfyWL4zd5lkUOC3ZblDSdorN1GEIJDIjqbwKNtwhkm9SR4nqs\r\nvLJH5fvK2LoTBeHb9MUiMciFm7dEhG147/3ap5qL8m9F2g824EynzxtqGabC\r\nBctL3lSQ+gmsp4PwPRc/nV5467HWUDZQt6tkdN/Z8+1LlCrLLH433r7m6xKI\r\nFncg//bEdkn4SMndlRM0gdccRKiWi/s6hDtIyWTL4ANO/+VDn3UiqvuwNbvv\r\nHjXsAnhRjLcJRo4sb077EaTfzjvIHZ14ftDZRmx3tMAFxggysyCHLgNCGi6v\r\n35R4e7zc4THxNy1+M1zu2Xm2ZYa7p/NEaPrtK/hN+JKmzz2H3aeUZw5Va3lM\r\nDqnpLDgqiUZ4BYgrm2/d8H7kbG+gdBJJwh44Vky6Ke0lC4LtIB+FkUR2q4Wf\r\no6HtYqnfRVEhfl2cEZsc/KakDRLi10lW6FVfJQQidqv3Tgv6a54NyL+LwsBS\r\nFyet+zbskTmxGOXTQcYuipMSaLCs+2PIRUA=\r\n=lutt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/touch-target":"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/segmented-button_15.0.0-canary.96f472604.0_1669035210957_0.7741719234819138","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fd354475d752b46684c9d51f3236484ce9e0b318","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.18b8f31e1.0.tgz","fileCount":54,"integrity":"sha512-GLpeH/CZlOsHNpNjipy311K0etv6Vvbur6Phgqa+COxS+g162gqaq8PWqtG4GnWMgwHFr5stPPXb1LZmZowl9g==","signatures":[{"sig":"MEUCIQCgckZEzq5KAV1IeIYRcpuacc5zHor1Ztj4MjsCVoKJdgIgYTTZgE5GeElIyKUShO4dEr/xne63cFze20l0Xk2lymc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6E+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwpg//eP8g0b8AIggxHLAIJUVrnrWPy5/8LJwIn7SocWd6SIhPSoZp\r\nYrwjdsLRdoxB/3cgqkkgqGSiE4ji180vT+u5WG9kvoRdTSAV7bZwUzIzmNbf\r\n5HqFQMrXxziV29ihJfae3L3EL4izsf0SNA5/S1PcBLIEiwzjNlEj10z/c1Zx\r\nFXdPVR93Hp10q8i/xJkvr7oT39zaM7vKP93Lt87U0mklsfWJRfTkllFXSp1f\r\nPw/xMxgbfZgGP6hvXRrqXyoFbpBMmSSNt+iT4E5zM39Z0JfWJDSlVF0S3V1w\r\nSc1Yuz4Ttg3086Tsvxnl+9Td3d84QTFRv/VC4tTv7Murq476RM4zygKM0z8X\r\nLnY2nssUzJOI+mwmEhcmK3rkBhD30RDQqY+Q8//7ayiblq6DMZXtJj5p9UA6\r\nCbqEEriX0M8EZw4I2i5pmH1Syy+cly43Ldr4kSFvk46vI9Se3+6xgyDLE1d+\r\n22hL+T7jCj+agGCCF324b1/B7BQnT3OdDwZXhXdABKDrtZRBJGL1lstNsmSE\r\nc6sdL/HTus94KmQ4cF/AVW1IU+Y1TF7NJgB2ZE8WuKBEaGbXRivG5yNqqKmu\r\nOKYcBAzNVwaXnZB1uKdgRcWjO/K50OmEtER/LBq7/3ok7nBsv81eQTkiQe2w\r\n/HOLnRuM5mBaycPNZCQ8FTpdgiLAuYhSLU0=\r\n=CpCA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.18b8f31e1.0_1669046590272_0.1199658894047444","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"768426aa8bf6ec77962131bbe92ac0798088ab50","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.912f33ce4.0.tgz","fileCount":54,"integrity":"sha512-qdaRK0Logm5ZYWxNrfm3ycfIeUN5tOEO2WlF4ejx+7a+GP1E4HoVO27wLqtPFGIHsUgHzQ04A+Ik7TelV48pYw==","signatures":[{"sig":"MEQCIGWnPPYShpjIU1Iin/dYw6QLozDJYm4S/YK0zVQZkhXmAiBPB1R2bIHGnFauVi4pLLgaIuLm5hAijw6XtDvJksEu7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWIg/+JphWaH1NIdRTt4Vj8jv1mzKGz5WblK8eFejL1seasGOq8QPT\r\nO/HmgC0Yqs11xjPnC9p3HdSTWSwzsaeerVY7g9Jsu1WgCNUcL+RExtIJqhLs\r\nM8bubVQUojPpRZN4wo3vG2oHaLb3OxZ1FJY+9g2j1+Ym60pxO+TdqiF9AoH4\r\n7+oXg2kasrtwbwVOdCzr4+6EA3bcAeGe/4iUTVIthpmwLZpHm1NVD6dQS4Ey\r\nr+Uqt4Nx08hajxXuYW8eVt3uuyn8DPUccBkiMJWjt+/cl8Lh1SGAfAEUS7Xx\r\n5aNGAviDXtFlUrpeiFF6VbWMdWoUkFK7jBJzCJK4cqPnApomOF4KDimEktGn\r\nZB/f1FfrNk5GzbCCYqUjfOEaGqKnGzjjdoLzSqXdyBGm6pmxqyuMJM56IymZ\r\nj36MMMylVO3mjGP0rnleCo8+I8+Nu46s+0uLRGimTIDf6vgQa2ihhDEg7nQd\r\nnfMaKLflnPh6au6wM8zpOItAKH91SDokgA0VHqPqNpLgsEUMpu3Ey7Yp/CMU\r\noM4MMi5+M98NdC9EK40lXooFGbv2jMBFnTUZxgagquPnjlcIRh7i8FOCsd0e\r\nmcC1HC/XOQopvot4DJNfJ5sOVKleu57fXlJOUYHPzMG2bWDQyHWDWhfeCjys\r\nqwB6hDSl+7pp5ADDeKm1S1VMBQ5tx4j/gCI=\r\n=SL0d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.912f33ce4.0_1669053287601_0.5492473897185752","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d5660e7ad6d813a49058e875c78435cdad0c897f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1e1b1c369.0.tgz","fileCount":54,"integrity":"sha512-kX7R110ZOld0I6vcNMnmTzN02qdgNtBk3XjJjKgyz/SY2MgALHgzTBof96O516KDICBWGa8bDEXNgE0KbQSuoQ==","signatures":[{"sig":"MEUCIQCTugnfdjOxIuySgJixNBqHcudYb6wdMfXJvg6U67aK0gIgTSRBH8U+VHkKX8M/oRv/1lpcRsDh8XXJPbhE0HNly7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUtQ//WwCxtaYhl2OYa7P0bdql3gks1SOM4PtjjQ22lev7WPEdLCuc\r\nikL+2FyryY54F1PTk6JA5B/ZpyHHyPNK6xuJ4q6OSpg3FPUpoJw38+DhX/Aq\r\nNu3cOpmkY1KprKCNWxSrn3PBhYcz/nQWLxBikKK7ewBwf427AagtEl0aQawU\r\nyfsgZMhC96Ojvv1Aye9hJPpPrxIKv8nOV7Eh25kTLbrXroQHmadU2oQApx8R\r\ncXl2XF4HZYbxxTgUaxUot9qhvOPKEv3DQ9rNJqnBFGhVAKob8lrjoG7lDYXg\r\nF4tktLRZ+p3KYquISLfAZUpiAYuQldypmlDbQlX7iPOfR4Q6VkfX1fYN4s1F\r\nEZlKTvvpEUWYu9W2HdbCmhID8l26UKoxRqnizZFhkDRK3aqaUT30LSEjXsWH\r\nopjct91g1+Kg1kHy/JBbrc9U5bGEcFc46hs4IADrK4jtdgg8SpEFd8YfENi8\r\ndL1DxdsNBvZPaCajh/HjWtJuoxYudxwEMc7tylE5mEvDNT6fvtjGliaFYuVw\r\nnw1CpC3gzPqXYmLYuipPJ6zYe68CNdGmLnf52JfF5cweRiVcX03dzhGBOhKs\r\nI8nbScPZXt6zn0h0mn12XbMROwzGdsSfgX8dydLunoxhE/rqxxdgLsWvv6pC\r\nE9z8hsW92e3nsd6VuH4VbO9l6sagXg44JAM=\r\n=kZDk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1e1b1c369.0_1669230089555_0.6451390849066025","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b014c5f3fab329cb6e85852a03d27c54e0e3b25b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a2ec49244.0.tgz","fileCount":54,"integrity":"sha512-vO4lFgMVUaPrMxz3GNbGrgGWo4rpiSSa8MGjoBkm0b+pkp6MYjoyxItJA9BySxmBuXDnx87ZxD7cP0e6gFP8ug==","signatures":[{"sig":"MEQCICUOk6oJqvWMNlibXIWXDz9sL4oScXEZyuxr+lJoMIrWAiBMYnCGtIM5C+pzJ4Ui1E+ALiAy43BAjPedwrTRdbzaXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrERhAAhuq/Rks2NSRBRsSyZLnAK18T2G5NWixFtJIeImDndz4w7M6M\r\nkje2OwGZl1rGFQz1g2ejQMNafll+nbedExoMTQJh7QjLgkvqLOZdKN/3X9JO\r\n+T8jYVSocxPJPc3D4egzyEoL36EjfTq5cn+PaX+l+o4w4MWmArd86vq7jL4C\r\nZtf6WerwGY6Em4s+JYrCWqiUnOWt4hC5VrBeqGjQ7VdERhM2qstjrMNF2oAu\r\nyHKax1bPTaTefv1YNmVacMN7JH/4rxoeawcwbIgzuMt7yayZ9v15k4x2NKe+\r\n08qgL7RB9EXuZjtbo9Y8s3ZiUlmWs8avHuCRDd2zHOYrFzrgfQr8xo9sxFAG\r\n99ZjxVUXT2uHrWxkM8P7E32H94nb9rbu9ERHCqOVXCkE5j14ZVyGbBwZSyJU\r\nr8lGRt/1RSzaFnVNfN6lsFw2lE726fyjmWR8mqG+DQfdhSfPkxfY00eAfXyX\r\n8gFY06TnQp1RK08G5dAMPbRtnGzLt1toxuAeenHq6LPPSi9Q5D+iDCWe0jHL\r\nz2VXjQ/3w+z5lhWkrQ9S6NtGk+60SfF9rT5CPq3GPr6Ka25MfQ52/9fv8cCb\r\ndEyZ1DzfTq+HcT1YXrGMW2FfGYTh4P9gWFgjlDVE36nbORfHkQfLnQD8k5hg\r\nDSHgPd6gBHbFuG0Q9tlZUBrVwR9kWR9IFsg=\r\n=gbJ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a2ec49244.0_1669231903318_0.01998984893771416","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c46426f067375ad6faaf3105746d39bbd710223b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a7458ba0b.0.tgz","fileCount":54,"integrity":"sha512-8bFR9l62CFim5j2BE33UaHd0ibq1ewv1o+HsehvOAHsWBHsI9HQsMwEMhDx+us52x07XDxefnstMx7GfmyyICw==","signatures":[{"sig":"MEQCIGF27otgvsfSE/vNGRJnDEkthpmr1I+ASu4tfIc57p3BAiAmCF4uenDBVTK8L9IhOdOM4oz+U9PMiUxT5l+9isB+Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro3g//V5NfzQRsBZL19NzPW85cz8l5RO+z3R9wZ+aPD0aQxLnTloa/\r\nUHgn8wDujqJhmdEvlpJiTxY7gzBdGBT65O42FeApojXY8ZhCA1OH79FQyTNp\r\nb0f7m9S1gQKe7dhbGRboOSVhWlGRbHbThYZ6Q9+07/Y81V1lMQHOTJU69SwQ\r\nrHd+bRR00Rgs7cYm1wmwMDw2LJNfSQGDTo68e8vZHFdMD6tTBYdGn8Go9MPx\r\niLjpZSeyQ52KnDTK74FWak6OpJV/oXP9Y6IfQJCwiU9foPYB+Dtb0kBFHlvk\r\ntn81cXpsWrcKFoCWErNmGbep0Yiz10hxqwOfheOzKTjLcNeq6MnBsR2CgHb9\r\nl+sSzJFQthky469BQwkWyJ0BmekdY7r5qXyr2Ve+5b3ApwICNZi0MDVJSEXG\r\nRaVrvo/SwiQAGiRg/tC5zavdXOCgCh7gH4GUV9/O2PZaqcpkuW8vgyBymm+x\r\nUxF9V9qpJgnU7xTvRpC7ra8eIbivIz9quMNxbhQQWk34dxnTm+QNxBc9TIj9\r\n2hm+szi9ta8cB0qg3D3xY26Axyp8acSH1J6bg1Vbxb/R7eB3IqiPplKgYx2M\r\neeeW/ukAB6TdW3FA0C1k6G+fw1Mj3ilP+nwh3eQ6m7toC44tRPRLDjUccuhR\r\ndq9rytua1gue4v40AlDopXdFxjuegoh4MKs=\r\n=elGw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a7458ba0b.0_1669234630008_0.9956956929492453","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"151a65b60aed411b836ca296b5626956bbf4f769","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7c35e5036.0.tgz","fileCount":54,"integrity":"sha512-WIeYvc3iE7Uw2kZr5zOTvcfTiNPqm73dJpG1wtf5SAR8UY72k7+g5VkunA3gYt7Ogc+KFFLTarPdrDimkbj/EA==","signatures":[{"sig":"MEUCIQCdaM64gHBu6rOWUPgqnEfYiZkamOLA4it85YYIjsFErQIgGEDYNVPuKVLYHyalIaR5aGGarNHJ+JKNkCZ4G7M0X8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf8xAAgk4E38tBKZTwgufJRANyzbwzu0lW/v7cZNN3NIriWUg1ZPc2\r\ngioSTP8eq93uEhb8dOGHTgA3jx2Opu9xpp1gsnQAyFw4sG/udLcRuQW3kyv7\r\nwMvE9YGGeSkQJ6cFplhfjGFW18iPzAJBlMxVHo/y3ptRo3UEMPO5VcQL3JCK\r\naaP+U+Dh/C5jC0kVLb+4aAqyRL6yWYYzkmrtX8b2E31/NPI8uSuiIebxU05+\r\nY/6ePwA5w0kqge8egrS397+mH1gGsUJdFefOyBFP1PlQfmaNSUJ9MkJ/oRpw\r\nTj6wU1y+Pc584DmeqmdeaWYmBviTAUj48bJpa8AWimx344F+CDGL4XNeAQOH\r\n2M29VFfi9KGBhXvTkqFsO/XpVZmnS8v62QziwpYjLMk8Kj3NR8qFW0gFd4TW\r\nf+eXsSGpXRASbkZ0KNJ3r3Nd22oJSVu7u9FhMTEbivdigntj9iwHW8oDDuA6\r\nAjR6QaYw7J+/Z70byLToSy2KKP2Ikwvw87it+oFXGGZsqbnQHbJDa95L5V2/\r\nquzB16ESjbvIZfNWu52MPNQl0JsXoonfHl7suZNlhdTXqyxai0/TG14l82tN\r\n+VjmctsLyhQk2l/uhNJDaErkXFo8eYrJDQqChR9uBtq75mwWQh3vbTO+uAXU\r\nEHWvQMADyPXkcGgFdjsifzg1W0nbVSdi+nA=\r\n=EKfF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7c35e5036.0_1669279211247_0.282986608158059","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"53028e21d9368e3916c8fc42b09344665757ed67","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4356e05c5.0.tgz","fileCount":54,"integrity":"sha512-u8g24wsAytJlVJmyjdbxuR24nnp2QRGgnbJCRIT6BDXR/UbU1cKI6WS+Tb0Jo/91d/1s7Lcw6ActDXFolDzfwA==","signatures":[{"sig":"MEYCIQDiAoj14gA+SiVTaueddRnzq4dwawp0N4FKmpuwA0WKEwIhAO7TPdzyWkhCWcYbuUqZ2xqd9cUOSPfJzlKT6CfUT5QZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0AMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoyiw/+LeKE/OvEFe++6iLtcFmICZQwLTUHAR1OZXUKF9TYgynw67qo\r\ni5CfkmnrRbeoFtxI+b3B1cVNXxNlOHx8HEaIfBdznGIA7Bb6MEZqAsH/gTod\r\nvAzgz/OYYA65a6EH8STL3kTbu/gw6Rp4j8QKCIjUDkH+JgDCqP69VjHx/VEH\r\nGGI45pvwkNkK5uC3ncL2tj5TKuiq+VoLv12xyNNncDVYc9AWvpd5I4JiFkGR\r\nkKqseiPA4Tvd0r0hXlKmOJ5ELP3dViwiXSDYp8WD/UGRLc4X8dfQKTpZrHRW\r\nkvYM9AK+3XvVv3l0cYc1DoA2ICg1pIbcV5S4o9VWrXpIC2LcEMLAA/JAjmnX\r\nrzG3ws+9b+7uA7Ii4JYK15LfVu1LmHIreJNTEaBLevDzh7NmiMh8DDubKZgA\r\nt/cNPn2A9DBcN9HYyG1RXe0aBZSAa+ZoDBxw5vCm66SEA7Gl3zc/xG7rDzDl\r\nZ7d9bceEU+h8L7E4wOunoXV0MQq4C9Afa3HL/+BQSbYGSNJXcR2qLbkZNGVw\r\nDcX7oqreR/lV+IMZOxRMJjLh4RoyBDvMKVrgQdyLP7z7nmudi8Cx3XwoaaIL\r\nC5xPAKSIYXAlK7APcxuy61eWsJvrOg/pcwrr7cqFMK93mfO4NMGjL6EJyt/R\r\n7A3BJmWpU5Zl3ANbNahTeD7B63oLNE9BkNY=\r\n=sVv6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4356e05c5.0_1669283851967_0.31320762439558414","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f155df58255f3690c1327c96f75cb5bbde35752a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cb605f8af.0.tgz","fileCount":54,"integrity":"sha512-051BCt9CuYiXyvn9T/fHkRQMlK2E9v7gJ5YHbLNFol5IEG+HKcGMmOhPVfNUatstfbQEOyJV+bzEG51wUQyOiw==","signatures":[{"sig":"MEQCIDxKhUBE6ebOr2Aa1p86RKwmNG+KZel+06Xmxu+Pub3oAiA4zmKKFd+vzH6emvXJSFzNCJTQL0jN9N5TI8mhWXwpwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0SHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJXw/+IrK/WPJ5oawGxEiat9A8TeZUOaoCibNOE8ccorjipdkZ/GMc\r\nxTTLJhJehLXK/oEvPWjW1UYcIuIo3GLbVfVOlSyofGEUF33Pt6KSX22QtQDu\r\nMXL9E+NNpPQwyJhWQiPYy/p/pYfMYH06it7MwLWtY0IL5XSoGhqOiMCv1szV\r\ntRrhlLdfy+ypscPJT95f6+jYMzXX3eiKXHDI8bqG5QDfksJ3urMEtr9FyD1u\r\nHu3/9ub1nPWVonceV8HWYJBVG946tSCydxgnIytuv6o/uV+GXYoMZxJmJFJ2\r\nQsDy8qu9x434fZXJAd8a3AKqHTQl+Z0nFcs8r5HIMjZBf6I0U0SqcYH/CkNg\r\n2e62LoMRCgy+3xlKTaTmKQfGY8oCVS2mWX7CxgeVO2Qci0okArF61pEXO9B4\r\nekhE5m6TvMmetHGPfODtRS3mVOG3KxaPxRKjbb65BaEvWM4+kEGaLGNSRffy\r\nPoEvGGI7IMVm/8+9+WKkZ4yC7N3tLWy/OOWQtEgsJ/VXym3lTEneSKYEJRuY\r\nqBvM6P4s79vyHrWfyV50bRDKrkL/d9FriFROHGLI8o/aZG1dj5ZwpjIh+FNd\r\n1jf4FoUKdPreyAvroLGT6HhYCWEZTVOAGQz974S4P/n6NmBOhNIcVU6yCDko\r\nt4sGxyniQsS0JOFNDeCzdBWLM2ql7yPKsM0=\r\n=wqUA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cb605f8af.0_1669284999319_0.631734125074459","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fb501db4eb452abb4e63e30734d48a0b2562546d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.05fb07f9f.0.tgz","fileCount":54,"integrity":"sha512-SghbwZxs5HhQ2sYcHxKDB9r29e9Y5P7tdpCEsE/qVPV3yl9s6DyPOFL7T3wSxW0pdjqroB32qvhU0P4066lxqA==","signatures":[{"sig":"MEQCICbWCskE+mcdMfj+qT7SzOWfItdchpy/1u5Esr/JL+QhAiADso8RaEcban/szzW/pUe5Az1ySoWCAwmdTJjCubJYVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6Z3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWxA//T4711Sef8f6rcbOmnGJypQeiZRgqNtXXmXMyONnQzYIPGFW7\r\n1ylpQjoRO5CK28NYCt3JWR8zJZh+qVFU3SKzLIavAC5IUBrK7WR1zTZJsGZl\r\nlr7AyeJf97CCUmdO+EcY5sUiXfquJyi35hLamrIgSYf2NXe28jSc/b2Yo6a/\r\nc9MZejawwGGZVrTv80odR6tAvFmAeuhlUv8/ym+kPJv4sUPOaGANPDM/CD6b\r\nb8TmGQJplBHBDhkOp8mljtfqBdafqeFCyOOpEElKz7om9TgDmqaJhEzWPkO4\r\nvheI7AKjpa1ZVabcHRxasUj0KJaljUc8eQQ/UxJZ5hzhfPVJVkHptl/05tXx\r\n66r2S+0TQbGPAEK0Za6ZIW75PQPMZNzBGbEN9sFddbMcrIxyNuboJ7aNOFXH\r\n+WaZkVR92XRwX9GYMXVJAoN9NWq3R7oYu3UGvTB/BLTjv71hclXHeySyIz71\r\ns1ZlvUD3UAuhZWikQdiWdS1hxz1qnIRjOhPoL9p5N1TnN/ytGsWznJP/5t9D\r\nI95JEh8zdqtaplctjrfpDA1yJOary7V18H5QIVc40t2ErUny3FbbHRRUn/jP\r\ngt4lNnH70M/sPu25GplAKMdiE1ibty79/rDYziDSsAw/e6Vtp6/1yPUKWu25\r\n1DpOtFNBkXdP0/wD39GCN0zEjA37+SJHj/A=\r\n=jb7W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.05fb07f9f.0_1669310071458_0.20841353785441563","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1c023813641fbeb846d270982a05553b7d7a1567","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a911b386b.0.tgz","fileCount":54,"integrity":"sha512-9gfFtczVISIL1aLJNx8t46xfAa70/Cv1+8Lz3DFtX+Kou6EjhTcEtFPCCv75cT0LCDsbDJN0saQtGWipsL6rJg==","signatures":[{"sig":"MEYCIQCcxANBIGsnCD8Xy5GhMznLcz+GqRXzU2aU4wEzvdxO3AIhAMCohjdVwEmRlKi5p0ZWdhrkZYcBubqALiDvYgPRsuHK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmJBAAl5PevUpY/GovuGJngsl6qZkZ/Uc1VXhkP1VNmYS9MkBo/yfM\r\naz10vK4rbxami90FhF/keKTKjfEs14aDmfh/7pE2d2m2Wrlrqhd87oTnHgCk\r\nl74uu7W1cVlDyXHCN7dhxMjLGsAzzEc9kepxA39AG8//Axzsyh4hpULZl0/J\r\no98IWedF0on5oyLcsulZ55HDQMcpHiIhKzsiJ3HJAcj4kcO+qip9nXRfTnZN\r\naVsVczPaM7fdLhJs6YCTFEt8FFwoX7SLcstTzN9dsyYrmPkJNAhrKVE027N6\r\nnVpRs7hMe/k53yW8xP/hffP4Uq5c7iIWlYeTjylvUh84vuvO628upr4V5kCw\r\nXzoXpCVcQAsJ4oxkw1KfqWxYsWxkAdilNu/vV9W6PKa6dRKu3osCu0dPNUXn\r\nW66FOCc/JWTsh00IlJQPylozYvTgSj0MD2tXNQtgqWLxUNEpyLZmtSeGVDto\r\njPWDhsi/sLWk5vOHNPyPOhpL1zp8crWlp/SmCTWSONwLQnb1X5W7tF6Hd2IE\r\nnpvE1aR/0ibiQ9XeUxJXmQDgGhIYF045O0wy0Dv1i7qHN7r7K8u0OnlkaoCb\r\nxla4YTR7UaMLCdNWL/imj+MywltQLbhSKDWzoWCyU/8SMbtSIHCKGa2DpMsj\r\nPHGF8da8mUljX2eY3ZEQPf/Zy2Du+kLp5WQ=\r\n=Ulj/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a911b386b.0_1669654086939_0.6509618843714633","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5af2431ea69b993f7b3e89df3e2ddfceb7b2f8f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2aa8050b4.0.tgz","fileCount":54,"integrity":"sha512-zjswurg+1kgOhwWfwKqwahK8nfUYt0HmmmxOMlp+SfDmxXxDG+Xjut4+XI8vkj8CjM8LOJS6cZjmBVOEiJLRSw==","signatures":[{"sig":"MEUCIA3UgUbWldkje8B43eGkktluOLAIi3dRsVvBtet32IxgAiEAxkTPZKedT1Halx2fB/n6lOqZE6f8pkWWhMXvrWgQfxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQgYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg0hAAgdW4iUkPRk8M/+Lm/Ir5NK5cEdtG99R+W6jYg6C/FBHVOFkc\r\nsXghU6lM6yMVQpMMsrpVyR56gHlLTMhQLl+YSceZcWsGIOYg5nqS3iJ58z9W\r\nfosLM6kRZCcH5x15+Qxh6mYgF5bTyLagjst71eIa/P2QpJGcQqEwzIq8bF+l\r\nZO9fDAAKpFbuYGKsSTbbP5otnbY4BvvnuII+uAen2914cQ7ldGbuw8XhqQOM\r\nH4GCbGDk7wzXFXFzUAylRuNknUNJxmD/ZCuQ1MsRQSzIAYgIkRCiYlZ2qNVS\r\n/UyqzAGsUCU5bwg+/00lhQAeWEKqqyLqQ4Rp9WZiQIzJGkOILfdxWo4vbDMm\r\nQ5a0Lh4wPj1yWw5umLQ+NHOOGh/qTh9hmKcojKEReNTwj3SCtYQ5jUCPWhv8\r\nbpkViYPE4vWK1V2XKWUbEy4FH39yQ8zJEtsTLpjyzkg4rFjKVzCiXYzdORTa\r\n24vcjCTWXRO1B9QbGmTQ5oTAKGaEhcjGK6fiQTzwy2LrGGXoJs1qCMSO/SBA\r\nYNF3Ts6NGJLHLCfv40mX3fmJFN4Wz4MAVd//hN6+ALn7cqfplkEe6P6gNi9t\r\nltPFKEVTNunRPPl97PkNpgLTmIe5bHyFNHYxMgMGls4iykBVmr2x1VTzFL1P\r\ntIqxHOdXZE33Lo+K7Q8/ulxIJk5kTg3/jNA=\r\n=RkHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2aa8050b4.0_1669662744307_0.4446450451332218","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"91e1e5477854947014e934bf2cbaa4c7dcf061b3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.323904a9f.0.tgz","fileCount":54,"integrity":"sha512-x0drz9jvDDleADFnjTcUd4KERVfpKLJnBG4WOTEAb+LdqepLNDLcTUI4W3gBEB3BQKzvJee0kI2gp4VuAuMsFQ==","signatures":[{"sig":"MEUCICc+Ymx0BUXyjQQZTU0AkmbX+1Gu91hp3fHr5EnQutoLAiEA0iPgL/ocvL+S5v1DJs4X43LlDmr+3GaN8cKyRi9yKBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7VBAAiopWeyQOebYdqkheoKTyhK2AcNxof4p/zciMuMsTWJHGN2T+\r\nIj2W/RqbRTtMP7bWiXmLcV3v3/J79lbCGKS8as4/4tnyVxVT60s6w1mg1dfW\r\nJ3Fwc3zaU5AIEPtlAz0OnviAXi+4jp2lOOfNNczbHzf3QoP0Kf68UI11WYAz\r\nlfkSVf5Z4zl3E0OqFqT7IxB1OMDPQpbY1wqFrIEqAVhyb0v6aAOD9Kz11Qih\r\nk/ihLXWSosLdpHEeNTY05sZ+uyEJVceQ9H9nru0DVLMIU2tzhhB9LD4+vliB\r\nXlr1gkm3oun8obLhTbTBfXNNaaqPHYTghu4IVQNymf5aRkKIN9arnYnUJzib\r\nLNOx+IRwH3Pz62q92P8aLsJYi3eSrXtNEa/6IpvBlR5gaj9K31wfv6u1DI1b\r\n8arYD5e3N6+Hs6Px4DooHirXSyTi71nIFsyy/NgYHkuMwPF/PkQnZm2uaOPk\r\n/S5NVPbA5cLrG2oY/CMRB3xme9rQqeIur418MtEIV4bqqR2aXyLYAXxcBTp/\r\nSWpe9h2X7tbO7D+ZPy48hBnTWrQyN+k5/rLDJsKgFlHYDe/KTol1ABC3qPJb\r\nTp8f34ItQKWQxGP8W1KjOUtUfZTbPLZ3GtlXEuHU/sC3iPRzgfDh95vNeJE0\r\nV3c5UmK+RSSP/NdrkgM+bAzXfWeLcMhk9b0=\r\n=HzMM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.323904a9f.0_1669736062088_0.5559806465366419","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"040a5bf6f8772867b17c90e18f74f82d7014a042","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.168a629a4.0.tgz","fileCount":54,"integrity":"sha512-ylM18nckcEDtn0pewGY2eK8horNR5TYn9YNeSZXb3GTV8ACmw6OLxUSBJCd9Q4HFJUCRFb7ViVDfgubmfoTVbg==","signatures":[{"sig":"MEYCIQDsMZZ5ArZva/3pGiiFQQ6rPy0txognP173xRAXQvPB1wIhAJJ5352xGtDCaHQCwpujM4hhS8cxHL+XiESK4OMVPaCV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtwQ/+K6X5mTNPD90Ei+6HBKnq5GWirtnO8Nsbc8hH80leNeev/4oH\r\nKrWL+zcmQpbPbT+b5aFgaibBaNnwc98NYcDYu4s3xYQhHEKZbSxn1U5PKxqw\r\nsbaNLfrmf6ECRpqS0PbUe7sf8ezh/yl1LERkQT4NXQXWIW2nKLFW8FKqWghf\r\n1tc5XY2QKxFWoeqA6cPTbdCzwu/mNcQP/urpLp3YH7qBkB2kTkN9yRYudI9J\r\nhquq0Q7Nm8EwxGx6Wxbw//fuJ7N5U8WuVK20n6F2OodgtzjH9ua/7Zc86wIr\r\nMZp/Lm+UloYh0fGMJa6sNRmKvnGPuLq7jhDJ2gYRhZsZ3gzAUcyujXmedZ72\r\nNMgYm3Un/0w/mT+r2gbbArhvmhS8x+4EPRoFhWqgUrlf4++GOPPBE0oPF9ll\r\n4p6igz0WhQ09Hiugu88e4ZEMnIc45RtXvJuL78ko1CcurH72sClsWv7IFqRH\r\nHRcUYH53mmehWnFEOyfxrxpNTk6LQ2+qbA6SsFf9Oj9HVxVDOqq9u8t9Qfqb\r\nePhgxZNcywOVmAqrNYOLPSU+gBgeLlnh9g4R604qID0ZLwMLiomYieMCHoNI\r\nJZoB5D6KiYBzAxFO2uffd79ktEaIXBwas0P2C3hyGf4RZUVymHt/CMQ5uKG4\r\n2GDDRrNlQnTLwpo13QHYMHF/aglTu805468=\r\n=T3wW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.168a629a4.0_1669740570052_0.8430068939828073","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/segmented-button","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"de96f4c4dce3ea653f625951141f4eda0b710987","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.65c411674.0.tgz","fileCount":54,"integrity":"sha512-GJiTCDAYUHP++8FVgBYyoUQv0OsNAnK64dQX5vORP5AkQ106TRfzdNHzRDbGAEwu/l2nSj22RNE5iVnP9Famag==","signatures":[{"sig":"MEQCIDmil/51n2RSS27Ke4FjI26gakv9UAh7MR7x9TStLNJGAiB3EDWP8N9IJpNSA7SAas3Azphc2YsMsrabcR5TSNZfhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkPJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra0hAAj9F4fy40CuzeainCnqtWXI4LtQyMmInkDj537i+BYlHDXFdh\r\nFRdwfh4VEQ2cODMZg+MYGKCW0VIItZ7tmETl27TKDGzTEie+ipU1CMbF5uSn\r\n2wIYAfXPRO5BL6isiMOBUSdx5PjvyFpePtm+TEzyaczruKjk/2JPbpNV5wrw\r\nQwuOCpAidN8Vw4/4ocP0T53vPl2C2rOMDiWUJXWvlv5SRwqnj1ssrqfofEs3\r\ncRall5wVeXSMIb9hdiO9w9NxiWIXpo/o/QUFF71MhESPvAcCK4lAEICZoXdt\r\npVijk8XLp3PoqT89zH+Wa5ridcVi0+AGAPyPBTTOWMX/ZWDo5zDF1+5FQabu\r\nEyFsKWD51kEexkHuO1HALdNrSs8FxE+5tWKxDHenAChmue0ZuoGHi31Yxq98\r\n8udnLtG6FuVHVaaC8HoXAwAetmrfwzszvc+5BNcZqE8wqrSxtLvbvAQ3KjLh\r\ny518Tbaa/02UzOzJWkb8ioSybK78ek+5BsEhJjR/DO1UvOpKueXZiyYtk+65\r\nPWUcjW3xLV0S+6aPrRQPcl/QGu8Zhp+O/GmuxHEbm8eh84fKGAjNZZhNSFRY\r\nyYU4q7yUYEUWOKfyIG1fwyr58GanpNAmemGFXLsBycBPJjpjBlscv4Y6ecbx\r\noDY4d1Cbk/fVEtgctZ7/nkAFRp3EaSvXSGU=\r\n=y3bI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/touch-target":"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/segmented-button_15.0.0-canary.65c411674.0_1669743561243_0.8330671970265933","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"63c8f8128fc491497ef89e4aef55f5b26c976b8f","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a86d36fd2.0.tgz","fileCount":54,"integrity":"sha512-Dogf0Do3OdEcxmVJmAd9WcJjJiB7iXvAyEIP2N6qUxgpqygodf2bYas7Ew9X8QD+Aq956wCN0LC1P2gqp4Kyxw==","signatures":[{"sig":"MEYCIQDY2KN/74AskHHb9Z1nSkFRIG39pL7ZsP97X/NSSN4/VAIhAJlQ5LjaA8SPhlKYzUsJ3fgZavL9Q7GBfvye5qGmAHVv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrylACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5mhAAj0H6XIrG6LjUJAKXj31iLr3rurj9ncRRiYTftCkAztQgq9Ca\r\nRzDLlSMcBb6ulERTXbr8EQ21XNZOTLZaPbyq114s3g8yn4LFCAcNR8dDr5j8\r\nZ3SWSRISrZElgNShltu/CoUQgIVKtqqY/24u93wQMgd+rcu5Xti+H+9m5z0Z\r\n52QnPVfrSLwiivVqidSuSt21lO9F9dnR4sEtJuU6uyI1v/aDRTFxRBkgeCB7\r\nspMqJpbVM/PH/xEVi5J4IqYOW9VLKDJuphXxsD4CfJTDwP9AttPhWCkx89vb\r\nAkJabxz+2AUKodl7nFXVO4e7Ws0pspqAR4aMnuBuGrdC6J/gjRKcGraFiVs8\r\nKmrCvyTj3jR77+8pBwP3vY9hbMt1OX2b/ppom86AO4W6GjOGMaJ7Qgmz8yM0\r\nxmaF79+nMQlkZlwa2XRpQeIW4atehAJqzEg+2OWKTNu1K110Xi+Fp3KfmWTE\r\nML4Jd8XMTyVUgdNozX4IJPCTX8/+RPCdOe59XlNvfKfZDo3RiIuz3CZah/yd\r\n0XZehgqmOQdtFSK+o3nRZAD2KGx55295EM3w/dYczRN2dmz1RgVWIGVO0Rpk\r\nS0lvgPMEXJmztAFEBf5jszkKpBV8ZYlvL4w7RaYbRv+mxr3uT6O3oY1AMIVd\r\nX+oTEb6KoAj+cqyO8eal9zISoym0D9y2FOY=\r\n=MAzC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a86d36fd2.0_1669774500890_0.8424625786460407","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b176b251b5ed1946aa31faadfc89d0434fef31e1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3a1f46c66.0.tgz","fileCount":54,"integrity":"sha512-ZjipKIA1VTS2gqVZbPfC3UiCYCkJVLAGuw5Sti+pOhFnvrt6q3DnD+WzMIq3zuiUsOOD5bV6XY35V0FLmleSlg==","signatures":[{"sig":"MEUCIFgSgT9IwQVkhCZsxWnBz2BKG98oV9sjjyPw864Ijd17AiEAnJLsdUpjuBqRWN5UOjbnzQU+9N6mv3c2z2IXHLPM/WM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0e2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmodfg//bx8ufEKSDq6imIrxNbPZvSkRmFhji/dxsA3ElrX0AneUIeJO\r\nTQI9p8wAJIEvKkv8S4RCNBBJseqAg7e8HqLBV8p4o73jdfJtvmbOwy67R4ZL\r\n0FGrNfHN6ATajBbmwbh5FGxleHRMpntuFyqghtIEhbqc9ACXXmyI6l3YFeIP\r\nBVmTcXpesH6eId5+0N9O+ncLa98/wPm/r1D9+JNpIjeGGTsQHB5L65hrptcw\r\n2beZGyj9xinzwkhTXMJ1FS5HDqsDVdgKy5bbjcsQWoB5j9FwFwT1lqm7EvSA\r\nL1TGACj1nGpb5jgoSU6sp/Mldk9Mzky8eW7ZG8JOH2WR1XotpJZCS7obZxvk\r\nGmNqBJmaERURsubO1zGcnU7B9tv/Sbcn6LuI1Dn4q9Lffi6+fd2MU9FCashI\r\nqn7rbRoD0+PcmPAR4xXUYlPDd59JhSdRUrJ/9kyK3nqG5uK2Te7SlIn+vu31\r\nQ2FPqtcKH4QzedJdMrv1+HVTc6QFgXQCCF1c9CsH49FE5+iva39a80u989yM\r\nfbNvCHtjnVNv4HvGyBJHxsbQQTkBlEGSZpOq/1srEwQhSK10VPV+eODo6UFg\r\n/bsbY/0AIg+i2Y+C4I4wS94KSAR424SXQGFWEmiYP8A9seKj2EhRgoFWLiK5\r\n0QWTjUjMfOg/l2kTWKjtfzypISuOp1r05nw=\r\n=tL2r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3a1f46c66.0_1669810102558_0.7741383643742481","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/segmented-button","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b541d83e83889c78b276e81d29527d297d43bba5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.32d8a9648.0.tgz","fileCount":54,"integrity":"sha512-6zJBbR2e2qaA4mnzLCOdAaYUdyseVbUCSR0WQbn7PJZVGeL9YncW56gnUoukY72RGqGrPqrDm5j94v7jeg+ojw==","signatures":[{"sig":"MEUCIQDnvHX/Q6udD7P54HRz+TA5OtN5W3s7j+qxc2IvV7K6IgIgUZiuaHrUhbwuNp+PvWzwZxxMOLqXfYIbyJzRSjY7GbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOSaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvAA/+KPVGrExo7iYLy/ibWGY7TvfkNALN+VkAnZ5pT86pRuTFCDqz\r\n0mFs5s2xn24IR/Ma4+8857olirKCScpIErR73Jw4oIhL0itqgn1uDyDWRwQG\r\nRoWmsC6FFe8hn4aMBC3tbxC1Qd8Gs3Q8NFqbyZSr5mXuP0xVkwcx4eTm5kuP\r\nMB1dV06ycUtgYmesdYYTE98ImO+1xTMcicK/Ws+d1gtbro9kAswbBiHvzZiz\r\nm/VJ1BBgDMUqbYTNR7mwIwDm+g6hdM9P+s2n7PKrL3v9JUjKlHISaqFp2Z6H\r\n9TD9iUIhGR7fmG22m9oH9MnTODrV/OHDdDmw8K219lsNz44IENSw5H4/Lr5A\r\nz/iPEWCzGVJx71R07KQveLUegQ7SUq7AFfjp162Esvlo8xoc5tWxAp11attu\r\nF8wjJtXojHUmBjYxlRvY40T9IMs4p8TVaW23pUMNaBymmtOl3fRuHI6YAnUp\r\nWSDLOIG9Gebia4HMcoxpzfwsWT6ouKADF6sn6uNKe/lddxZxJLRtli8lj72D\r\nxxrUnAWdagcBMnOrg58NYSsFg3scMsbIPs31zDEk6UqjzUzVYXe38DeHTVqt\r\nOcWIi/e3dowmc01Yqk+Y3Y9Hu9gEUPoObcjvX4mcNMCVcEmw8COEDMw3vEvK\r\n6S2GWXjH1SOzsKtGVV354bGcoxME89i4VSs=\r\n=ErwM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/touch-target":"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/segmented-button_15.0.0-canary.32d8a9648.0_1669915801641_0.06553002670073327","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/segmented-button","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e80625b7dc2f08b6fc9f048c1fa3a96e78c4cc06","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.03618ab70.0.tgz","fileCount":54,"integrity":"sha512-GJrj4yMbMlNs4kY2MIZ26ub7m3avWazKdj4fFRdHCbkjephUodyasjitWHhYVIwUXOV4xvgqSmwsRbpMEln05A==","signatures":[{"sig":"MEUCIFoMusHOxwZr+NC5kq/pu9mNGVD3ehgfnh7lQLtaWh7HAiEAxH8vrl2e/llGlzjdPw/2Zqn/H9rlBMq7MAax88xl6BU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps/hAAhAc/YXisvf2q+1dRiPD4Ns4DGcvjPYhGSPG1AAL6PhXhXLyx\r\nyLsUubnlTDJ56OpwFEpJ1I4MshOSf2bOOYFStid2yPfZOc8f4EhgBmOO/Vu7\r\nvU4mATQAsF620SyzEtA3atR0IUkFzSLnOCVYgBpvOcn66M6+GMtbJ1mf9E3e\r\ng8OkMAh9B5SWAj/F9d8uhEqGSNMSjFB2GDXQCS5HsUGRh+bas75X30dbttaV\r\nKA4dtFPCO+nAgjAspN6n4L0ZoDI9DOFwmHVcmBoPmrACy1c1G8lpQZIS6GC7\r\n/CvZGWeGJqdR7Z+yF0J0V4A+N6Kpps5QHoYWC9LImraeXd2iUnk83FJTpQfV\r\n0KpUPnmIOl4EzJXA7NGNvSn3SPH+FgeQOS6XmWPOfNuQpx+2O7AW8As8VJmW\r\njnc+ERB3yZexFU+XqGLPNgZDjWk06fRfzo3lFj07loyvLYcOdL/xM9scqyK2\r\nsOExadFeTNxUlIDs3FJX7fiYWNxFteRa5KWLeODD+LTYTwV7c7xiSc8Gs/Ja\r\nI2kvgklyyBZaDPVdekgpGSJ+DUkYZS0rtJl4LrcWrxeTZ/9YPuJPcU5OBSKd\r\nrOjaNfvvyeMxBF7YzNlxf/NTHula7lPPqhd+f+plddG5YJyy/qJh1z2fAgxN\r\neX3P4P7iPSNS4Cv5yFd6Cr08GZDwADeB+IM=\r\n=Yu+N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/touch-target":"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/segmented-button_15.0.0-canary.03618ab70.0_1669928113775_0.4534873292894306","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/segmented-button","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ac4c3dabe6508e428eb9795fa2ea1e55d658e90d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.68aaed940.0.tgz","fileCount":54,"integrity":"sha512-4xojjPORcBhc1UtDeS5H24gynp3uGuzlZJq4JCfVYYS0lDmUlcOU4LOQXUypq3S7tpHBQjAEDStkzzGfR6TRvQ==","signatures":[{"sig":"MEQCIF36zP+B0PFI2kiMVsCUgJTRK/MQdfUIlMbAULd8eLnwAiB6EsFATCJFWqXWti8X4bwDSc/qnWNzgy8YSbbVVZv86g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq0w//YyLkMmgwF/ugjPO/DyLi71Dn2+Y2h+mP7A71DmkuvrKEw5/B\r\nePKPiwgwoWziOtZtPUSUUgn4RKatMGJxDdFDDbuGP952og4VpgP5avIlXHqy\r\nASzdbGr0niS3cwFirXLvdBlor/J3KUmOKv3iYxSjcrHinJnPFOp8SqBEyol2\r\nNqfOxin7L2OOZUywAhEGCKmS2T/ERH4IeXjoYqFp9EVshNJtpFYrqvdNWCj1\r\nXBuv+mlBMFOhvcCgj1dCfN8gs29O0V8S4JQd7EiIGy+EtvxM/1gCXUqW8fj3\r\nUdSh4x7Owk7h6ffBfjAdQtwkhwUU+iWwxZFIPQluhMMC/Dy/RnAMY6JQ25qw\r\nYvMcXXJjUb7N/WShf++bn1Ua3VZMRrznrxYgbF57BLhTZOo9PldpzcIRozc+\r\nBu5xeZQJqLx3+AQtG4OZSynTbDhwrEpuxZQhNdttincZr36LCzJUetOTAV/a\r\nGKmFZt9M+wjbcUNuK3EyATFcTwtndEvQpgdNx8uHRalL7yFRJ/AlHJxXQztQ\r\n4nySZwnbMPgTyWghnFh1uhKoU1rWeUQE9YoQuO/DD75h3trSo2ropfrRz/Qp\r\nLrjA6JTb9UUoMI/aEuR95DIo/xLxBiglBs8kBkItGrHbEgYTSw5FLq0A8mnC\r\nKegdgY3FRQrGf8e69l840xTXl/CzIbhO3rc=\r\n=NbZV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/touch-target":"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/segmented-button_15.0.0-canary.68aaed940.0_1669929902094_0.47820644601614326","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e308bf6fbe32c55a1a0fbe4ce9e9d77b675052d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":54,"integrity":"sha512-/qFecmP5QIa0H+M7/36ZFiXNoFUn69ttvJhjgcFN0/NjZQbRmlpaoQfcM+o647Ng9IRop8MRH3rHATcYumz32A==","signatures":[{"sig":"MEQCIEzfbTv2EQ7wu8mRMBLb6mO9tt5xgntvuMpr2qtV+zAGAiAnQFoYouggjCOvN4o/c0HS4iuR2PomBbBD+iTWAe05aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":572297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Kg//Sw9jNhO+59HeUibgJWb4ar8/HSXKLKtL9/J+8SbEkdQc3mS0\r\nquk+/Pgr0/HceTXT9cHhuUoWSX7HBjsVyCTnsVFWtXChm1Tizfne5CRzT/lb\r\n+qjOGtmPNtSx0jvgz/LaMVTWmJLITghih/lDALTNSkTbgHQ8YUjFTCRSRLfy\r\nehP2hPke50O8EKtjzKG0Z69L2BTJC82EA3IS+DI0iWvZz/p5iXMGBV0BrpwV\r\nWwx+0kNOnOHB30jA+qGnhJ+/qu/3WXaAbSF63ujXvOAaZbmAQs+Sl2lZda5j\r\nK5XjxHiml9UXhKKx8GW/7i676nNBAT5qpW8aqjqvIhS/fRlQ82XbBGhV1rLO\r\nu/zmb9we3gwsIrAz7siJ0tZvzkX8CIpRc9sw2GVmjDa+hco6wSs815G2SD5M\r\n2+irMJl7ZU1oN4kuLqbhh0lbCJ6YtK5Fct2um8a4nSKB7osew68/cGwUJqGX\r\nNBcZgVMwLaVa1abOj3cAWgOJhHYf9jXrqmHiPkfUqxvejwX5ZQSsVi+DRycM\r\nF8p+Ur3CXNn/T+nrXT553O6xFHUW57W2hoCVNX+WngT7LxIK9U6oTMP6dxR4\r\nsJ+TC4mq+IlH8l+o5m8Kh3woGydEQrTq3BxDCN7rYrVND7SqMCXQuzOTxskl\r\nV8v8rluo7eOjBWGZxq+DOn+ZbgxUIRg1acs=\r\n=bZsX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f0a0bbc75.0_1669971737234_0.4414901144335639","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/segmented-button","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7541af149150cc7253ef994444b9c5f03b77cd29","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.dd99c8764.0.tgz","fileCount":54,"integrity":"sha512-fujPvASywepszpz/xWG1JYf8KiLaR+dinShtGhzOw4tZF9SHd/VgxMArjg1izQbdMq4HCc7oa5gwt0qfBQ4R/Q==","signatures":[{"sig":"MEUCIAKBYU9hBcHBQ1cj8zAfvJTkc7PzlZJllW0mVt64wPmyAiEAmb21N1ifE0EdQtSYqd1tuYsdR4YdFmJgLYex9umFHZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigVNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraag//RZ1r3d6cqH4tZmr5mg64tKK3oYs/LkpT9Geo80oP84RMZl+C\r\n1tqq1Py2OQZKguHcYPsh6/ASSHt1J/W6JBmusVwwQbLBZcFRaeJZNoEG6Q9X\r\nqYqGSMlWe+Dg4A2C5Qeuf0OGW+Vg9MACa2mYuWM7svKlgptCNBAyovf7LPcY\r\n3fxh+IJdNr4dh4RfhdLOLPMzXc+d4FfulHxMA7DKqh7/I60/VvShfojrM86P\r\nzkjsuKqgSOBmT1Q8lxNsO6nIoYjqtApDfvXKrqW49A4wovPP3YXpl9nl/WP+\r\nxrtKTotV2sZ0H1QKIRKRWwcjy4Wy1yblHMSVOiLtN8na4K716Va/pwkd5eKd\r\nQJ9+UuudP93WLf4Ko4GAkEUuKWA+iMpVi7pF2ibkOQqNiLN/HKM+qx/6Tr8c\r\nPKXmCC7D9VmKHRE5Ylk97/XaemOX0kXGr+QpWT4G1JsiqtujzUWOdH3HE7ub\r\nR/UFZYE2D2kFIASsDaMpokuWP/+MnIoR0/LMofCXcmEvgHomeujuXfaPKHW9\r\nN7chVPcOFQeIJwRXf1l6KkJ+rNdri61nGl+CXZhh7LOlYADuKTSw8gnoC2sf\r\n5pYpHjLz3t71NIg+PoDazXBuNwtMZU+IjRwbFwxlcvQPEc/Ogxz+WSIKe/Hq\r\n8+V+VQtvDA3I3Wyk8Zz35/R7HOIzbdmW8pY=\r\n=zK/8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/touch-target":"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/segmented-button_15.0.0-canary.dd99c8764.0_1669989709500_0.12577393694168904","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6f654dc46610731908ab487922c90968e2f99799","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fabdcca3a.0.tgz","fileCount":54,"integrity":"sha512-4L28bsiGQW2BAKZEfa2rqtaOx2MiGWwodxygGnkF+Yi0mZ3IdE9F3a6dlA4X9mRu7HV0v7JBeobFfoANwfd04A==","signatures":[{"sig":"MEUCIEHOwSEwhsDIalGSxSld3LoiFLaDAy9y4GoOCafSROApAiEA6Tx88T5XEmQlt2zwRBpacakNDdOwIGZHixvlhttecvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihS8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoweA//ez0G3p9ENXEbN/ADuZfymKLiP2xBgblqz83eu2DWPUKmOh24\r\nG8OisDxTBqZQKPOfpqv4Tva6RK5X836PZdfHbrwXWjmQNO/+S9E8Hzh/GMbq\r\n4P9hihzVBdGO/2q7qVr7gm2d8eEZ8FoKFIUL9KrjgdK45KNJt9Ob3Yvr7zwO\r\nXoHLR2pbyqG7+w7B8Ah7IxShPkhgwIzAbb6uSM2SsZn/4VHxwoUQZb4XdQZY\r\nHTVF/p4mkSEc+9hjXKVB04G+z8SeBgsfyRSY3165xNawnbQVAsvR7mEtQ/W3\r\nfggzXh838+Dkd66V5Sx4a3qgSbieZepIxlJe83VCBum8HrdtZYSzLdwCcdGw\r\nPU6E5sXn5WwrIi3dbDuTrbhKhKZHZBSZLtsChhG7Z/SGLv0ZGmCC2kestLRm\r\neJl9BQIVXOeHMPcjAjomYuxgySu0CmxvqdY3zR7oW921IvYf5IcrPK167YE9\r\nVwurpOsfWzD3GjnV4XWXHzwuloRCDokQSJA5RAknRAtU73Qrk6nnvthV3U2A\r\nTfKJnszz0ZlJtsnes9u//hVj4xzg/xGBF442ZtKfy0NhGQkMkUmVB3EKe+g+\r\nhhMmSjUBhXmK3IT0l0iY7a1bQJTudczaa9xBrUsPHWKRP5eOkrvJXWKSiRWB\r\nZctuNgXjOvcmQCsS0XsTWQ86X4Ds6sR7pf4=\r\n=U+JE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fabdcca3a.0_1669993660524_0.4761014703566304","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af98e533899a083ffccfd8c6be4d69980a294a57","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2d26722d2.0.tgz","fileCount":54,"integrity":"sha512-P/awfNr1v2agY/3gdG3S5eTXosR52FmZqbOVftxketP8y6w618SMQIIDliLUK6LSajDjCkvwlplh08qHAeZL+Q==","signatures":[{"sig":"MEUCIHeFdVELjZ80qiUL5C0C8glrkIXvkF+qjhkLKZ+wdVFrAiEA1QNl8n8YU/GRxIAz/0jRuX1j59t0FIQRAahOMlHHnjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOjw//YM2D5XOT9hOodU2+Iu4mvhksM0UfcHkRRTeafH0SYi2mM76T\r\nno9wkCZI5genG2GGS16yOTBaZaJs8PDkuZEGtXDDtgWyGx7soih2Jnk0jMDw\r\nFCEiQhARQPJRsqRZ/yYYzCVr3kRzPqiCv2krofHGYDbRybn8Z9Ka4Oe2s0UG\r\n/XmUjyK3nMfTrMu7piaSAqrQaINvN5gRIbuzD4PmNJSRefWPflMef69qBp8F\r\nbHKCa17uFx6ppQaU8Mtxzw3o7uSOTOfR6Bv3Whbz7el418br+X+9w8bs81vt\r\nIloxtmwvJGO/BZdgPKKf7YfQfL2h6wtr0PCSB3mYVe7014U4DvQ6iEiJbVC6\r\nr+cQUzMhjlK20IdqBS+6REFBEmnGdXBI4l/p8qS6Czo8oiVM2xeh7xYxmDHk\r\n1G+ju3edyvH1eW+wPcaisOiMFnMNZg2kkYp0AkqtzIY+yRD7VV5C3WSvSaQD\r\ns9TrII7cjfH2m5KLACTrCAMUlafQMnrkphB7oQ/uEu5iSdy51YUDGpWejEXl\r\nkmQUbM/ATUV2FOhJKjwzScQXriehcFglDqsejP03D9Dk7L+ecCC8Ru6dpb2C\r\nO9qaNXzf2pCre9d5X5FwkMBFhPyOzvQ3lGSg/SE8ZLKGH7BORVoRNaHog/fC\r\nFyzc88ZpM8MONV5dXy/vM1cbKB9mISDZMfU=\r\n=ZLse\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2d26722d2.0_1669998445109_0.36743668603492297","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/segmented-button","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"399a0c9ad630d8d578fbb88988bd9a391a905d95","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":54,"integrity":"sha512-r/adkD+mqKsLafhZ9QIIu4hOk4zk6Hzwj5Fdhc4V84wbBEFsVBNe8ulx5AqqPjUMrOsq2dwmXEiw2+X+EVgVRg==","signatures":[{"sig":"MEUCIQDJQBkLhpDYRMPiUsnVRrLBSt5qaBE8nqYgHoUeBw/d1wIgMXAJJyAF0R1qUhL6FUjXaqa117uL2WB+TE2A2+16PXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijlEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrAw/+Jumusct1sEIpMWP+v8dFyuPUNwlzelFLTFxVLtwmWaYXBPSC\r\n68XwALun0M930VhCjqI9aEdRpykChQmUXvP1HCOVHRTIEC+H9wQ9ItTYSYY+\r\n7bKTSLnQlsU+xcjmtt7cEbtnoV+3z+w5ofjeaUQQN9V8oNFmwTY1Vz1L+2dq\r\nZr85pH5EEHIuboYCQABdsKnAWDZPsgyaLKuxcX91JURnsUUV2SLrl5wmdTmC\r\npDSThlLM3T8s6bdESKRztWQuRgScSZTmatfx3EyqcRyFyjKhh1TZcgW0emeN\r\n8z6Lb1tDwyeKxVj8epAAarALBDci/Dbfe9B8B8Plip4G4hl/PGUNl0BA2aQj\r\nHWmpF+gWuUc6AuTZEmvdc0LBYl2hCwSXwyh8H5uRi+FopUVcGnKHaA1aFiTF\r\nimelh5uWNBB97CJU7eVYdHJuPrBhy9Tbel2AgYvm1GqCNV5w0pqn+ALeBmiq\r\nQhDkrnRBW5qIEb7yTdyH+jCvrQWr9M4j3YoqehgobD9wtmaOvzZv1fT80Nmv\r\nOYOBMsE0+PLXVUZgdsw779TGEJ1cxqJ4DxQ3Dw/d5LQ34KdH7uULTzsKjEkn\r\nSQgrJAz5iterOOB80dQ3MHLAEwEOWabdc/FTorXAgq+C6/yHLlA9r6d5mPRS\r\nlDizwAZH51aoXHuoxl9+DpOyq6zMmrjE5D8=\r\n=bN8F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/touch-target":"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/segmented-button_15.0.0-canary.eaa0c3a86.0_1670003011753_0.7038966957979609","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/segmented-button","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2086bd0850ccbea01ac85e1a2a9521c7ef74cdce","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.79a613bbd.0.tgz","fileCount":54,"integrity":"sha512-JKZ+05R+XeOxYwu8XiVPTfipbR2N3VTftakT0UF7/DR0TyUrofGgeGXjrmDPwR4dpUeHyZESozR+GdaQrxqEZg==","signatures":[{"sig":"MEUCIH4dV1RtvyRhvQrbT48RBZ/JZdmrWO6iBMjr5Or1AyGEAiEA5T1JvNYt+paezsNhHx8mkWOCoKXn7M4qKE3H9abco3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1EDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhbw/7BItIrDRQM8l4n1Te8ks5+K/dUZsQLb4HiL2gclHMducu+lYA\r\npv8LU6nOpma2me6PfNXkSW+p/9nZZxe1qH7lCE3AMP1XyiB4lhLv9VS7A7ua\r\nh5woPZuAgvrz4WHws+8r5C6jW+Os00FgwXv/ai0Ete40qtrJGzrdOc95I+MW\r\nd6CGLU3Dguq4isI3I6t6zIzUWLNuLudzunUAKC3ZGx2h0/fgHYlWfDFLyi8U\r\nEiV/6FFQ4AW3K3ip2Y96bLc4/2DjbNZum+gYuQlSBLgLCx1n2AIiZdp1S90M\r\nmF/UUc3lEGGf5y4StYAuZoYlDY38/deAB3ho9rGf0QNb84UhcdDCJ3Ft18EX\r\nuNXLjMTpKwsSf45eb4sBwdA7uKNy2ZcgBtXivV2b9tgStX4EpCqPMfQM+UdP\r\n02XvV1NU6nlQH+CqKPLjFmC37G74ObW8WiGKhDDQtjnH3jbYx/iA84LKH64H\r\n2TAb0S1I9csBQJdgxnbysqRPsRE/DTVedLgyZiTcVWAFtTKLkqyocRSR+FX2\r\n1zMloKSyZ4caZ/k1xQ/ZYXs8IKlJLj+GigesUfkEK434e6Y+JdG2CyrIJor6\r\nxRGr1hepBMhVRLVuZ/a165yhQ9IDgxV+7WK9RDY5dgSEZaEcL1awZCYpITvz\r\nPrk7hrq6y37PH29WM6wM5edASuGIfJb0koM=\r\n=Wwzl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/touch-target":"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/segmented-button_15.0.0-canary.79a613bbd.0_1670336770775_0.6442718521537474","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"42c8ca1de08fbde1aaf79c30dabd348a793349ac","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c871fe61e.0.tgz","fileCount":54,"integrity":"sha512-m/gz7Xwc0LujOQl2cPQsV794J+zLL/gwk48qw5+6q1xnINOAvf/iPmaTFOv2dELAwo4oRgVIiHBmL28AZGxRkQ==","signatures":[{"sig":"MEQCIGpUtfD8IGfK98AZdlfPZg7oaQ7QJ7v8uZmVFBzJJ62UAiAOVAyyJlIddEO8XVm46TZH0sE3AcpUyttNDb0kn4qBug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzow/+MW1sVlmOPAy1wuxgVIr/skErmV/u8Oz2pvQ9XYY/TvJXv0uD\r\n5Gd+VMnshpDrm1WPPN+mqW2Fvhowj0xPeu0DtQHq9qjeRUEungQksp/U2617\r\na2RAX77X5QLVdF59o3knIo8dGc9LJ1H7HHMA0cm05row53Le+RGzINIxcSdZ\r\nD83O1mSVKMZyaNauYmXxJeOl/wL22s8rtPgd/76V0/NnxdlTFpUENTqDlUA1\r\nEV2zppMTuFBWRRFefK7VXsK6o06iWNdalbfeJnmU0h4m3wzjuQLAzDrPewWD\r\ntM8sIf6CGHVT0qH/wVkrfdXxpw60M7YgTIfT7dZj1b2hufFYta+kUTp6R6Gl\r\nw4iD7RWN2SHpkBqxHe0e7r76QzupmCIyXjFF/5150uh3Vs9njjTTNgUVFFya\r\n8DY3BAiDKk4Np6DrXUNVjsap+kX7F3OXUidllAJatMS/OuzmnEFjR0Yb64oP\r\nZXr8bBMXwdNrJ/8uJ4Rwec5Y5fFw0lD9JOLiZZj834ZYDyXzpItwxxV2Hz0x\r\npknpepjw8ZP7mJ+fmweZNMBid3dKBFkOF7ObSABNyxIkCxIV+33kbxJsfOG6\r\nFeCL4vVzWTKmqorL1Y7cfMmleBsYwWCkOBv83CYld0bldMDDxSpDM6RSGG1u\r\nUwGN+p4ZqiKIQP/CqB4cDvg9Z6lRssrPgk8=\r\n=I+jp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c871fe61e.0_1670399560959_0.4590941997841156","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5a352da383c7eecfbd77c029b2415b0015cce15e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9eaee7936.0.tgz","fileCount":54,"integrity":"sha512-OahP51JF9Igal3NPS3QGlWp+ll0rCf8OyyhT7BewP8we60SxmJLudwEt3P15y1SLW+k+YyplDN10iuuLGI80Wg==","signatures":[{"sig":"MEUCIE1UGl5rbYeZG5K+1SSghpPQlXu9FyV+XDGk+0Hx1N4SAiEA6PnrBQz6LI9+RyXUkBvOAjNd76xCGD7PAHuQw2uXHTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo35A//TixTqMdIwLmZbLzvPiqg3P2Vp8IuZ9Yr+dXEkakXQkjrDnik\r\nLhxPUxGOdwm3FGzCJeNK3TVB+fzkOojN8f6PKOABQ/sDM8TSOAqZZJ827cTd\r\nAEpUEFp7i5wUmu5tZd/p7CzukM3qmpALSXOCYVpcmU0Duxntb3wCrRpoZ5/7\r\njTjMRTJh4nDhm0hZka1rVYT9mdfhBOFyO8k/EpUppwCqWzGu0mVGKZ0pW3bR\r\n03ss25EjdUyGcPIsp4OshJGe6Mh6JLlBj+Hz6HB+VOvpF5IVnUtiM92ywnWo\r\nzxOraDa6VoWM60QH+hHvp8cxOLR+6/gYiaXQ2Mcv0Ux/8VwsF+JJB0YFpdNE\r\nz7ELRxh/fNYH+ZFWQ1LlR/ww7LwmtjXNYh1XqcHGTxJaB4v31nE/gWpR4Bw1\r\nZKLTt6hkL6oUDFHN0UMFhf4oGudLfsceBMYqKF4CHNDxGFXDErAxkXgCj2LG\r\nolBqg8adQdrOzcY54bUZVUhTMEQNOImkGFxiZiIjsOBDGC+eYTc31EvBGmv5\r\nOEF24lXd6BEor1rumMjlUlLe0OJ1+SMhupiScn6BblzOuugPfnHnEG7v81/+\r\n5QcogkYwEEJakRyeMaTDX5N/1Gf9fTU7a3h7jK8q1SgeSmwXGJSjqBhXRWf8\r\nVXoCquTAHSP5KYCVnUgQn7jNwK55bpcbZRk=\r\n=4vLY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9eaee7936.0_1670443430407_0.6032041002948281","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20437298ddf9ef8d61ce0e5c77f5b31cc155dae6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1d37bf601.0.tgz","fileCount":54,"integrity":"sha512-U9nfSqzYpxIB6/GSueHEFRjvavNTrKx8ndkZalDbu5X3xntlXSkh1NpS7NeIEL8KStuLZZnC7Gu5tNEuH0eu0A==","signatures":[{"sig":"MEUCICexomPIu8hmLAd8s91xPLj2nLhoVlEBRejGjVJ6PWMIAiEA70EP2gdCnMp9U+VZj5K1U3TzJVG3oMfIdjj5YVCf134=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEGg/8CbeyqkhJMs+sFLWEP1lJ11NEaZ54YC57RalBaICrCr9wXgW9\r\nknTylIanJKjKO9yVr1xD5yHrsbQ2D/zJTE8ojeWEUYny2Gvay1Q8UWbJpypV\r\ny4eec72HxNTefiujjkAeSoU0iHL2N20r48IXVVoUwJEsuBPydnYOm4c1nkOi\r\nXuqPDBfKatJZmHtEf5NXTWxRdeHf7WqR2x7WoyJ+x7cWfvC47FuGO2ae4DSi\r\n1MkkleitWldX1FHJ8Msd+FtjxWOFKUSIdQT5rQodC9P2ayPhG5pSJ2yzfNZr\r\nZhJyKyqAJmko9/jx/4l6XDN2SZOthLeFzic/Mxi13WW9JCdg02tYXV1jAgtz\r\nJ021aVVKQOglNg81hPPm5J7/ISduEblSDQz6oYCOO67kMIK5TmlAQ728Zzog\r\nmx6uguig2Va4SxgXoznx1yiI1GLiJRFlhC6LaHlRbmrI8mzt8vlouBrVwVCN\r\neJ4HAkFFigxNMInYHs446Pm3MXzmaWzqIUR8EQ3iny/r2JDypFPm3Y3aO0Xx\r\nSATqE0VhBO3tpbJNTQqMOdUuxfaEEASD99IzD4s+xFT1NEkELvsEZvPlCHoW\r\nAAMi/pTbqLEEl9TnpghkXOVlXxrA7lAphmkprNCMe6cbMuUp24ZW2PjUkMCt\r\nyV6Qzm3LMdJ2yr6hdFctq0nBbLtAGHTf+p8=\r\n=JIeo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1d37bf601.0_1670445727947_0.024359483122485814","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4664520cce45a6da7e79817795db9942df017349","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a5fe069d5.0.tgz","fileCount":54,"integrity":"sha512-xUJ3ddikbXn5DQ3Mj+oMw6SKLsoQCUUi/XYVIWpmL2VFKpUMKmf+fI59HUxN8d+95SMYHvTQC3GuFmCOxWV2tw==","signatures":[{"sig":"MEYCIQCkmQV2U/JHPdg/gBHtzBM6BsOpikGLa65xdcXagzLjoAIhAKKHBQCqxUQDu480PJRmaGXzgQRvML/ijvG96Ox9ajKV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4I7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwxhAAjWPdTCUmkB/0/J4PPJNxZ7P7lhrpzpEQDVuuR+zm7oAmBst0\r\nlbIM2LTDgBQaLGLO01stsjiLT8sK5imSrVLz94xvrDD2hQt3ORRzPEl2lnL9\r\nfYDBcl2nWoof2TvQMUPk9A4upPkEVQ9pZbSOVkdsZrQ37NRX9lD3H5FMcHre\r\nDvbEGZ5HJ8a9Da+uOyfeTgTZZEtXJzqUVYUmZycHw2UpQc4QbiJ7Daxo1dq6\r\n5LBCoYUWD0O5kK2lng2IS26v2w5OjHICFlGW0+EaanMapkuxIvQJLG8kJfxj\r\nYYBuYgjCpux2hqLY5gf10Qt0JX1tQhvxQR4OQ1pg44OMOc7A+b7q7j9X521P\r\nD+d0k4fxwss9wvW0hq+3vS+ZYTw5iXuEUR0faFJOkNukK7BCBdQMkyvm/dU2\r\nMrFUw1LrZNFhCLJKPmYjxjFpACX6BqheAcvc6hUIik7rV6HI049G5UfoHZA7\r\n8+KvQCFu9u2OcgdVZKqacvCvqaZlmCo8WqdN1wRjkQ5z69isFFmQusIDMYFd\r\nu0qHc9YfeFkNknPOj1XnuyB4nnZ2yfFaulfrT1idcmDju5JbTW/5mGqaZ4kk\r\nuhCFursK2WX/fj9QqsWBS6DVqKE/gA0i2bz397MbrAgwUSd2kZeOwHy/uHzS\r\nZfQ0AKjyAC7Reh66HHPYVfEklXCzSQwQnsc=\r\n=HMU9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a5fe069d5.0_1670611515676_0.17300919301629647","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"641b40e351f6fae13c15a797af1fb2b5b051c484","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ce8b5326f.0.tgz","fileCount":54,"integrity":"sha512-0+5ki2KsILC/2nD6lHSFe3+e13kogoPRWAgni5aLTGMcvuFtgRw5ki1qng2nbygVGKVdF6PbbS6+EVaRt90L2w==","signatures":[{"sig":"MEQCIEIRmdnQ5GfnJIl1bbwWFB0J5Nm0bY5XkMiLTBU0j6UIAiAJC9797XFsoeZEsAR9y03lhqVjAddbotrgk2q0TW4zCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZAg//VDs3ypZyiMC9cIA6qg1CGyilh42I6+LCSXgLvAsL7dwQZxH/\r\n5btE23LsIHQg9/ZQIJevDNrNVULNRL43w+HjF29hlE5IlloADcfRsiO4Pc13\r\n6/oEqIfrUjygHbXH/Y64cIwzBWjccfBCa9h56XAbWw3NBBaFY+nhTxXgvvnO\r\nhItfkcFPn/zH2ZLgH9XmjIqVlPWFt0BM8ohSUaLRBaslOoMhMz99N4/5i0Nh\r\nnhBYs9ZV/HFqeh9MWVuTNxWnat5ngvPC5XvOERnsDtRDfnkcomnqZOMm5qdC\r\nrhwcXCFXa8tXAU8F5RiOFT38/sb6kI/idZIAqzQ3Uw2DrTvnUaq1PoXhEpn2\r\nbSbu5YTM8BlMECbxxjwAcAdsyclhi57Cu38gPUJzSgZtEPVrnqfyzJxBmaMS\r\nsnXVK06x+GD8tTAHTPJkG6XUbOG+skIEPrHo3Uqw+IAefWaIgaR5P7luSYBa\r\nXjVAVifHJyQqqe4KEqIVT5NLSopOgTN7zpoTgSimsJrsBi3jw5jIseyWAZxN\r\nR43i87e9Fybr0owNMb+kOdJQTaNtiD9TZGJ9l5m2bvC8dxx34PVlZhm+cY8O\r\nQbn8GBXOrrkCo6gVi5QLFRCv9Go0DmTHzLVmXpUg3balSZhSZ5zJMKvV2Kcz\r\nWc7T96s4CeSwJsXmA9NdJ+yQeBUG5o+lzHc=\r\n=4Gz1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ce8b5326f.0_1670628699068_0.5536939921522199","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b73cd974ae0dbda1c4075a658a6327639458e440","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.43f5323bc.0.tgz","fileCount":54,"integrity":"sha512-7aY8qnMZhOVawZ/fsDcqGE9OZa+5LleM7Cg48c0AWeL060+YQ8L19n07dS+1ZD2oxjk3JjApotN1u1DN4WLrCA==","signatures":[{"sig":"MEUCIQCapf1rMX4eC9iRtM6iNAshPJCMnx7vUipw24uZ4cuFSwIgNcQXohPiMMEIV3yYsr7O/2Du6TiSaCXaCjtY1KQRP10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1r3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd+Q/8Dqy+xUAlia99ZpMkutGUzzepOMO9JvYO9zCgDZvT98B0hXZ7\r\nvW4Z4i9LuSc2Rt8ditxpYJt+/QYOMcTRGaXfFEOIDHlLxez4yRIgmjCzhHmJ\r\nQzS/Z35Jx8wA2DJiicUpG+qyO1FCqJTMP8jDks0V2EsNyuFWiN7pQoU1eiwl\r\ne/TaQ9yOMhZ06F91e3QHISJCCpShL/zt8f41iPsyAK8A+/pgmDE5/NMXx6tI\r\ntzJB2Qa+hm+C1mqbvKJiYPacDFXqAe/HuKHADvKDnFeW6e63rmlezpliYyQe\r\nsCYSLEZ0l6QLYTjd2L0or83pf4ki7QgWxka7p3zoahT3d2UcB7xn9fxFwsf4\r\nYsiWutmRzNGYzlaDpW7mojSMu4PXbXj+iVdb7O4VR5rLHj6V6hAVAb7bSTdX\r\npCTsLwHtGKNT1GSkfE6xOufEccz/OlMMguPcdh6fdn3VBF1diPVE36/nLFQX\r\nHBMo9dIL/bXlo6SNOY+z0KPkyK1/UlE1nnppD1ApNaK4jQVA9i7Y33foTwyg\r\n5ymKwAu6cmJVuP4RlpaoNIL2mXWJ4mCd9xyd6shBW1CuJwPqykf+A5yTBjlY\r\nRQPXaWzCvzRLrt2keN4EjRH5Do8lDN0bNsnW94/xVAzCbpXiCm17SYh6u2jn\r\nm9aP7IW+TLAvveoZGvt2ac1SlNZ+UDsTofo=\r\n=pVcZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.43f5323bc.0_1670863607727_0.14800357287393862","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0bc7fde45c2c8d17f9dddb38ccc7b962a11487f8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5490e32e7.0.tgz","fileCount":54,"integrity":"sha512-GHO17N9DfsxT4vlubDfLjnigdxm6H81JELrPFQs124HlidTIzY8mux6ajGI75XHm1JKt3WmuTYXjlg6OVviYOA==","signatures":[{"sig":"MEQCIBwY6BAGXxkB0sskPMQCvI0IZ7Z8iR+BWU6mWer8y0wzAiAD1dmDmEqXeTPt4UlTMSvdRvtF1WFGZ7esXH3vwBoCVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl17MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYlxAAhvf4nGcbWfO6Pbc0M0xBB4x4uFjJ7lftimcLkUm0i79QtZ4Y\r\ng7tfCxlH30uT0t109ndOiH54KBakoHUgaXYvzBnaeKjrzpVvsLepklywTA3Y\r\naE2E38ihyL+EVl+3KNI7aCzSgImQ/Ba+Tz500PLYDuxOv8OPaNrHpFbOkVws\r\nvDGdg14Kiy2G1MkP+T99FXhXTFyzZvZrhsO/M2lT+PDxcgDMy9mAUVRRoILc\r\nDyEMOCKCThXPNm7ATQU4nCv/80xk66iXMaoKn+HcoE/qCMZ+wyk0njHZcoUV\r\nigtwjHlmLuu4odov2Lfx/9XEkh8cTTImxcsoJ/2tmsoqNLy7Fns09zsQwVr2\r\nxvXwrMuyUPtxwNik2r9K2xE5d7lKKSDyY1cFSKuMAw4jvbpuixikxGR/bt4q\r\nP5XeJ5fQ1RuYa+SzXmbiP2GkELbgTiszHETxpoVwmztjydxsb6vQ+dIucjM1\r\nGH8OVnBnJFS4XfLV2rAF8VXUSJLaa/5UdMyn2AI/UIxHHDWlO2n0YTNHtK5t\r\nq5YkxKByPtdjXppdnhEUVZ43r7rQw2EvSdXUoITPa0N3im4Wkq7xNDTks+eP\r\njlI0oLo8aGU7/wehPC1yGdaoXQYaX2rOqYSGCa3TUuN2Si9hQ1DonqVLLeuk\r\nr2/I4bksgeEyUNDwMYUcde8A9U9smJRzpGs=\r\n=gp8K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5490e32e7.0_1670864587940_0.057190177299087264","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/segmented-button","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5a7bfe0bcf053a418d6e7840664300c5c7d25014","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.817002c29.0.tgz","fileCount":54,"integrity":"sha512-Pqv8h4hiK30ZUePAKy80iy3wH1qkO5BQ7V32iCLhxr7+4m6X84xCq+wlXEZWS1rJq0gJteFDle+2RJR3rjcrjQ==","signatures":[{"sig":"MEQCIAi5/yX1l3FAGWJ1xH/cNqvvijxP1FJTC9JV/x6dHr06AiAWkj5VgeDAwmQDWiznqODqgv9W9qU74y7vYDkVa8hQPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF+g//T4qG2vHbhMZxySR00w2x9U7BO3TVn5tzWWAZFvgl8vX3pr4F\r\nHxd3pd+bqpiv+/Ba8637e2z5r4ZalvTZyeCwCaBXrAm7Yi8T/ln2jildJqaP\r\nbjlvQ1Z+oSP7xk7A3fu3hmuOp1pP/TmY0YUKGMTgk4A6bU377oaNZZV5nuKm\r\nAJ9FYgEgIpHJBRw63gkVLL/uvxZlhXMNK0V2gGH3d9JsjO7IVVvrUDyj3iHA\r\nFwI6z1iQSQYcJ3XpLlvSjeEj2fiNhu/XDVrNfqcRfyw+ir+3iz8flqzfdTST\r\nrMUwqVb+jsf9W3cQhPzDVngPqkVtPr0b26pOUqs6qp/dhVkz088For3a/dnu\r\ny4Dt1EUpb+OqP/6w96PGgwlOuvKwniGDrBsgFveJqmKNcB4AxmHBN6Bxav5T\r\nCAIOTR+GQP4/V1AbRyv7rLEmqTjaAkdV9U5n0UwEB32oou1QP6OWShksJfiA\r\nk6Tw8v4c969xAAI9m4CXjpy9qb3aDo7Ne/Lrt94bgahfbBM2811kiqu27JZq\r\nSs5DwjXBaD0AbbNLDwvoVTGGyA26Q9Mabx6xMc2+YIXHYA7f13KbR4WsBvr3\r\n9OMrdB8hpsAxF/Ud8Cf0zyiu3Y3wkO/k5IW/4mNSOJDjEK0XAH1mNUhTcLMd\r\nm2VSvNtsSbwia+MwrVR3XPJEl/RvUKPD7zA=\r\n=ESmA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/touch-target":"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/segmented-button_15.0.0-canary.817002c29.0_1670968496124_0.5480096549768012","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fb36273775201856a5ed78444ab6ca9fbf46dab3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.313a1326a.0.tgz","fileCount":54,"integrity":"sha512-LmSFD6Z2pfgar1PWsBlYkU1nZRjMa0nDcQh93yJBVlrtUa+lr2ec9Y8XR8kBLefXkhnxPzcm9JaTtvoqCbF/3g==","signatures":[{"sig":"MEUCIQDzrI5srqPTiCPVpXt/mUZVd76mxHOy2/HAve+HHKjx2AIgcZMF8V9uJpDHXwAlbp7SjntyBu4rIKM4jbVoZ2oJTvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDGBAAjA+XWELXK1+uCvmrK0ag11uJK/KPUOME48Uv4ZbiMLEhhvft\r\nUEVyGe+U2wY1KH9Wr3mqyn+qT0fBzYn9eWFx4TZUSXKMP/fq+VjzxyTUSwdv\r\nJJF3oOCR2CBXo25K7M+fkNHckIYNeDeeVNHLHKzQJAT10W0A6cJ2HNXvHJ/u\r\nXAnGAq7JksUXmdDtceKIb9h+6M6+N22b0KEnU8Flh0V7f6IwkIS/Em+bMIPD\r\nr0uyatN3bAPsSoxPj7YNxsSJEQb6v9y5c14W4gDZz8jdKPye60trJTtdnTrY\r\nlsQ2RJStguog0cylgLsHJYLbG/Pj7w3YthgaR786RSoivcr0klkToTPuLqFK\r\nD/VJyBX6GjdRgdt0b0AzMA75plf1R3s5y2d3QVeW+cVf1luP7KkL/JweLeWi\r\n5vSEvZ5ifqILGiNOfBEK9KGPwF0SgDQlwzs1QO9Hcofy+K7tM24ULaMDcvoM\r\nTeiA/Dk0R5zJxUJVUklQ+1cCsclqd5aYLuimSDOvkfU0R6Jxqy/SVkQOgsiP\r\ns7VWdhXD1hOh0UhF4GhC5tayk0u52kpCXbdLRcTkleO2lx9uoDmjKpUK14Dz\r\nXu0CtbjjjAySrGYGbRRwEx4YZFRKNv0Gi3IC9E7a77gaEXcJOU1YCCCfKQaG\r\nws3fjj8sMSQ4uzXiWXbfOFwgr9Ak3RpbL8I=\r\n=j0EO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.313a1326a.0_1671013782887_0.8206699249811436","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"aa06083596a9c11097ac9478460968466edb1227","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a69c14e10.0.tgz","fileCount":54,"integrity":"sha512-k0NOI0/EZZiubPc7/SBYdss894oVR16bPbSgwQcBb2yUrQc9Rety/LdOQZ79YxWy26VXl5pywpRUFjZuQaEiow==","signatures":[{"sig":"MEYCIQD5hhPVE1/fD1vFrkAIOT91TtqY2pDx4LSxYvSXl8URLwIhANGvfXQeBE/aOMcS1Neo+JFal9/HxAEu21YpIFh/Uk0A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbFFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkMA//bEtH54A9qGxA0ItlRYAuAfiMgksmzmexER6meI1/QKmk7j74\r\nGqrXAMHthWKNq0s4U6RuVNhcqGlnDZQM0XSDkoayp4RXKW1I1i9ow9hzilAa\r\n+Hk/nsQ7oZuPacWe7skv9JOpdzT+qH4EdrCTut9FpqJowVOHWwTDfxvaU3gy\r\nVNgHUcNFd4ut0lDEqzuzVjvMr1dMrPk2gGd2BOKZKFj+usDGH8AHHByL3cpt\r\n8A2sB9FKBTu2Lw+FBxA+u9uVPFWc2F92XRxampQsuHqSFlNaLa60EMU+/18Z\r\nAs6X8+Y8pOAj5PrBHZ/FHo2EdWMKW1cdaZ7JLZ3xaSDaunoih3Hpa83R5GCD\r\n/fFmcsJD3x6yMsjiweEuqaa8iQNEBmdalX7jU2mIzPsdv6DFhWVxe+JnKmCf\r\ngKFNrcNua534cWGg5St5LWDiI/YP9sbqLFzDHcL550AWWFMFl2tbBTCFQyX9\r\ny8ZFt/5fNpDmYv0bZD2y+gaZ+1SL4Y8gik7MoE9BnKaYF/7WZ912Myn7Mcol\r\nTorD00b24uwDgk1BDgSa3f+iHK9kjR0hsYu3oibfBpiSAldk8GzwCPnUw10/\r\nRvurkKyNeTUe/m/pU7hWcQvvlSJ6GIjBaZlLCqsk49esDl8PRRWvIZ0Tgunu\r\niY8tbw1jIwQb1H7SRUHYH+P7ddFJNWPcKeU=\r\n=lhzK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a69c14e10.0_1671016773765_0.39090885679256226","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7f5ac6ed3f3b3e7318589419c0051634b4f6ae7a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":54,"integrity":"sha512-diels7EGOycJyBme095EkpwzOZycmuCknSjdZGmvA2IsBocfn0oGHt3AYdJu66G0D1p5VTRIO9u+GlW59vcyig==","signatures":[{"sig":"MEUCIHQyjZ/yaAMAeWlDCKdAdBdn+4HtKL9svUQ75sIbblp7AiEA5WCaTISj3lVbQZ2Z7rmLPdMPx/br4ulDXyk2+algQmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmor1Q/+M5CDGRIy6dzWgQae9lJdWDFQq3rIlTp91tibbVxazStcVnT7\r\n1VrCh9eFBIerhUSRZOKL4ygKzhyK+bvRd9DG0dUe/NkKnPPeIfJdQ4h2CW0e\r\nhpY94cw9Ujftj/+1/liHggdgR7/mpd1sn1UZyypAum/QIy8X5opWPCXWK0Kk\r\nydmR6P9VlehKFBej2Wo4NtG19mZ9gJIeQyQXZHWoNmj27VIG/uyDDE8eyjP9\r\nzdRXEXAOHxnh997VcUF1nnScL0lLB2aeCFDJdjZpTSfLGmGK088B3c1CnohV\r\nqIsAFfKYRYkv00uwUc+dD2E82KMo1aDqZfuzXjAsS1Xm/R9hNRzAtpWYZCSV\r\nw17ACKo4AHCzlgEzZ2o6+MsKbk0Cq3IxvxNw2gLSk2KRtlrEmcK5I585SDE5\r\nFesIhLpWEsbEoAjjJHEHSfRy4+9r1GeOTl9tHsuFOy1cos5iZKhmxH2NH43b\r\ncerennairSeocpGrHXHwnvWVXa8oMHEu/MBS+rt8Ui2qkUaZPDGTuuNsWuMU\r\n3lvTyJGVFHU0U3XPn9M7r7Bgj6ECWQVKvmbQW/fFTsHOdDDeP3pwoPBTa9GM\r\nZdEiQzvidlH0qmYs/fTqKcQh7+27PqTmm/3joxRd0vio+cRJJxbT4XSLxRqo\r\nJUKF7e+8Ll4LH03AZZsTDqHPr+RuCnZos2E=\r\n=0KAN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f43e0ceb5.0_1671036343765_0.8732232599339562","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/segmented-button","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d996225d6700ebf8f0e2c59d1a4f1c38e4848875","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.34767110.0.tgz","fileCount":54,"integrity":"sha512-D9LCxGsolf8W0rQ3lvMYIbYk6R0rJgU3Z7HAAsF2Ysm7ALmwcMfkDoYYP3kkUfrdQzbrqll+wsKxwAJAaO23hQ==","signatures":[{"sig":"MEYCIQChfy4lDBeQdzx+1+bJM8nBJT03xEB8nc+hEhtFkHMOFwIhAK+UbeSDSurHthJwsLoR5FtMyB8Whc3A+7t+Mt6DNzGI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgY2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE1w//SSADOAkKCtPNqJBzvxS17+a1p27Lzx165cqVhloMtHsJuXjP\r\nCyaL+PE7Ggd8ko/iG94BP4Q67FVMUZoQb8GUD3DXafnaCwo7VblqZQmVaSw5\r\nvMr4AZaL/42ii5mkKNMxnmzlJ5hsU8VUZbe4VQ106C5lBtZj9Z5ypLl+7mf/\r\nEvsg3S8cIrTv2mx1NkatUH6kwrUkDruRurGJ1CjMvSrJqlA+xax8EPOoSNSg\r\nJPC4QZ14LcH2dY29XCYtzvFwlhZPp7DjON8uoNtIgFyIQl5MxDS2uC2c1m9K\r\nZUS6iqCKydLibidjerFx8ab9QpNuGFIt8V62lrheevNltRbTcwCtYUFBqCsF\r\nKhumTDp504LWJUI2QTe/gzaJ4K/kCaRqXPxJ2XzUYKGTrewiZ/jZrgPkiZLe\r\nGtSh72UqQoJstYZABNaAriwJocA7cK6BLWh0mBVKp57TLYS8pha2p8Wmcaft\r\ndi/C/IOODZNO/xRN3xcbGlhz78ikpzV3X1DoOScB7bUlSHJkD8bocVxhjPF4\r\nkLetuxOAoQUkkfNmw0QRte1sQUW1NwKUObvZlWd6x3pghUaL7hsP0pGqNcd6\r\nAxne9xAKiDt4DuOMH0tv6GqzmhkMdq5/s/UZcm9rcbPKPdFs9zv8jOlIehnI\r\nLTJIfvRNutj9emjqoRcuNKOPYof/qNXUEHY=\r\n=pN/J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/touch-target":"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/segmented-button_15.0.0-canary.34767110.0_1671038518270_0.49649017545691954","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cae04d4c2f92a4eb72a423753e0be9fbeb970bdb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1f99f3c50.0.tgz","fileCount":54,"integrity":"sha512-2t9ExqZ9HQERLfDXHTElSZQp/GNa6wSyPMRJl44zRRPYQRDFPIJfl5B6x6D7NYC4t/OhYgait6v1NJrO0SpU1Q==","signatures":[{"sig":"MEUCIBzisuKfjCZyrMPVuINcJ+FWyYLdtpsNuWdmHb8YgVMpAiEA6HNTTsjv5dKN3xHW992C1F+uOXFocSxhyqWPcYKV7XY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Kw/+N/7QPCuGcmEfa8hNEFZPXlpj9XI492ra1q3nKOUrJX228rgA\r\nqsnKA4fwdibcoknEX0XkM5/Kmjk1M2tnIY1H8sYQ/p+myCT7MUBltUBVYA9p\r\nQaalK6PnA3QHb/ziQdHHUKUPSIRwWXlh6M1eeplNjNHyBmmx94Tbdfhw1BbQ\r\nlQVvXbslSgN+l0kB7hYjqTIa8hfh2visqRsZO3NmeJ1oZAFJLBYPv2Jif/OH\r\nH7U9nFwHwH2QfBEV8apf0/MdLcOE+Tb0ECNIsBJqY4RzpRwAS1LTBAExmJhj\r\ngv3OW1h5QvE6aNCJUw11jk4Bh+fFFAZuznqgiJ9BdzQkOijHi+NVggO/Ooo5\r\npmakL8VC23Wnu29FyeUOAH4SpZ+QpbZiBWapNdaAjJXpZ1Z7Pvj1JJwvM+LZ\r\n92fT01wCaNZWjEIquD6F+EmLo6l7URlV93xisSIdweb+RhG5lh7wvKGroNpr\r\nK+LlceNCt9WYHVdQ0NCU1r1+FNgfxuGTAY5roUZ/ZqlsP/uwraL5TaReglJ+\r\nNLD8hgApNhvvFSwpDcv3/bZjey9BXVvw45PxeUSFFl//LMwne9TQOAiJoxFb\r\ndpzoZK8wOfuXajUrZpgGijXWO0VWyjcEMeXDhZur4yt3jrEo0q1qYhjrAQHX\r\nf6SSIyxS9rYGZzTl2K0wRI9tX0xQTBsgkUo=\r\n=I48L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1f99f3c50.0_1671114384632_0.7611685160684747","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2f9f6fc5604e99516525205b150805a0dd8e0e93","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cfd69490f.0.tgz","fileCount":54,"integrity":"sha512-hGkR9YUFBg4Nh/T0UwGOZVadhNZoNQWb1rQwLQZggd6sFdosp3gm5bJbyt8Ee9OBrQmirdl8UkAZ3FVdU2W1OQ==","signatures":[{"sig":"MEQCIFIP9tysI7XfzckLhbBj57E273G+ecJOAIa3uia8oLZmAiBp6LuytZM2b/j085pG3mC4NCL82TrwUuEMif/iWkmUZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNB1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofIw//a85Tm1SKm1MXqpv0tbrgDWfG6NqP/Q85I/M3tb9UvoxX0MKf\r\nvpj13oGy+RWw7u9ZgeiTomTChNz+spcw60olNos/O71nMfUSDuAzrQ4VKKug\r\n+TVIES3UOmD3Mm3skPFuTNyrzmPod6ZWVPMeBonlBNvjWw8CAbeiZYAWp6XQ\r\nwylEkcWYH/rYk/H2+3tywwK7EzAU/bzttkJmtKEjrl0iNhbvQrtoQYuUpUK8\r\nCTmoDXzgWhWahfI2aHDxNtfyblFUEB1vCQ0WaA6rjSjTgmZVC58lbqRYW27J\r\nBqaEXF5fg7Sfm6ntp/CbWg7418naUPoi7KRdB35zZI7On86d0yY+sazB6TE+\r\n9mDofcfQLoh7euqH/93KL6dkAW4GVwpg9SxwiDTZYq/YKLOyHO8RSVf6M8sg\r\ntGxNB/0XIohF49GAHnsKOs3epEFP/Ckdfw5ylirLlogir8aoz5DmivVVGHOW\r\ndYAJiJJix0PXD7Hs44uXdZmvCoTiqB6D7EnAZNJfTFmepMsRXTGqVbQEwrWY\r\n8SEvtz0XKDsA1R5dA6EKNjcsoBwr2MX2k/AiZPWwqjc112Jpmunai1GS3MpE\r\nWHqy/HKeQxl42ynLLeXZ0usyhnZWwub8GPi5o4vNigyxdrh5MpJzhHj3PB3L\r\nWZ20fUnJ+LEt6ASuUZn3F0Qpgd/854UI0dc=\r\n=Oc9d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cfd69490f.0_1671221365594_0.1174766886932812","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/segmented-button","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bda71d03dd1f9a3aaa3051192a5d2853aeca0f42","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.94ad8d986.0.tgz","fileCount":54,"integrity":"sha512-NHzPkP8GATXpR2MlHOqzsVD0Lb8Ryovmf0NKuFdDDA5Mj+mSIRIVI4ipgKua/Je3AEl5BsLH0p3IfLmJjgJFaA==","signatures":[{"sig":"MEUCIEyeUzN/TkLyf9hXCfH3FD/dYgnjJImNi7temoQDrJFyAiEAxgf2zFk9LGtE3owTzNe0J8JKuOz9N7Uqjv4KuuE7cI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLs+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr5A//fJ4rZVDOiYAW89oAkpMMG6RjVkl4BqWtWY7Jc4z7Af3Wl392\r\nG9MUr2sPKLllA2sAlXNtV2/Kpw20FPyPMw27sKMjiMBnueS2tQzwUQWI/R7M\r\nA0i0j4kVt3R8OZf6sAsgJY70f+IU5qS6E9E37kXZddX/wk9+JXXeWdqUwazw\r\nYs+ub12Fw66Jg1xTkmWxsUKQ+vuZPLhAc2+oCzkH03KXKUByjjHVIzv4ofSm\r\ne554Zb9rq+/js+qopsVBvrMBtxptwAFJbsfRByj7JnfJWc9YQNeRTSWUPPSo\r\naUmbFzMPqyINTlOQXkrD9u/mvnJybPuKW/+2czcVQEaUF1T4FWbNkMsHR+jI\r\nem3x1fZVXwRnDgh//eh3wB136oXZgECNzzFN6Q81R52EXfAJ/P5uITqSIzht\r\njFTotWjprO0Z2YWQbY/udFRuj/HR75HXgFZeEh57sbb5KU26v4EZVenleux3\r\nC8WDFc9/Fv/5Ulxn+3ppElnQcOWx/pK3ikFB5DU4q/to3GeEGgg1s/t5lCUJ\r\nAEqVobRawN6eMn/CQ4xijwUiHBfYemKjnD6L79GMcZUrI0tNtymJttUFmJhB\r\n74omu+MPbKlnaYXRAj/pRAixnDgW2i7684LlSxJnffjm+Zl0CgBpDbL2gUZM\r\nIfOxKM61njs1zKR3ICYmoimi/vCGwfm+fiI=\r\n=CV6h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/touch-target":"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/segmented-button_15.0.0-canary.94ad8d986.0_1671478078363_0.7878630290925448","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/segmented-button","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0d5941da837fd8e0189a286b28a1aa7d8d00ece4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.604264203.0.tgz","fileCount":54,"integrity":"sha512-YnefwzH3/z2vaNjJ9tzQZxGOFt5Da45P0q2gfWd9ocdidBeduEfWgqfHU+1zjA2z+uwrglMA9WElZs+VbE2lhA==","signatures":[{"sig":"MEUCIQCa8Sn35Y5QXn9mzn+63M+7kcKFFhrSHZiXwS75Y93wzgIgB3n59dnGzB4IZJHhy6kE4pTcEQw+h9DXoPrzEEYYAmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA+Q/8CAg2txScTylba6TlescYJpWQc5/qrGe4ofGN5N1JGEfAPUHk\r\noEAJPXEOVxEo5EZipVGxrN6VXEArPv1+D684IlPX4hQRV3cfAkvhPoXZVNjj\r\n0VqUa2mRBlpbtzqfxgv8fua60+ne6qN1xhSLvO4oicHSooDkdXU0hFEPlyG8\r\n4RLEQLyc5LKvN3fBCh2BfiowZsnukqXk4QYEmNCFNDCYEEuosbi14mrlIitj\r\nZ5VRwPTTp9cl3ojrrkbMdf51Y1StZIofNeX+EdrHxD1E8trIOUlEuFXfu8PT\r\nyhK3gJN5sSpht/Gfewsqk/PFyREdHTFSpaRMxcoe+pnCK7ASJO7JdaxJJ8R9\r\nEBJn6EwTDNknxCWCw6zI3LrSIXbbatIV5DG/5HxXO+cq3gZKZ7ku1DR7QsHm\r\nQ7M89L1mGElPJkJZG2dwbaPsr6X5tWs0G/hqSjHs/TGwMcpLHkneDSa5aXbp\r\nuw2o0aEN4nsTv/F/SK9AurzUPafCw1JqVDif97JdDgDlVpIys54q5pEKE2Ki\r\nIk+DFU/LPD4tTwg49mTyfAgCdl4mx2FgeexK1RxrwhNQaN8s7EBIxiNsPChW\r\nH3GUesWdTu/eO/WiQK7RbNbEPrakmqNChl8WlSg06Fs/OKPqsmrLUX9EHrHA\r\nBWzmLrqmkO/goU/wB93u3aFZXrN6tBrwsNI=\r\n=TR9J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/touch-target":"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/segmented-button_15.0.0-canary.604264203.0_1671658898025_0.8144659971638673","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/segmented-button","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0e8a6c904873b7c4e30dbd2a1f88c5150208cfc8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.85bcff6af.0.tgz","fileCount":54,"integrity":"sha512-lFAgLBIeTTNaBvk3MtIQ0ncvJx3LRNkdxJM1CySnYEY4D+4wEEDNMLUmWQlmRSjj0K109mmIhg/w8Dn1NbxKhw==","signatures":[{"sig":"MEUCIAHYUYjOwNKMmvyQ6CdAStwOvODVXe7z2EDH+GmCLGWdAiEA40cEWlmsR9DV82h/pCc8DV94lAvBgHHNTUdUESA2Pic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDC1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFOg/5ARJJPVd/Hpn/AQbnGGhY9nKdg8UT/Hl8AJ4A2rgyE10GS1RQ\r\nt3u+KGu0ELzUJ+d3lyAStDhyIGpp3qgowMpCvv1DmQXyhJQzS7UMB+PU2mnK\r\niqasRlxP5iXEsklExCbSFhudHT9NPFLo5eyMrP23gOmVN8b/1nJu4IeLPQF1\r\n1/mcLZRdUzZhV1u8z3M3zpe4vdJg7vdAuFEM/rrNq6SVacXKao6pDaFu9jCz\r\nGHmTz4U5xpu92rlZ+mtbDaxaCHLOOUD/IFQqlMiRM8X2E6tNs+QHzQ3Dk0a9\r\nEmQnxsZgoCHpE19gHN/PLd6To9P8Apt+Qszxlbag1IEMZeZ6+q93rkoR/lJM\r\nOkd8Qp+Dur73Z7tEYSQz7iBCP6TFsol4gartBTTMa1bGuwvQg3IwUgO9Rd+K\r\nqdtNeaJ7icQ8aWIfgSq6yFoVA5EZTHOPvQJfcuUClp1cM0vSH2Ud4FvOERcu\r\nhDFf2f85fqTMB/9B0uXqiwb7qDrwoNEQmvRXx7bCjlspmfrKYtdb7qvDUWfD\r\nfgn91usYTPFwIVILwd850DYb2Aq41PMAf2kK/joHhg0F0dBPDQ1Lq1pzgK3o\r\nBRCfLgU/7ocEStP8iHSam13Eh5d9z0KhLtUohEggRoNivWmhBdo6sQGR4QvL\r\nu9fj9PspWM5j/54gzSuzuYtq7KEmjkUJGt4=\r\n=zRHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/touch-target":"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/segmented-button_15.0.0-canary.85bcff6af.0_1671704757021_0.8827487119552895","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"50ce7656df553f207fbfa5500d09d0820d333804","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ece3e8d21.0.tgz","fileCount":54,"integrity":"sha512-TOO0KXmEmDwz9WuXLh6FT4DNSDFurLBdmiefDo4owqqRGR4wbkJzo2e7ocfZUqGwjn2knJuWtpdq0OyAtLWeJg==","signatures":[{"sig":"MEUCIQCbWfqKvyqpa56ALEybvOZLXrbjloMed4qVfqqcOrcLdAIgWy27Y+Zx98AW7cs28nZYsaKcEXnFp6234d1UMyKqbVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJAgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEVg/+MT6yMNkta3nRU1pVmLHU43NiuSQe4/oQ+PHGe8/uQ1NTTA5S\r\nPP3gPjOPE55uG7laLwQivQ3dvZRxlUkJGMHgycZuxHiOPnT5rd9Ge/teCPX5\r\nuR8lqydXNd+wbPt6LinAomecweBYfxYv7TGPPU+SKdj5WxZE1a3kpM5MS+80\r\nIJm3cSno0WWhv3iMRx/yGf7VBPKGqaEBxku4np+KreX4BZAOCW+BEgcLvjmp\r\n9QOnTXEw03f5JVbRRky6TJyhTnFDGBuv9hrpwZsiyEsVh0ZtvDYZIgkeEI3d\r\nPp2ZEkjuG1E9XIr+vOlFI+Sr7tD7/TcJFxXiHKaVkhNNKasbBfS1kf3TAVco\r\nLiIgpzqoU3Dl0s9SIG/Ynf25dwLQTX6x2tXQZQ38OkcpQCwOMBEzx6YA3poX\r\nj7/oDk3FPb5NFXE6VRMULqIn4z0N/atk6Enem51XNpSs0mI7F3aRQZRcyAq/\r\nf2nLRLvWkxpcGyeu0Wi1+PZ49o7DS89xd01M+cVw6PiTNF+XrlzLxljY+dAZ\r\nGAnXBrAyFZhq063pbvmujLi0wunHaVqqIBZPZab3FGL1ovQLBNWU/ERbgndh\r\nvsgn+hFgJFpSnvPygAQkddXwbwPu/w/rGQO0LC2IBKT1ELEKSzP3QRHI7RE7\r\ncT/OvZPX3AZJDgukD+cIBJQX/D+5hMKSwRU=\r\n=b4EC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ece3e8d21.0_1671729183828_0.7115003446731001","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a9a97d992bbb776e5cd9621f1e5a8659eafcec64","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.278ad53d1.0.tgz","fileCount":54,"integrity":"sha512-8jn2rJU+IBbeRItZKiknv3voGRIBvYjDUNjrLmk6G4T46lIRE9dkHvEcP2lt3XfZHC70RF+q8vjeLVb0zBmtgQ==","signatures":[{"sig":"MEUCIFvO6eNlfejd2LNrgzOHD5i+WOcRXWcMXoUfptJwTM7sAiEAg8GDqGyxMQsO5vtUsrtTKVrRH2NDnzk6x7ELEw/JebU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyX4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1ww//behLFartQMHaYDRF/pzUk8LUQCxh7kQTCgd9YOQLFvaS9kjR\r\nCuwETmol6fr6Um8+Y0nskhJudSuVkfeaj9kD2y3CU8jAfzgvJkOOxoz0XdjS\r\nRejstMd/HHvyKpNgvDxEL5COsxWNLY3hu8e/1avKivHDd0BDAAaDAGLrXcZn\r\nzu7r2cqeCk1iNl8GmNmLme6jT/vGJusz7jN2yKfOPgM9IZqv/RkpAWd+6wgd\r\nGOX7hFuzCoX94i2dmBD92y8YxhgLUqd0jfYagjc3wtV3sX3tcw8wELbQ44BF\r\n6EwrAMj6CrlXZ9yUj8VnBa4ZeMM6jxzFN8mA68+n2ZeKIU5eAhPaaYRFHPlJ\r\nlgjJi9155N+/loyRkfQ0hqWC8e8s/OwuMFxTRh7im2kBI8zA5J9mKQOh+lso\r\nKO/xX98AIlB8q+OUrtdf81aQgKHKEVgQtNQ7HEdEm9KfvQksi2g7IT4VoN3E\r\nUGF4fxmzk8245B9IPs5iCyy9UMRzOg9SjBHnqtZ4NODacxyVCOBPjVjDXYEO\r\nr6QQxBwOKAdjbleYop7vDkAfwHohtdjrBraB8BQ1psD8iCQv0B/c/vbvfvfR\r\nCRQuzaYtllkVeeI/+poEyylGP0s7lKGsw8VdVdbeeUBm9iob44CDCqtQX51i\r\nErEfCiTjpZNFBsWv61G/lJtYkhI2HJAmniQ=\r\n=N2QM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.278ad53d1.0_1672160760682_0.9132284266532367","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"91484d6f6d8c5e19d9d0c615040057597e0e0d0c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a7d8389e1.0.tgz","fileCount":54,"integrity":"sha512-68LRY/y2dQkk6F7Bljz2VoJG4fTQW4XOe3fPi4my/SGbN+qJm6ak0qm9htpObI2idPsQbz32nqKZpEl2yaEh6g==","signatures":[{"sig":"MEQCIAyHZbFFWpliSgzitCPxOsIuCV2KC4HnxuLStrfCrhvtAiBZ+QIYIF2pnyoZAX4MQgLgQkK85+wJ319uG4BPmgYGnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0HPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTSQ/+MqLA5sfD7Zwfqw3kVt+wYB5VbQX/OiYvwg4e7Bb4jxxRfpIJ\r\njuyMPmu1z//652ek+DhBzdjGiajAwgOyGWNEWocvg+387sgSdnHeIdJ6ZsmB\r\nPXR5zwR/TxtQDI9H4hwLQ4cEi8F88al34QndxPZS4LDHmAsRfw9F9ftwDkxA\r\nUkjx8sEbj+ExaiJHpiodwWhZV8IZhLi+7FkPKdM2+9U6RhNFbAKGsnkYCIv2\r\nfkSt5fex+GDv0R6TUSXLz5lA+VaGrWwS0HQ+vHD5yoCkV6bQ9JkEAf7IFF+A\r\nWCIL7z34aRwOqvbA07y9n3fmQgtyLJn26cmYn2oMJxLgaqOSzZBTAhoRRVtu\r\n7gx1ORY9L+cgd+UC9ZtcM88z5c7bE+nO7WkKfYFKhzCct9xm43/5OLPDInqa\r\n7Re3AUVpFbfxctnKN48ULTbwKCz5sQoKTPAByiHDWhwBEKPpzYFXsZocuIFw\r\nKr5ePyEKRms04GUb5FGYrn1W1NQXZF6ko0lDKQyB1IE2UvhefHvUcK/67S8T\r\nFehSzKGX30PkRndx7IOTjNhwpbogeeyQVGYX8baIdnJck84h3Yn8bSWyupgv\r\nDo5lAbOd0adepK7ddefKVN0JHunZ+tMBbI9rZGUBmu7ZYTThEPC53ppwJjiJ\r\ne+5Gvgo8sqEHrbXWVS6D2YojyIiHzk3rsLM=\r\n=gOMF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a7d8389e1.0_1672167887071_0.8616299839837029","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"37bdffd2b6f6828786298e359f0552c8d9b0522e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8175d5eff.0.tgz","fileCount":54,"integrity":"sha512-gzLx5wxbHopzEaeFUriazbN1Fby60sy/hz4emCW+A+TVjBtsVVdYSKbe1LH/b4aocXvYYdhqrDTnA9dzUYg9Dg==","signatures":[{"sig":"MEYCIQD73aam8Dw7HZyWtrkMdyp6fbX0curEhfDC9mPTNUJT5gIhAKyg47mNkDSDmFoM1b37lgGRNkCLMBWrhD9i0qMdDqTs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/yQ/9F+ZsXmVoNtH86x9f8e4Axpg0QXWvUN01k6V6joZ0LQOj8B6N\r\nyASOI9p2yXJMBg0bZxazPBgqrFP5B+28nV5eUZFqVGEIKC1i1uZO4YAW3uok\r\noM7veZRUJKBsGNQeuoGhZutCTMwNj3eYGGXIkgaTaTxmi74EJZPghKSQNHSb\r\nrraO3Nv6lPMcyDHnqWiKAVS1KWr2vPCgiT4/1aZm0JKWg+g65UP3thx3pMsg\r\ne+zZQq/bUpsdboL8f7LXvnhn3HWgt1mIwY8LloIxpRVXoD3EnWeBCnFS/IX/\r\nyZYanW3NqDhQfNegMpRkiMHrhrfMZEpRLk3mHdK8fUIgqiqWnrSh9UdGi6Rx\r\n7vR0oo7Ot3WXU5lwGyIGaoUIXDm7XbIywzjfqSTNCXnWBOdx0Qv05A9eakwa\r\nA1DS5Ec5MPZdLp0WF5T6LvTA2UCF2qAQfeQUyPygamz8NNtvfor7nPXIeFww\r\nssMTkMTgvOiD5qhn3YtYsezzWIR2Fkpu/KeKnfett71geOR4sX4idzZzP+gn\r\nAogTbic60lsbUe+j8xkqOOjZKC+71j2AxKFbh0cUKVzjv1qMhuZ1JjQ/wN2E\r\n/aIVjNWzR5HewDVwTN5rxOqG1oS/HK6CoQb0OHqWdyjU8Ev+WoR0lSz7LbFf\r\nmV0oFdK3I6QBNmKlKnWPwvQmBhW9AexvLYg=\r\n=vPWV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8175d5eff.0_1672192352638_0.06227372388759145","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b29c5be42b1c8306434bfb2a1e36181a4ebf54b1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e21dcb86d.0.tgz","fileCount":54,"integrity":"sha512-XD9Hwv4rZMLOYCd6Vm4CLz4x7E+2Quen5Z0HGSZLqvGvt/Y9vJYzzOoTiQX6JAfVgS+QXpq1g0YfF2Zlgsu2uA==","signatures":[{"sig":"MEUCIQCUoS/eeWY1s06ywdx98qRkw3a7aqVteTsiCDOevC5nfQIgTRmw0MLv/3xck0vU2VTcUtyaG6cgMmK552iwLoVYZPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiOA//c/V4oFIyermjWRCmvplIGXxsTZUI9PdlBOs6lcMS4Cb8kgQy\r\n48Sv3GLXJ6SVSPqv5UTUlZtvUXu8uSH/gB9uM2yVbBH4Kd1o+RxbA4rJ3NB/\r\n7YbtmawsaWru0zIVWWaDYL7LxOvZVShWPQGpZ3w8BZly06fobpqqzSSwQTvc\r\nv8cLZH6A32dxca6POLAKmQorRW5Z9XTpq3MZ0oOvggxA+aKETW27Ey08SkgM\r\nNGqxF/s8/E8OaIciiQAuu+duoc61ItpNZ44ZdXbajRclzNJc0Obnvf65lRFG\r\nojaCu3e8CapBwdewpFOladjCLUVAlUGXXwNWGDi2gK+pWERej031w1uXwWDP\r\nL8Rh/tWonZdjuA0zRMXPWQcJtK0UlfTv88Dn9H9vFvM8iQ+gkGLigvy6e/vq\r\ncN8SiJlo9JHBE1jq+XZ+DPahGAfNOAC18+cNGedXfq0bFPIUZCWMeKLIrESk\r\nH488e/KfZ3U6Fpq93UCNzkk5RRmZBJkHHz5zyXsiB3PA1mxIdEU5apbxQE0K\r\nNbaM92bpBpahztmtxIEESQ6bgipnE4uK5DA+Q+tUOPo5vO7zOZ5mJmZI97+l\r\nh2rF6eHBOfN8d+YlJ9WAN3BbEWkBZKbLW/Jqx2e4hp07XcG1jr519KpV6NEX\r\nmjzOngNPTVvnDTbXU5O7zH8HJwWreboabg4=\r\n=BBL8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e21dcb86d.0_1672322583858_0.07557259989420428","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3430ada9209af438e9d6d662c89d34bcef9ab827","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":54,"integrity":"sha512-xk+caSXXfhVADlp9bH/T5/23YjCxLlPNf9dZjann1WARcSgeknRJqJ89HINb0Xi6tlaEZ66EYSAcKSimei5W1g==","signatures":[{"sig":"MEUCIAUtQI69oxMd4xCRA9Nm28SUSveeKXVTObp+n9WlgQqtAiEA1B761A3YAoQip0HIYc/tApnGu6Fx7aE8K8X5svQ3JX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre18ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl5xAAgclutyt8sUqLZNtqNWWM/rqxACYEj3aZisLLFltBkKx+YH2M\r\nwRlSFujGLlez3wHXdeiyrFcwO8/ih9xlz/LLVfH19ZaJcAyliUjc/B+E4nKR\r\nAY6Lp/M1edAXcvg5JWj8iP5q74L6nh1M7rX0CWYi/Xhlenlyr93ERWpUdcgD\r\nEw/CLSrS96ZJGo5ofhKnVMtc5kQQdnV0GJ+cnVGVIG/p09LAsXF9cttBuAK0\r\nuv3ud1oO1K/O9sWazkMYSmTCVIu7PGg3pImnz5g0iq4z0/pFz0A7pI0tdzhf\r\n6ER+ITUPEGKKNQtA3370OWwZ2Iobqg/MGYGdDCMRmYQY/lLB9jEtytneHB3t\r\nDuISDrheAzzl0DUDvkjmGzB6j4aaC56XU7UwPHLAlXKdtLtwGCJbqEVn1jas\r\nwvcYFHZGOaO389U/rBDFmLU5ggWk3FdaiNt3F8amZp9/vc0uoEupmyJL2e9y\r\nBjd6nDgxfVWHkMIAnGJiUNhKw2qbvJJhhSYy9od6qXeBBfDa+4E6cD2WgoJU\r\nykGdBdViVsdajrVzPH7leL9if3WoR1GN33OXSzTnjX/nSYAtnmtyvotauO6N\r\n/1ZL5fktD9VCdudJKOv7DcBF83NvI2MBcHeVqw6PMS4EmqcwgNizwGgs5fjH\r\nWdsNB3xjlID2T7fHfDKE9wBpuRlaP1g8fFQ=\r\n=LdSM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.20ab6f5a8.0_1672342907683_0.9419393602774881","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"333ae9a6adf52b700d63c3c09554c09cbf4448eb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b9806f623.0.tgz","fileCount":54,"integrity":"sha512-2ZO0vY8q8BZ3BnU9mpD+g63edMrcBoncrbUfSA5sgdapXqZLbBpL4K6C5tMA1AWz8/QI7rOujWQg2yzrlYJrcA==","signatures":[{"sig":"MEQCIF+7FlFs6OU44AeAeJxd9Hfbgb+3o/6bA24EUO3QwKiMAiBR9UtInJ7sq8YQaR8p6fEjGtz3KS3lf14EzCoQC5BsVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh2JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUQQ//cumU5kDsHZGPlfw7u2gxyiF+1y3h5RfksADQ8gSMIoZ8G7sT\r\nSj0Cggx4aknrepp3OzltIGs0HaHp/mplMW4vpqeMAMwk/D15mSB28x+npkyj\r\no07idGfIHcmnDZ/aDotYBgjg/UgL3kGh20U17c11YQrqPM1sJRdmy8Gn2Zh2\r\ntTgsGhuqR3DHZ4l1Iv/6/3ZJ4T516Wt9iu5ckIpAy7imPxfpaGlD/gbKY90a\r\nRQGnN2+yDIYnzoPrvT7IuIbTYHAQf0yODb4JMpX6EUaZx9lUmWMxlXWvmXZ3\r\n0dEVShNtyb6kohdi+bw7MWTcUNnIv9fxjQkUd79goMKIgfRpuP2hRx93gBtT\r\nCU9yPtWjnfOhiJ9v+cD1/eLNkZu0dsXJYolhEkjviGINKs1TQ0VuBoYROQyf\r\n5skzK0lrqyOG16nNZBbuaIiQ8rKH4sZAK3hXK/71eVSruI491tR/LceO57I/\r\nAW8Tt/rxCsOaFV6tkJbu3NB9KF24/s/JwHlN/ncHJkt9xaF5otBiN1TckP9I\r\nrnmOJQTwdvo8jFPpJlw1YoXSR0gDQst82nLJ/3ZotS/s4HA2jfo7qqJqZzQI\r\nU+LzmFVmyDUtJaAdry7hnDd2UIUx3pPA2LSegpX0dMLo9y7bhFsN7zOxmEty\r\nPNG+pmPPyA7ZWXjjuDOWSpZRv6NEqV69V8s=\r\n=h9yt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b9806f623.0_1672355209564_0.6020562270622811","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c381a9e27a173d505f553553f5f018fc029e33ab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.50c9f550e.0.tgz","fileCount":54,"integrity":"sha512-de2eWJJgAKuELWVhLbHwMXTghuYPyaaBDpH6Om43SDgfszkM4NKOMD2ksjH05NYqU7e1GEbLCcNe/RxYSVdk4g==","signatures":[{"sig":"MEUCIQCQ4Hxjd5qsTJpqKhkIO1XG4IvsN1sMDZjp+Y/72h89awIgBS/b4m1i3WkQT9cDldFWOqmJ6ZOTNomHCSckM3qd6fI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeKA/8CAK5boUoZK5PqfxKo70ks8QnwytC5qciar2OGozKdtz3T9S8\r\nW87cOtXSi1xgGZbznxfnT0G84GPfFr2z/IyLF4ngSOURbF4+lrObp1AhGdOu\r\n4OLiXhApS8T0wAhj0c5IiiEKmWfebOl4w7iBrat2Doc2q/Suk/w3QlhsQ5QV\r\n6KBR1mcRq1rJtMclUy14NyE0u+5xWwJBdoa/vRcRF7/JEXAw1GEeEYKMLIIH\r\nnriGgD2WbBIVztIQcmkSLOnfjrUja2iAx+vU1esKkCH3+gd8apK268TLI3BF\r\nE8QScW31WM7fDcE+dC9pb4NmvfLgN3JbyuigdqEGT77yA8QH/GECOdhfz3/M\r\nhpHCA1Wf91XA1bwaOdI+CNvQnyIAR/F8/GAcXr07a/ZzcCdX+ZluWXJ36hVS\r\nwiH2DoWJ9wZV1AyVbwawlnnFWFUdSHdlVwgayry6nP5+o0t+6wcxl0AbBDhi\r\ny208M8N5Toc/gg3CpLK0GPd7YAoNLNRC46Q9cLxx0K0HzGy6NTL4n2k0xGlt\r\n4zitmV/0rv6W9cz70OtkIReDVPEit7uAXi1dyG5cXTNCE3x8Y75YrXC16xqa\r\nrdLi4ofi5pAKA2AEsazjho4pXdProbC/LCp26m0AgRWP+SaxVeUtgem+b0gR\r\nQ4gWPkOHd8vOWKU6iQ6xNFEIlsdSg1oAxvU=\r\n=+ML9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.50c9f550e.0_1672760911876_0.8994775118391638","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/segmented-button","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8871f13d15f41bef902b29b9eaa3bacf33dc992d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.af490a848.0.tgz","fileCount":54,"integrity":"sha512-6ZbgfB0Xx6s73hTA+IxjDA657FS7b+a+t0XeySPf3AfI1YysS4Suifz0fiZE2B4MitHofJYBPWIURiBKsWETGw==","signatures":[{"sig":"MEYCIQDNTIxHs3ZJaINz3goJhwCMbaNY3EJIKg9tEaz2b6JFbAIhAP7jS79ORJj6Y1+jstuJGkAxFBOPw+mCc8km0a4GFsPH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFClACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGRQ/+PeUSmLc1y513KDwFYy3QZzeQpvjhnCVJb2DXTFOrMOHzL5nl\r\nNSv5lBqHIKsAqCf8tncr2MUIIZcKV0jienkV7HZYXaziLi/uQH1YgXldFJvt\r\nSgQBDQC33tDhwcITKc+Rp/LR7Q/aSkIgsVYtyxP2VzXIIPRhJ62ty7CoS3QJ\r\nx7nQZVP2WG8Ts9ffqggvFZ4Da29LRvmv6zIHVoU74xTnAh0NOxY6v4JIQkGt\r\njY7iKELrUUD14ux7Babg3+U7qp24ZMkTrdJqn009nfk3+znDbNmqBZHSCFQI\r\nT0SLomXzQ0uMCJIWg1Rj9utGNoZm+Boh+Id+mbYMCgzevJrNCs+LJ9BWTXUY\r\nf1gNQeZ6jhXIgeEYHmEcKLRV2O554Uq1jk+FdqSbWJTayoz5JoukBTtJKGD6\r\nTxu/3NptaVFEIHW4YuyJP9fo3e2yebivcOvwGO2NTh/JHQz2d9Yr6qUQycSU\r\nWh8SYy1mYzvBjC6EnZ9Ztcr+2FE4LVX/wR9yLCFfUAHOqLCmPaU3cIHOTWt/\r\nx+bbrAF5r2abMJrVbUObHQm1AO9EGEiNV17zLJdFTRYvaiEOI04WjMfF8L7z\r\neSLnz24WhD50rM/evS6Io7tVkFS9RNXOJfGVTNKVfrGLB8E2Jp+nfB8eMIP6\r\nYjjTOa0E3vm6r4mIt5c5NeDTtnNupmt2Znw=\r\n=W0Cw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/touch-target":"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/segmented-button_15.0.0-canary.af490a848.0_1672761508950_0.7871194339370031","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"465bbd1444f035a7ae04762cd61933543d16063a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7cf487c98.0.tgz","fileCount":54,"integrity":"sha512-MLGabaPXONF5VlPulO5RlBzQyZVXfSz14zM+geazcuT/pM0UhT/psWBWj3/OQVOxrFmjmi6WufbzqeaorxdlQg==","signatures":[{"sig":"MEUCIQDm5TechnDMygQ9p3Z0Ux+zlUDrs309pd32g2QmTxM8swIgW+Qr99rGrJcRk11Sp8fe9jlZ6AukNyfnuVQGCaBvEfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNEg//RUdXeaHGSd8d1W/bLiwQxSk6Ekaz5f71a8w1KdohrFiFzBRA\r\nukGZI3KvXJ8rWNHEu2QZPcGfQxa7gQKaH9qBlATp+SsBZ/1dCCkqRBvKlZSM\r\neFoQ4q97RhaMNAONPXKeW/FPirmS40erUQzd+eQaIQps6cOX9IzZTVwRaghM\r\n3rLpJS4cK8InaDf8AbSEjS0VS7btNnLenVqHOcolKkggXPh1wq3uI5BuPlCu\r\nOjtYRROJocKnkoxHrMCKnyHtavTdT3UlT0kP9qDzXb4EptNKiHiXUEVdovGx\r\niVbnw6F3aIdd1+dPADguvc7vDRKvuDZVR5rJYtQEfAv9c1UieGgXwmwKMjqJ\r\nOlWe5K0ovo1A+XbueBscdK+63/LJJoaLy93lD9lfY6GfzEkYwWn0Td1FlK2R\r\n63e2n8snb3a/1fzlfjVrwYUWqFdK9PymM8+EX5ttO2GVnTCPenTzC25wE79m\r\n+6X2UqkPuYQMKLhAQrfWOgc7EP7sBIYZSBIx6SUDNHAjasa/XjRGvLfZNeN0\r\n+ZhWSMXQp3RY8KY3myacCosQdMK84AdtD5PZCoDt4CtEdMQbwBISFENGu9ra\r\nGqgE53agHBCeJV57ZHQW4rgrHeaf86AAeDkxBSs7jLlmQPZScW23+dsdTwtz\r\nAxtk/QHqUYcwKySUbvdP9Vi2ce4CgZSCmQ8=\r\n=FfEU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7cf487c98.0_1672767578532_0.2288772260234273","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eb1f96f73c74a904cf8bc3f9a919d0d4bd6a16ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a52be2d5e.0.tgz","fileCount":54,"integrity":"sha512-UJFVUrulw4veXuIjuMs/2wK0ru5Qbd7N0TiIihjeEmbMqmLtsRSTmUd6fSNK8NYCkt2dauO8kE+Ohf8M9AxPDA==","signatures":[{"sig":"MEQCIFerHovFcNW0NI5jpnVFtXHa30CsX3UINm/4PpkeDX+PAiBu5ZsMlycsA+9A8IafzjsUkJXxweKaNiKEDIv8QQOfRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH54ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvHQ//eK+ZMIqT5KGE0d7BZT1/xSYJLhGnKnaVUSRtFNQTVMWpXl3E\r\nf5dLY0lWjtukofy+hUpRWlbXlRskwYwwWuAYGTyWPEz/SM3h9V8VAGe5a5CW\r\n9Ey1um4ghQD+Wdoh7uwbqx3XB/LwhLfyllOYEPN49c96Xv+2DEMBkep5Xk0b\r\nj91JksH48iKjrUeVaQFX9D7OpCXV1S1mthD5A8TOJUVs1ucy15neYabPXbT/\r\nAWyG9k1u6QV447RYyVVQLfQLDvfpjbYnicbBIs0WLYuY1o8uJ6CESwuOpGsH\r\nBSbVs080EpuC9OiyR3uinXBbPbO2iPX7//UnX71EKRZzPcQH0q2DDB3PO4dx\r\nVDQdsE/2QRlEKQeCE8r01iMVaeKRAwug9fgQSA1io+2TNTpLeVoZUZUUDLst\r\ndT1pLGCy5paeMpsRDGPR7tAc3aUguMkHnU5GDzRnYOYFViBXeut9vnNy3GW5\r\nvzk+379anNm1dPD8mWRsmUMLYnWN99MDhxGzBWr2OBwqQ2JXRF66uvREgjLF\r\nnPMbflYPWs2fwqMNAdvnW6/yoKE0gwNTxlAE3zlIVHAymyaQsebSPQGCnl5k\r\nBn1Yb7b6Kx4RvE1amKX90jk1TRiHDgCR8dpD/TGsJVAd/7ULtgdPkrKEOMBK\r\nKUAOLhOtwdx8DUqCQApQQ2ySMaQf0K1tCoA=\r\n=a2PW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a52be2d5e.0_1672773239790_0.7357411896488086","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"66026290b701e91920cbaa8defcb3f22e53bffd7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e38ba17c5.0.tgz","fileCount":54,"integrity":"sha512-MUChh+FRt0QRAY/skr9RG+fSsA/LGi69PKWYo124SghKEP8tkpxexiKRQqozm9h5Pcl1odhQuDmyYIP3kAECJA==","signatures":[{"sig":"MEUCIQDq6MmwHeWxlghEYDhPbmb+hf/LAostQ7Yg89G1TqTwDwIgIluPl29aQAiFN4lsu8Rb59fq+43ttyiSzNhlnxhEaXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUaRAAk/akCDmPo+MEzOISTFkQiKPyVyFZGY8laIWU9MDg28QrxFha\r\noR86EcWOe7ldqaTZXl016YDXu/FGvJKuGx4m9PuknLu1vTAy9vWj3N5pIpfq\r\nT/YTdblwuL9FYGAtle6dVBt6zZhOL5Z0D//AEKnLaHr4lyvufq1MBXfI+zOo\r\nZCi49NAIToFNEBCvzdir8ysETYytgjjpJnIdu3BWABThbsZBffVkBddU2P9K\r\nhiz2kKvL4Y0wHD+7qCP/cZ8Ei5rFwbAscM0wqz6ngYyT2hySqEhbp5jMZb5h\r\ngD9BHCZhNfkVyU81eQhvimAlconEMxu2GX7OzZN2UbN0j+w0459uZy4rW5HX\r\nO0VnAtINjZu+9rkahPyYznZXyif60+2UWBfeHMcy30kcMYwO4Aji2wAhspOI\r\nj3yRNGgQDQVm9ZQ89k4IrHoAR3xDQV9m6EGJ52gKvYMOCRd8p2WJOy5z7uCO\r\nk9DklV51wxhuyTnMNI1KoxkaXAT2vbTrI/REcGuMeAzJt4OiU04KVGDjmNyu\r\n6Ync76Gnt2/q0X7LJmPyN0bjMeYkAEty9bTHis9lxGgLoxywBQShWD7PRPqy\r\noehjScnWCWQJ4T7EFolC+pJHRjOKboL6M2YoPiRPwrLpKssega86egj9FFpL\r\nj4h/S5kQomq5cjfRRj+5ejZoMUfzX0ZwK5E=\r\n=Y7t4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e38ba17c5.0_1672785180504_0.40690088074245545","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3cc010d1005b9b93a9f66d1f4255f9c7cc24f2cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.49041a6c3.0.tgz","fileCount":54,"integrity":"sha512-dgyvGTU5i8Yd1SPZehY8q8zCanTIeXtbQeBe72YEGNV2YKC5xkHiVPhxSQpqnB+/vJJLEHbHC38iS9PTeshZdw==","signatures":[{"sig":"MEYCIQCj2dxlcYmg4oQT3O75gPuIl6wKmE3HnDl1bkxomHQP9AIhAIe9rvNG1LNatuoBI5rNYAza6vDUVXRfKjSPTzFzcEGN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZjNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq5g//RO+0ZSUU1ASIFUwzdCymLA1XeUljICcKVG27OlC2NVijV3/z\r\nucDL4ijy7SbfBkYjzLuTmRbDON3zbSvhghanT4s8+GtMg5//HMHskxoKs1xu\r\nUIJuyLanuXMAoHvQGBHFhYEBjhKMgMlM+pcY3E5oyd+8W2Q57hf/dFEASPfS\r\nyPUOPC772Kdmp2cQ2F19aQ/kYwj30/wZHewvSHyQF/gQ4Bn8/CLTZS6x/dWg\r\nItnj9XdmTPurubbOIqWFZHmjqzGtEWJVvrhsiucNnHEbzLszPG3otA4yq1Me\r\nQRJEyP26Q7Is8bSIx8LG7eO5S3VRf+FU0aaN6b15w2mByCD7SatDGCqQ0wKy\r\nNUTbLB7Odc8B26XWuVRvrPEyvcQkm21lkmnWavsA7qbXPiohKVXfVdCxhXjX\r\nUIdTgV2KnAt6Wa7kXmYrUbz85nO5nhmXQAn8AGPVMIh7jEsKNjkcGa7bSwmh\r\nwg1Ld4ZfysvElRfFCbWKdZCheGWgVUpqk+I+sDzvNX7q31U9OwRe4CJnkZgT\r\nJp/vxgnuKOdZ3fIuWIRT+o1Sp0u65cdRtW5RB/Bvns7FNTs0Q8IEMEUpAyqH\r\n0YdK4fQw2c2qYTv++NBW+ikPrGivS/kidIyxT9rsm25vsZ6he31sIof4WjuT\r\nmuaWMQuETW152SDdlDUfvfYVaEOW8LMQ8IY=\r\n=s+QB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.49041a6c3.0_1672845517367_0.8223653882135238","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"26cb4b79f9fa0e10daa795309a20cbf28d41f1e1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c492898c2.0.tgz","fileCount":54,"integrity":"sha512-2LFwmCjYBNKEkJ5rwojUqA5ZIOR91LqPrggs94vssD3NTuNgs/RkhpdpvHum8E4nhjUskD5yODsjHrZLRWjjZg==","signatures":[{"sig":"MEUCICTf+UCUpaIEYlAz79GDYWFRQcJ1YX6ssF1Sfuuktoh5AiEAlQmRLeEuacHFLVRN4zNFbUR1E0RC8TaVJ64AX2v1uKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbluACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Sw//d5Y5kGX31AnAJQLJYfnGQ5xwECr3yx27iM8A+RQ3YSdqCVXF\r\neGyjfY65jxFK4CHR2EhCMYzCDpMg2rQ/FDYRy2bhqN4wUKKHe5TnCPUSlEoz\r\najrRTQ8p0JOrzc+gvexJZGSiT/Sh7wfmmNaGxq8w6XIU2loedV/Yt6JwsDm1\r\nnab2QNWg+RyOvAWsq14KE4ACny3+qsaPD0lDgco5yHcH6GXMKAwxC9jMC/ta\r\nL05ShNflyHiL8WYwu+wrlHq1tUITvjv9JUgr/4XVlOIzCWANvXt4iGWGrDTM\r\nE5Blfw2885mR4alThR0Lj9WSEQr3V0H7q8lxKM09boTp2jAoHaJF5YkYnHvU\r\nah2mkBrKTfsEAb81BcWcieeEO+YYVbrsXIN42sAGyY5scF+Ze7A63msAEEPs\r\nVoe1XF81IMb+eWGIAPql2oRi0EThan4sw5xXZTyNF0e8ht+PQX7ybjJw8ESf\r\nPebUnoPUxUngpTK9JbGk7cWTPBQopKeotRK8cQDiJqnJixCynMzuTbkX5I0N\r\nB9GL6EYpEpaksZIltugdBLF27qbCbgF8bRK+e3m343D23m4nZvwQvc0ffRLh\r\nroOKvvfp7ibvCtiYPbbT5nARC9CdeerbjHTAwWNzQesa56W26dxSraHdZtVB\r\nioylv8RdKj+3L8s6Mx6XLLX7Z9OzezvqhuM=\r\n=YnoE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c492898c2.0_1672853870081_0.6832712070791922","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b7591aec57fbdb9d5debaef9c02eedfeb6353d4e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d7a2277de.0.tgz","fileCount":54,"integrity":"sha512-mWkwDagZA0JiDgFn5mtidftFQDnmdoyjpXrX9ExLCV7UCoAYhoqk8oSxC6Plk/2/HdB99uHEP9QAsWD9W0+jDQ==","signatures":[{"sig":"MEUCIQDm88IaOpPpVzVePQ4EZZ+PWdtDhVk3ck28rGGe31f9ygIgIfo7E23DmfII+oPjiMXlF+4eGlktrkyJg8p5T8vRAZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGWBAAk6D+FfyqSNUUm8pewH7WhL6dgGHPP5qynEArCC3VfzxlppiT\r\nLEDDev9bt1KRdrE4mqG9ICq6CYlE9VDnFDGMy1vCE+k75jQm83IRJB8G/ql4\r\nhfNizeZebHnlvz0NmE7f4ydNameBfNdaR76ESj44S4EItioFDe+CqamO1i1p\r\nrv5ZlSRGe709RibHbLGzaJs+agDGO0jZfG9/Z7yzBIB7sj92yrZjBj/gxm+N\r\nI4/QKb5KFpCbQegrqFQFsysWt0S8gX/RMFG+2nW1OWyFBrChakkFJEJBK7Uc\r\nmmcmHPY9CoHqHWGyTUMKjbEIlF97ji1kVYR7udP7TXvbjDI+FIv4QYFZ7IhF\r\nDXI5mEtsTIAODw3BImyDXWsxajgQ7d5jyfeRkVCyvnobp7z5vvaKPl4qJqrT\r\n8djTTk37XiTz0FTTd1OnouLUNv3/tyWgODXQPSnXGHPxc43DqPUZ9Y4UlAMj\r\n4hXiVlu6xrQNlhz2myN2MMZLGHOJ68t++yIrgNyV8GMXT+6jHCbIzYWyEuPJ\r\nyzsen/OA69qyStLqIDTlibBPQ8M/M9EP9C/Ye02BKgnOJrLsif5f+szuJ0Kn\r\ny3EOV9BxK18vKI+eAjZg/sDMPcq0MN4/sBCZLfMKztWFGJ0dn4w1J/a4ckVd\r\nePSICFSol2ztIcYMcGSvQe2Z55NNKKjef04=\r\n=Llsb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d7a2277de.0_1672868195465_0.589976081118794","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9a4606d6279b8d5d2d52288ab0f614f0a28c0ef4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":54,"integrity":"sha512-dn5VvyWnLVUo0x9CeFNrwV+NC896Ha9+jbHwMvJ44oaNorVf8OQHQDDPSj2d2Pjox3BCdf+FUU7Bx7f6cwU+XQ==","signatures":[{"sig":"MEYCIQCLMTXOr7+XmRRUqZPpLJg9W5h8N1kKYcuEm37pqx/0BAIhAM0Ff2AMEk5xfE8zyEDo4C95/FV/kSoBYPHTUHuIYU4r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqodQ/9GYx/jnk8hU3PJ7Fx9YL6rOGlFgyG+bOSgwYqrIh8kJKUklCQ\r\nz+ZA6bI7H8pfFKnW01YJ74sBga8VSASsT6Xfb7EDq83haFoSD085kmEGkKm/\r\ncDqq3iXVjo+x/o0GK7nWyf6T6I/YY6Lc1yCdH/5RHqEjymMDnETCO+UrCTNr\r\nMWpW/Gsj43NSvEcMbclU9rvF8KZJMRfWJ3Anvc8BYPjj678bn9nHRxqH2TSA\r\nburEXDWIbHHEoukDQvHq7k7yFwKftWzcVobLqTu+BtMc2+DFyjayTA/YtBqd\r\nfsAkyqGjycKUVGA2wAWxYlPK3vpSgedSC0fgVH3L7EeBgSq5e4lDMCql3+mv\r\n59olP+Ta4Dp9Bd8yD+gVSxSHR+/81prtzaW4GLe4n9/bKavIxAEOh4trkquI\r\n0atOGjgkqRKc5Lx68DmK16IT5e3f9Jd5DEzW4cWCi54S9mf8jwfVL3dhYHa4\r\ndua6YdZEr10eAAWSQmgfjHOYXWJUBn6uceFwr1pEyrfHQnnT+u9n1CXoaadK\r\nMfq7gLfXxYUBE3M2DKrCzHg+Mll4wxwJh5zv713DQsBMNB2+ZI5wV6YopRwv\r\nf3gdE67BX6qMMae7HjEsxd+Q01Qjtd6xZHwuuH9llSl2UTwsUelyW9Avh9Oy\r\n081fM+mHKXBpbRLconjyKJ7LLm88GeQV2zE=\r\n=PLP9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fd95ca7ef.0_1672880621643_0.6532826507277092","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"792ebc406aa1dbb84fe655e9c8323e3aded48414","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1eb44faf9.0.tgz","fileCount":54,"integrity":"sha512-W7KmyKMSOOw+PMYim64AQkWYOYV/6jHsuHw3DJWvJ0QgSq/vSFP8IlyNgtUizYuOUbtZeftpwirofemPsAPwxw==","signatures":[{"sig":"MEQCIHanCzrnOjqtbQSnJv5wMHGltTERiqLDP7uJ5atpuxXVAiBNgPL74mvcWqaGvZJhX3wq+/a/HKQLRpM3T3eO1GXbxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpP0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTbRAAn2MFwuZYuwxeAFnvJVB75HOmT1Y0HO3Gw1/fQ6HkOrNepnCf\r\nsBkTBRFN2mfaHAonx4xZqlgFXNsWE6pqgS71F+HCgUgqGtGBXwLD1D2ZxwqI\r\npAJlPozh0hG4Ha5elefNBKWFQq661rwqE0Mkldg+WvpHzla0wDdTiTquFdnh\r\noA9WMV5IWaYJdav3LqIuCIOqTFH1v5UfbDtIy2710blPXXRuc+X5mXeOWgfs\r\nvy1kzCAnOylg5d2Uv1BuyUlpPS84wmCh2K132B2y/ZkNATPcITbMFdweH52W\r\n2ffv5zlmNHm9No2PdhvLDhwaMlkZ2tsVfCV6w2SqjS7nVWYeqRC23ACkGn7/\r\nDC1RPn43TFRg3NT0MnoD2FSHHiIxPFbn0GPte+fw7RSBQoMijXS8gmK8MP1a\r\nvxEysJheqciixeOIfMmQdGQb/OTYMcOsRiyHkv1PQCgyN1Og7quMWeXyV00g\r\n5Mx9bMq6Etw2v7vF3pc9YWAE/NiDscdwNcXho74UlghsNvnNgJyAKQI/cbjU\r\nQW+wPFhgAnzSgrQMRzXRimSEONSo9eY9CZl0rMbZu/fGfGynhVZlepl8plpa\r\n8w3YDLBmHcRa18jzlG6AGwApPKn2Oh6VdtXqsRU2x7wHVft3MPDzd2bGLGVm\r\nOspq+qCNLkPHDBqnHgsQdrsdfXPOLIwvpdI=\r\n=JUlW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1eb44faf9.0_1672909812281_0.17077667382194628","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4912e5ae4ff23fefe3d098c1ddc75f755619724e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.adcdb7db9.0.tgz","fileCount":54,"integrity":"sha512-l6mLAyZQZFx4nF/CbuGUC0iu6FPFgNfsZsIrtbSyLKiPmXT3MFvUG1Qj+0WkAd4lEr3U3Tt1px49pwphuvWW2A==","signatures":[{"sig":"MEUCIEFzhtaDK1gw5MO9NIiK5j/FIzF95tI8iyXYFI4M/6/OAiEAw/Zdvp0i14pT43UCddeazXEYU9I9oXQpwESezsyYsdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvk9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJeBAAgsz8bK1atY87Uu8xZKJEgryM8ebi9CyglZtpbt5zT3vVuRB4\r\nm6CznrlgJZWJpTuBYjtnpBf+U8qDx9TQRhHjutPXGsfRNCvQ+NiP97dXWgC0\r\n8BNozx0QDcUXs9yU5em/e0GGxmyZjQRETiSD4EdZM4M8eKhjW1bDXV8hvB/5\r\nXAb0BM01od98Fe4k6wxeCZxE2nwNEdubjDpVmvK8aMImJ/jBm3F8EYs82Pa8\r\n8Mrh1rbx4zqhG+NGuo6IrXRcznniSGAQ5CEDRLM36QoOM9NFK+uqpO7O3jUZ\r\nNafvFuzVL2vdPlWaRq1Dcv4TQXakX/mCiBWKg8yzNVnwZx7SxzI5Rkboe1+g\r\n1HUL2i/HjVRGniPg5W0sigrjQ+rAXBPL0anu/8U2o4mTjv4zT+3iw35g4f3R\r\nxj4srxpnUBsstB8UBXauya5cBgcY10AlixV5aFfY8Wzkocaafj5OZiLgG/OD\r\ng+nQcOJpvQScMoqPry/yBeIYCp6X7332ueSp/tr/v+iphL/5iHxkjKoc5QH/\r\npR9rXrUmuCUK5McJ2qM/JQDFi5mM7yqlFTh/tOGlzGs/ASYEFhTBEnjXRU00\r\nTPms8uKq+T1uYnuUFN5k5OFM/+fqfTEBVBKO62rDD6wkr99Y0e9nVlRQTVkB\r\nLJHXJa2OW0QX8Zuo9uVrNQQoo2XapVYPc8U=\r\n=Hq9Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.adcdb7db9.0_1672935740998_0.24533729022347606","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/segmented-button","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8bd6ad7bc55436610faf3c6e9dbc395a5eeb89bc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.067af7eff.0.tgz","fileCount":54,"integrity":"sha512-4qAWJe5r9TLIrUW2ZwfgXzH4ZYgoN6qpbXltwvHO2fOwDOxuT8ElObIaFoHm1Tgvub9attkdtdFBiLoixUqvVw==","signatures":[{"sig":"MEQCIGlM+t7FQFM4ga6kI9xxGmmuQI5ITQlXjov04vflkSBVAiAvqgZz5LwkOy7yM4/nAqMACoMHJ7XaLYg0EC0A+/Y41g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD0w//SHTOuF5prQryUL46LMqf7Pfd7bodEXNxl6O9GNKqRNWxGbWK\r\nHqmIJQr4BNNV7w6/pVEySsR4z1dLddCM9C7mdS9j7iMpuhn8HW4dNF3L5uzd\r\nm3tXDf2x1ChBlRQED2b834eeGDb7RHoi5eruBW9M/rryuueybkOwvHD7wBmh\r\nbCysjj+giuKOfdTn3IwB/ZdwddW+zebeDJJCkdD0wXru4j+jNZ4S+9mqUI5u\r\nb90ZxzKNKKd2JobIA3Bud6yoyt3boZs5X7eH4qp3ez17exX8LdDk6oVgw9Wi\r\npMYO/v9jIDQuDlbKuDvhi4uY+UL1ADHHzFyvC4iYxmXWs0TPgrvuWDLQHvoj\r\nyDCtR7GA511uQWk86ysbfCaYp+OqL08x5nWojvMMLircht0REZ7bNEttn9oY\r\nzEYb4FWVWXXD1gLKr7n5ibaidEWQlD2MBI3jhnSSrJKYKL5b5VR6bG+O+nxh\r\njJgUq9fDYM52UP+m4scRTK0MO1P9s/VfvHDOKRns1AFWLWQ67WDa+7+MUcKr\r\nGnMVuw2TrgnSPza4q5B/fe+jn4r9eliVzjZv0YBECx2shhu7jA4AtOqgOek4\r\ncGqRheVRaidNrmJezvRidCZL4rDox1vQk2kiErjzDp7LTmRThCBly7MWC8vJ\r\ncJ80GlsgbbpjgLJUDh1gcEIth/ZnU+5Cy2Q=\r\n=ReRr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/touch-target":"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/segmented-button_15.0.0-canary.067af7eff.0_1673047015327_0.27103911456529395","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"abca91542c28fb0a9d9ff3140b77aa4df9ae0722","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.21d1196a7.0.tgz","fileCount":54,"integrity":"sha512-n6cH++icksbN12x64TcxvHS2sn/st3ftykxIwDAXiEWyy3bB1rXYoaHXNsEGxZxt5snGcuUwKym3X4XgMfL2UQ==","signatures":[{"sig":"MEUCIQDrulhVPINUIHS0J8GDirNSqKJDslmbQBEIw5fcjFVlkAIgR60OvMy665DaHqhqBN+kNfAwVzSZqYsON1xT3gNElzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppDhAAoGwx1Mx6AGlOd3nKU91lrusFFI10K3YpXodmAr9uYsJpG/Kk\r\nlL5pXElo99ytdJYUqcqNVA9kdlRYFlppwe1FPXBvcgalg22VpoACa+fI+ETV\r\n/ZzSIznNPfOP0r//sOQZi0ptOmmP3SAZnPaFIQN10R/QMKDsG4dexXWcaxws\r\nBfIoZ1fO2i1tDUFAgZeqybDcSk7fHk+mlDMQC8pc7boj/kD2fBy2zHyHlc/S\r\nP/CrVwyStSanylbuQuneE1k9vHDdWwXeA9X0QZTNA6LJ+Bm2YPI4ezKBP0nt\r\nXNXXlBVa+0oVpmdmVlR1uSO++NdExEgiwhe5G31/9q0HkhVv4yRnNkVctIZa\r\ntbnQ4k2Y/QJsclan5be/IAk7dPSOIjAhkGL+YN1VMo5SidAyzKRzuEzdXLzg\r\nF8REgVYdr3OHrCLwa/nLLned2ndEAlqeiUYiG13T76TzhuiLz9OEwkqCRqR2\r\nPb/zsHe+83fJAvL2ioJc9hhmFHKAorF4wagoF+w/BdnzK+7aCgijexyiBPEj\r\nhuHyQ8rUhlglA3dM1RgnadomJyE1Jjb2VWImhn/WuoC3HwKaX9BQmXIoICtg\r\nyBTJ/uaTU2CpGpZTSoaSWRT5HX0b8MWR6Lr+pj7R8ag+1il0TsWxSvhPDt5v\r\nxbo90gSDh5tPmZKALITRF5N8jPac7DIbAAQ=\r\n=BoOq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.21d1196a7.0_1673261029172_0.7393584362813024","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c07a9c366eaca8f06dc5f89165e27dda8718d9f6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":54,"integrity":"sha512-UXBmqEXd75G+Bm0I9OjqO+i7rtsdukNcbISjkgFIBWDTiXaMwYIYEPEoW0rNxSFckNiXSHNoROkFy6vtL5EG4A==","signatures":[{"sig":"MEQCIDaDBI5ecj05fZ/RhbloC3G4ykOCyg8mxd6McIoo1NtpAiB3TrFjsiCbqYGkQlDylKQc9BVVnkA/TtOz66MJ00YbhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9kA//fzGni3/ScWARu1ioJEjUTejhCGngPS0iU/8ebHj0Tyuv2i8g\r\n13V0BuHJR7bzTCdkPj+VgpadbFD6b9iHB7ul/5jSnpzGTcLj9WteD/lRDr1/\r\nakNRKCU9+L8wcuwUPM2khZG4f8X6TNIhXN4ASfO4n6Fk5FWNGb8mZo9FXIn6\r\nB/P8vRtGvsuqWlrLdFhN6FKUfroWTQhoPCvi8vu0dzqHLak4OkK8HCuLBYz9\r\np5al09D4FnB20GG2kB/D7egkfHOXTcBC8IyOB50o/9vbF3bqFaXfxzw3htdq\r\nPQGXTnswy9oVW1m01pOXfMT9hu3K7d9b0bkTZpRwxbyZnMAHAshE5fGoTgOH\r\nrtjl37LHVGZ2AfIfzVoAls4QregNHrvKkc58Kplpxy9lm64Qo4+p2RQW+wFg\r\nhFgIz6IaVaNU/LGT2zMTAT73YzBO/FURm8s3KwQbIqDr5IRyQ9val8DrxF8N\r\nBGErVbkskjre8BwZeFaUpJR31YgEnJXYw+QVp77ZFWEmHJlHi6+A7/POryYY\r\nOCNVYFHfbU/rHd8L/rLeREdXBt0a41Vmh+4RlJ2ESK4Lx9im+rD44BlqtksI\r\n8Duwis6tBOcfrWAy4gNn0M2hMvGvtdm4CghelQufSCG0qBkZvmWJsY9Q1G7v\r\nl8iRne2rRgp02S9qf0J5jxyfnqDs5+GJbaE=\r\n=qD8F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8d2d8d3c4.0_1673303088470_0.4168657732418355","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"626ac348ae1f86cc07b123e3b907a7a23f47c2e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":54,"integrity":"sha512-ipX7yGpsiC5bJaFhvCfOVfn/Dvukgd3MT78O+SlT6WqqlJuYrjglYpikisj2PNwWA9auSdqrR5Sn4VwvSEbFrQ==","signatures":[{"sig":"MEYCIQDbo0IMZtNYl5IBGhukyGRmE0MnqSzhU1IxYNST1ig5rAIhANKf9vCtZjPPit+YFOslrv4vd0gHZOousr2OLRI5npNa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZJOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCZw/9FV+Qv/CgMEtciwEbLLUw/eKzYNXLy/7GcWA0IyNFckbVueus\r\nLIy0fbZdb1dCvsXFFep6Neo0TNZjNDXyJlVocpCHUr+JzmApLomBCfB5Z/JY\r\nuYveUOpPU/exVtvaA8pUMGcoXxLV/RDZBnfUBi51YLoMGcAikGwCrHaKZ8L7\r\nfgXpsTnKRyyxxl5QQns0/YSH3mnv51NRsYdjtnYl5aO1DVFbhzYTeOzQEbTa\r\n5qR0Zu23NomYpA2x4RPHB3Et2B6igmevctd6O5cOwqkdt1UmQgsA7nvxBx1u\r\nLCf3f7v9/j9nQ9vGmHP5X7uXBCcekiqUT1eAusbKckcgl05Rr2ivYKE+vFWC\r\n98HVLO3vyOX8gpFZ0vW3I8mDPnz4xPcUpxcspPIG20HOZyTle43plFIZVI8U\r\nVLBea/sIp6OT1bnQQuCucToZ9suyuhSiY6PH4lcB4BzXQfP2PLYir4/QolWW\r\nOz8KTq7RzRaROmE22eHLexa45MzywdLqyqC81QOhVaWxHJ0Pvj+mS+Oh9fih\r\nlSMJMErzBJa6W+hAHvey4IgTTgSzsTvL5BJiQFYtKc1gSIGsXW6uk68/8bQS\r\nO91HD54Z2+YE20vRFptP8HNoGLLfrKaxs943wNmKt1w5/ZCaPLH48A8NGBUz\r\nbjtlCcbQxRDE5RpmC66JDrlXvImkNeksenE=\r\n=g/4V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fc6ee6c32.0_1673368141750_0.7505421231319815","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3bfb2020ea389da23ed1505e551a201b2e986ffc","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.73537ab0f.0.tgz","fileCount":54,"integrity":"sha512-/feQx1xC1GMjEaibbeCJlrtyndY42OIXs88UpxY+g/ILdXJ72oEwV5TN0WzPGCATz8Hi6rVGry5wuURWEB6WWw==","signatures":[{"sig":"MEYCIQD6xXHgrq8oXIJLR3WEKuZoCx9IhgGNgoRqa85AkIvkuAIhAPh+1bcHDVdqWDOLurCdnnW/hEdqT32jlYZi15i5aThl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaqJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp50g//Xyke17ySvedGpAqzFGoIid9kWZla9OGtL3dQtcdhvtH5GcUk\r\noyzueWy2QgIHb3i9IYQ62YErzX2JZk/sHHczI1Wfu5Urn7hZi1kqvec4QGmy\r\nHENx1F2xqb2SWiL2i4k3V7CO9Wb7s15etNOBZ9CeR4UfsQXi94Hi+3UWVlHl\r\nEa1b+BzgA/ukebfxNhkCkZr2V5zqae9CF3lDwKt1rJENrFDeTWxMXsMZxCeM\r\nmP1CVK6Zq/zZOPquEuXHincjpaqCTQs03j98Aq6W+BNwUsrDr54d6WTP2znA\r\nWjWvVme0gK8gIlP/uNujs/wb4UfD7KCY8hWD4CnYWtxnIWy94U59vXWrkYPd\r\nyo2t+V2sjzBzvGAlB4cQNUWU5Kk2tubH+Eo+4z/17VBf6zWWIz/xUIYr4TRr\r\nNVZBzJmuTczw7DJ/JlmbhLug4eoRfUtz8+zOSllwWyUCLySOQUsCB7nOaOb5\r\nBEkRrWkTx1fz+GLjFjnKOqQL1ok/culhzGA+E7pz7ltEx57d/ybv5+L9C2TN\r\n4+DmY9eIhOgGadDYzgAfyguxigvRk64KyWlBNGGSZdPg3ipVMFRssYTGxN7V\r\n8bfqsdgeE2/6PmPH9/kRpIJ/GVqN7CnAPkHyFBc2cSAIBmwwURwDXgRefEqF\r\n6WaEVWK+BrpFippmYoN7vZQl6H/gih6Cccg=\r\n=yqq0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.73537ab0f.0_1673374345362_0.9491737295389617","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/segmented-button","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1ea1409ca726f0a647670314fad408bc6a580241","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.684e33d25.0.tgz","fileCount":54,"integrity":"sha512-bEGgg8vgXNLyukyV8HRjFMuQ6t6nm5LQ4Pgm22um61Yc8qyi0BOqV41OR4SVdUrUqZxh1aVD+p+4NN03+LfQXw==","signatures":[{"sig":"MEQCIAdp72o3KdGh+8LSxY0dGb8G0jMpNKverXNPky3N8YecAiActZ9j533BzZ6vamGn29FWbvZDw68VkLZdNOSAmSj96w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbo9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+eA/+Jzp9lDgZWQIeBfG/Wb8x5J3PIPYsoS7DlO7XZyfO5VtxBLZi\r\nSJ9OMIQAG+2o5En79Ck3FuaLvmzt7jY+UeNfjla2lwB7WQIVSiIv1Jg2ku2/\r\nsJPDWhFgYcJIkhgvvAVmGkKme1TaxcJs+kgcfeB5v1tbaQHM+SH8oXfke7Sc\r\nqPgqUNZ/bSbCmvcgGstuJihcrs1XCaQ/N5OoOaRjSGAU6LZVQ1i0SN06EZh4\r\nd6R5TyUM+5eNUIeEOLnD4S4t8bkTK8RgzeNlcd/yNuan/VJ8c3lCX+0B0Oz+\r\nfWU4g01acUlRK2dOGabOfUwl85eOItjwDDC2nHSPpVxHwnJKXq9BhH8zXXD+\r\nRnBcy9+GSf5EAsy9Gld2bBT7wCZ42nNiSbvwCN1LHhmW61fGFoeR9eBsEOAs\r\niDY6r4wzSkmMUSm5yMkw946XKDmRYuJetBFjMUugkFTb0LTqfEhDQLPUeuyF\r\nsss2nHD2MIE1KT18EsdodiVZxWh9//UCXePhwTanxCPDMS45/Z8hqpbob+jl\r\nhGTVzpIt+7MvTEyLXcIjIz6U2UcSe+JeIMetw+hcZWImt7KVnkpJG0af/uvX\r\nnO8ZD6q/ToxCroIbffgsJK7Ey5EYX+GZLT2PVypAqUvnMy5qLYZthWtOqEgX\r\ne0dBVHeLeSKtu0T5zYSssi1WoeWQlbiclQw=\r\n=wHwN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/touch-target":"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/segmented-button_15.0.0-canary.684e33d25.0_1673378365146_0.47131533920464297","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c5d49915e774efab2db0902e6ab3236ef869dd81","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0e89aab6b.0.tgz","fileCount":54,"integrity":"sha512-gtiGfIJpMaU1mFzjR4nXcnob5yeoz+7NgEeRh7Aa6Uk8QVLA7DttM3+6FuyfT7Ks/xi0cTxbky6XlSnzvAfjSQ==","signatures":[{"sig":"MEQCIEb5ipQSHkFGCFRdXl5tEPtpw381/TQEVJ6MVEFdKSqUAiA0U/c2rxc+XDhLXZLXCebZRr8Yuvv879oGWpDV0r6W6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolaBAAnZPCG2Qh6l6+hg3ElsImVM6yGr+phJQLXxhdcL79sUGRFs26\r\n7CHgyi5WzBMzhHYrlAYoIkGBYhzm/CgIrCD/e11Ir38Qd3TDLAsouLJaQUO7\r\njSSKgl7a6uvgSX9E6fBS1TjOIDR2kh1UueNKp7LpJa1LPQc1i/Xhk0x2dRm4\r\naHNRds9Rg7D0nikZ+ETlAXlVM+H10aVWIJLpMQxqoxUzAh9qbJMjpUI8g5KZ\r\nuSkbaoAbX99DS0iuIgmPELUOHWlvAiH6wdk/Lbhz8QHaFfWseg/82RsUWZsC\r\ndp3t9zfytI5JMubkzUnilB6JzaLFHqdeIdUt5L7CY5dRFAUfFaReGlkz9V3c\r\nLaxI3Aa5G9fecMNMQZS1yehJB+7HaZomAYKUqJU7aIfVoZmvAKDtOs5h0DBq\r\naaA/cQ4UL3cBzd8eD2wdiA2uejvLJCXxHrRhXZ5VTGc0d1ZnnEUV9ILeE0GS\r\n1GxHOZyVcbDzElWcAkRC96z0pgyuNCeNwcOEaRTuFphNRqXo3VehJw/RFOlg\r\nFJMnIo8PLcqJTPo9wARRD11ldqR3W8FppEiNn+7Mp0iyZu6O/T0M0A6dkjuG\r\nwqAv1DlJCXhhF26qAZQIZ1o2R8WO7BT6PvNbS4/ib+fO442rUU9zH4QZTtNv\r\ngccKJuWaBkUXajrp4znuLGRErNTbM9mmF70=\r\n=hl5M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0e89aab6b.0_1673453897835_0.2261557192783501","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"26dcd9f1027a7a0d0604456c0ecaffcaca180ee4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b0103d10a.0.tgz","fileCount":54,"integrity":"sha512-USPHS2dtc4NHuS5dVKQLMTndyRX8wSkNpj9tXRGBwrnsTZ0E99DOyJdGLwZO3sKTIPX6mW78yTn+SKbulpikUA==","signatures":[{"sig":"MEUCIBoFW0uaGtqWNVmlrGegOvkDNwD+mtaLNypJjXS92XXFAiEA4T/RfbNEk3kWiRnOcaaPBq4AIDfSLvTfprU9/q54efI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwo+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+GxAApGBFTwqnFNBj6c14NlIF36rE+E/1gasli0lhHikeZcTcJWLE\r\nypF3PeQaLQ4lOIch5iguXCDRcifq2IM6sfAY2j/BL2UVt37WTgNUKfJoUNFw\r\nm3FAG31jpk0iMPu+8hEoIwBJVzq7QzykIkVjxM9pjBKE90UojgK/8QPRD6pW\r\nBoaWdxIodgQYO+9ya7xj2SmKcbNqOblJCj8zyk8lDT6rP5BeWthIOJqKU0DJ\r\nX7BVAz5RLkvda8OXm3QxRY1E0gpzJduTV/6GWrG2WaCzs9B/Byd4xs/ELqXj\r\n0B91Bt447r985umtvwUSMj+hLcG4phisduf9ulX2OcwrZZEoysWn2hBOfsp8\r\nsdw3uJx6oOCedu5hM5EOTvNU6RZIDLGbDhcM36RidOU2G6uqiUJ8dgImhIdO\r\nyFunsrR+bbkP0rWL8acTHefWMWQ+5pbFQHbJf2MgWHRLnUXbUowUCN8EJQo5\r\nMiCx+j0B2lC7R195tv0+DdNUkk+ZwbZZ0ccFsZFzL1Nhmvl+LJabHtuPnkFh\r\nptM5Rd7baiJmVaLBytpe5pyUz0fK5OArBnxEgKmYuMfI8obXWAmNueUyEzRn\r\nXE+NS5o/2ho1hAyVusaVeRlP7XkFevp+5sSmB1vQ8XGQmnxWBa3SxlE9OlzC\r\niWjyQ3h+KdSoePYh3b/lKiiB+X3ElfQJyZo=\r\n=/asG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b0103d10a.0_1673464381928_0.8666233162960879","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/segmented-button","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eff72c5818399fc866b1f8fa46e81e7a2fba4dc7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.50e7a5312.0.tgz","fileCount":54,"integrity":"sha512-jFM/34zmLQuCjBIsgFGTd5C4UEPuDym/jLduxRriXX60zCaYro45UckqwNlZzuYpQDUAfJPBhAqDx2mtFhi4Pw==","signatures":[{"sig":"MEUCIBc6vkvXJDhsLk21SzBp/IiMnQpd9JfLgJ8aIrjNNWfrAiEA9W77QDImA67RNHIDxLseXzXAYti/sCuvrb5g/D7pIrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/IQ/+NoRkFNMtjlQH4fBtxBSBbGyJ7Fah36qsmFnC/8DsuaCmnilo\r\nbtT7vFNk5AKUmACzWiNleeoIl3c6+ZbVZpRCeD0Dfpw6Bzm4YTdTmYsq9bzO\r\nYyOtQnAWpLpNyVlRYLC8NQlcgwAHaD4gLvBcBha2Wgum6eO2eJeVAmnaNwH7\r\n9pENCHmeUK7FaZJmxLXKm5H1rXhhEXy3gxx/JulUJxd/8+1R8LdXXasUtkej\r\naXcCKos2V2jMRotWx3ddTj7EYls2u/AH8ILHiVNPlzP/RwaBXBr+uuc63ftR\r\n3UymbBpOv4BpJY/bJsKa/uFY8Cwnw/+lM89VCzZP6wmjJPJRuHrgqy4YzE5O\r\nxaKIdP3VEPHuSiGEqgDFGfqSOPYRen5r1lIP+un9S1UPQN7VCK5TLsKRjgO3\r\nFqUlNj7RmRAof63OYLLMmYxMvN5O+R8u34BB/+0cMZf+oiwQKyUYkFuKAIHC\r\nsWrH81ralEESNc3AtsEkYRmHuJe83fiBaywpvzaUm0gHRkx8zpq2ydzYw8Jk\r\ntL95aa4yBk0I6FFVm/cL2PrpFNNohguRX3FfunOXq+l+n69OvSQX16y64Yri\r\nGoD/oU1aOK5/1hNhDm+cLUb07GAUz7Oi95esRVPh9Rf1XTIzZs9zh/eHE5oO\r\n3+9tVvuvWWsSl5ZCuxYMQdQ42ae0NVsahJM=\r\n=JuJO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/touch-target":"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/segmented-button_15.0.0-canary.50e7a5312.0_1673470505205_0.08806470628288832","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/segmented-button","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20fc64e807fa1163295ecd563e0cba26a2100b30","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.202823f54.0.tgz","fileCount":54,"integrity":"sha512-jAyWRu0PhwFD2sO0oB0Q8yrljvs/X4lM2imNdU/uoRQl8jYHlSUDWrMbAWZZGEUztAdJSciPNd444kGRJTN5GA==","signatures":[{"sig":"MEQCIAaXvZirw5tc7Xmzd37/j9cjd381nANwAvvd5uCJf7xDAiB5eNjsOzvooCexOwYtvbdwv3xhqahXX59tIVSV/Ti5qA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Hw/+MrGMZ27fltyiTQq2sPRMj8WUZxzXJLJvYIR6iAw93tKZ2nMt\r\nvfN9pOgVa8UJtngQvsLcPpo3LzsB9uF8mwu84ZQeQtEW1dtbri7KyzD9JP/f\r\nM1kztaKijA/vFIp3DRmyJQTPxeXE6dopUpCCRser/nwld9jRDsN2sbaUoHgO\r\ni9zs2MoYJ58AuA/6u+7IexRzC9tFgfWBU9IkG0rXnaG2isg08ovu+HjyC3z0\r\nrbDlo5NVglCPkzcxkyC7QaL6bz1ap1rlnyn124J1BoeoSzOmxJAJCndHyyJR\r\nhzMWW3sP34uGkAE0g4h5CSdm38aSdKvMc9LXGr10pOygOJWPLP26b2nzSvSp\r\nZG7VwGW/sHLMHqOkv62j3jNVaotBuJ2AiL3kuKEI36TMO6/Dyw9wN/pO4pGD\r\nG8EsWfumzxC4l1JcNDzUCFafFRshjKTLxgUz5ESnN7C+CESk7OqyWIyb3/0B\r\nNaXNX3mQIeU8u8dathaI1GemcqIZr3cTA2zF5OmoLSdltLpAu2ssRl80E+b7\r\nSQ2uUQ5u00bZZ2VkWkNkrr9D44xqQefC0x44AeShyuyFAe4RB4ZUO8blBvpb\r\n4XOHJUH9JijZZNFLpah/MiqXya4fNz4rhtzmHcEo8rqqD25Uqn4xrwBgJP8W\r\n0YVc8UB6EPONKEu9pFMmSwnVC+1FreHITmk=\r\n=OY0W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/touch-target":"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/segmented-button_15.0.0-canary.202823f54.0_1673472996618_0.8429231526608141","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"75273a97055166db5cbccde7b87e675c1c58f649","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.199fe2a2a.0.tgz","fileCount":54,"integrity":"sha512-LY4I1imJYdLCWmMK4N+iIqkcE4oC0nb+eqMpuCxfly2LolhgWVbGhdKwErV5mJFL72gQA08fY23thqbtGISG/g==","signatures":[{"sig":"MEUCIAWbvws8tI8mQ1WMxl0q4k0NaLWkG4nxC8vQqiFgFzeJAiEA4aTv6cDZYFGDoTClttbUCPVxucusePyq/GQoSG9gMIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd4g//UUTUN5+ESt3fl1I4AVLD2vsHufVvwrbAcH3Ncd9/mMB8NBfG\r\nn/xPlBzRggDB8y392UQ+F3H9o6T5+y+yocUJtUtSNguELoFR/MrNbHkRjajn\r\nxY8KFmqs1hggr+bjaHuU7vGLVweBZU10tOUxs0FrpbvlgpPDW5rouh7v+lAp\r\np1X2tEQEPR+w2URal6zxsxKoqOK7bgoNHkjVMaE/ds4X56ks5RbsqU/Ghloy\r\nAUf2/FdcilNeqBveuz1953l+qe/ivLBEpQTMDo7WaNwIBd+VPsppkdeeGR51\r\nbEkd/tIQ4sctz7vm/ETxknrfMjYDRjOOZZTX2l1yDWL1IpKPMA6iYXboLif/\r\n8tuCEp9ttSU5bQEDik53bGYHdTT39JOITjSTiZC9ddiBCUj3C6/MkKuHLq8p\r\ngxaxZ5jx2Ep+0man3pEN/uNocqbyg2X0RKSQtfU+VauF06PJ40oWJ8nybBxI\r\njEbbvzyXHnIbwYukoWTfMNnDkIUs09vnLrcvf49StwDM3wyOjp2FoHCTxERq\r\n5SWCH63l71DuaGbazKeQOodGkXpFaWR6af/VODNZ8TmxLbaciQnPtIUJ0Ueb\r\nOLxlii6A1n6geAsffXO7Y1pgqsLUZCKg18JuymL5XcvocCeBlz9pjm8/6qVT\r\nNZ7PLKfSqEQCFtDulNsL3FjSRZKTm/TL8Fo=\r\n=JdMH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.199fe2a2a.0_1673474193895_0.6811590148166107","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"86a4be9d30754cf976f371b0cbd356f4fe012437","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8c0786d6f.0.tgz","fileCount":54,"integrity":"sha512-x1aBLKShUTrcpURdBHz4n/iQfUtqnv9AIeLZcRRFrpHR7jwTz6FwR2HUezJSr8NSvr7ygoVnl8pYOVtSCJYjuw==","signatures":[{"sig":"MEUCIFnz0I9sHVXXxaWUewbJs9d8vFgjNqnEcb0QrDbrctGjAiEA2KNJn/91RUq6eduo13ZrRpXiuIXMf3V7QL/9RubEvoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUmw/8Dzz2igqX2vDWLxuXtnR+A9k/JMqYjid23OlhllW7raOL4bzF\r\nhlOaV8ej47I80HJaTCPNSqykb6uKBACoLzxn27YnMm3zPTcixMM1QI97O3Jw\r\nf279agTGhQRksDGjnwgKWbg1zRGGZVl6wFRiDv5Tz7ycwHJDejGqwhXCCigI\r\nwY5luxEf2rOW1C9QVsfswnovfAnkdIXCwmIQwgZyl5MIIChnMrLcOWi2VoAE\r\nQoXSb8oEUYmMuXAdzKLkA1GQjvSwCBiduZvYL1exkq4ZTNHQ8I1a1GdoKgDk\r\nxvQ6YEpc9ctk13eWjxvvobEAYMCFhOOmZLQRvu4jlUCuRX5T1PV7E2/sUgsW\r\nXWhot0alffxQ7lWni2H8kBdT9bXjDdGmsgRLrlOl8SDum6tiPOP6Qg2N7md0\r\nn1xLMIad9LAT9kAnt0vGaGqTlmWQpuGYDG5JqM3MaD/cY6QkNNDbRbkGnv5S\r\nKtlmXEZ77UH2+N18ym5AxiFy/BTVCdnWYD4Op209ndaVibNlXj2+vM+LFCK6\r\nfuKDvwFKBPGNLTIbYHgPzvn3dfRZa6fqtmC+jzYWZpy76NhROjutSjH3SE2I\r\nOfxynpBfz4pxHOl6UT+atAh024DtbKTzT2rNUH75dEdFsI/uPLkU0V2pLDdY\r\n5CCwT02mGuKIKCdgEQoReM765zWNbMx6qDQ=\r\n=fYhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8c0786d6f.0_1673534229806_0.8235764794748948","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8738a50fec8cdc6c029ea7ac1276fa8a9e24a1b3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":54,"integrity":"sha512-fYG6T8veOTL5Sa7J3jnA91jYQBUw8gUs6BYDKMm5KPdL/bXrWbJrpQrhQ4cCwGx5tPg6+ClqomAtdo5lSx4ATg==","signatures":[{"sig":"MEUCIQCSz7YzThNzPpoBR4QzWJSk4KIery0cKSclFk6Va2sv7wIgcM1+hOx/wDzwv8O0+BEyMPL9tQfRB4qb1IBE0KaLPbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmopzw//S7O8974Au1JPwH+RyUfV5kcVEXNDqmFAiba0ImckoR8rtSLe\r\nxENRk9x8Pv66usyOuxv9cf0w0Bi4tjRu4jzSi8BVUEXK5aIZxfXbHWLuevj/\r\n21gJ7H59qUv7ThBIT0uS794yCPmIasf/Dh3qVtKCBnitmh8965Pe+/dw3/0H\r\nFn+gUoLdptyU0dMv+Bk+dZMEIpNu+Dk2tEs6LjKW8ualtBX/OLRdCiT7G0IC\r\nJoRhrGWEv0wnogA98iQfLWXqz3MFlX1kJLkf6s2kCCSq/azFvyLkObgrsLD4\r\ndyAfthSQPfw8z/W+7khtulFsXSLLtKVi0PRnETIiqsm9S3QEyQ5XuC5rIMb+\r\nzLGDbyIRTmH3evek8ViXqjBGCxxGAC96ZkBewQS3/ecDw8vwyRVWdLsrJQ1Z\r\nTiDwVuqr/dHAgVOPobvD42LJQvYsQZwH3W+BJdPNEdrwTlAQgQc/15WYIcYa\r\nkd7Nfg8rWAR/xvN81G4Id5RH/NL+Q8c/3HISv7Ip8mCmIll1l3243Su23ypO\r\nhuX1ce3WnSKWNSeFOuQmFRVdURmXHAAOEac603v8uDR0VqGeGFyq1bK8cJ5G\r\nzQZy2yNumhYKeS0olTd2riPuJwu2Sbm/N1NCHSly4bhX3zO8ZL3hla2ldutV\r\n5JIZqY5maEolDM6fVSZHyYKD9e7ekjOnL3U=\r\n=JCQb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8a74f7c6d.0_1673983528079_0.9814470019632562","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9b08a6920283be19efa933e8068845d61f18a53c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b4687fdc1.0.tgz","fileCount":54,"integrity":"sha512-2nx32HbpK/BeLdqergL8tYsDy/7VzQm95du4SLScR75BiJs3fxQLkkqb8hQRlMytuPf/a5o+jOH4cuWgBFsndw==","signatures":[{"sig":"MEQCIElPFoQCd7Onbnwpz/lZ+uSG6kaIpqWsXwo+2hXDFDKuAiAdsr4kI/0KCRlLBdyu++9+GX4E5GQjbYWbWFaz65TCtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ8DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV0A/5Ac7pkoxzr0SkRpNOlGYMjlzQQh1Q4+iVXubMPqDjnAcmCzXd\r\nXE0ls30GnMe9qrPTzdVuD0dP3DF+FilT/UL5o6zS0/XPTqq66gd+PMOi3tTN\r\nrHLwYLKDE7gnmTV8nGU1LW+Vkxiq5dPor8kAY/piQIWix8R3S1/lL6QxNOPG\r\niZkiJ/JGOdWZzRNh8agWKx7w3JWK9qgxtMY4+IO1S/uM+wjk+M+lFFN0lk/j\r\nhOz6ct3LUCgNsGVQ+G3EtKfRf5Vp1lqB4tldYez+7etBzt5Iz7oAnDJmWmr9\r\n+FXYPoxECcVDDPopciDImc0WlS4DKIn3UihvQzc7I42SQlR2Qz7AnknuJ01c\r\nS/l6mr03g99hcIouoE1WWj2ud0BNfhtjMOaa17QrDtFACdG86JXtU6CDcd1Z\r\n5PBsGJTfUHWr/GUJY5GE8lmNHaucIJtXaE9Qi6yawE4gftjsYAeVYuuDOL8v\r\ne3v+bY4rK54en+Fq3o3iy959WZMVk4Bor64JIHlO5s2+KuHbsZO7QB8du9EU\r\ny6JuTRcyNyOnLrQ4wLEmNy2f6l+WHVbeIIO3iWQu07G9WEQ90rnYneb70dhZ\r\nB/PZ65rEZrYK0aThEkdMjMvJWBVWcpPXMcjl2sl598nzAzbIw7d4ke6kUzNy\r\nifEoWo+0XtxnSkOzzwAHbvw84xf2aDU8chs=\r\n=lI2v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b4687fdc1.0_1674157826928_0.2548154678374239","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3600e6efda2e4c4526fcb7d9e2fb975b30cf5a64","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b836b9892.0.tgz","fileCount":54,"integrity":"sha512-12xcWAP9pECWrTs+QUJ/y52jqqdWyjSBvHDEDFdL/n06/nmv4Gr6eX9QHdTQet5ULgeZ7CnGahNKTdgzyS9aEQ==","signatures":[{"sig":"MEUCIEzklh06rR6RB7XyBuetr8WSXGerpSDAtCwaSYA95fg0AiEAqxN4Jx7tXKyjiwRd8brlobB5H7lIV9KNi01xyvm3uAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqy7Q/9HYbqurgMsSXwZFU0PIIH6t6X2A7yliwe8o4rb15z0TkJYdkX\r\n5QycgoBbei2QVdy86hpZvcUrtnKY9/GZbAGm+On72hz2zQTKlejvOePe/RH1\r\nsR974pfDW/xW8KGxTF/pJjOwJvvyF2IX0rwqm6ubmVWpm/twhNnLb4eCZKHX\r\nt/rmnnE5RyPU0v3iSEuE9hW95eFNUGccTnx2f13B2fnezLQRRswoyhLuU4yJ\r\no9p6azxNkykK1Ko0ltZGX3TVUduxKk4uCHFzLoXFTKpGEKO/n6vw1NlmJarR\r\nFRmHh09S3g0KERvrhdqr/ecF7Mj7fwAQQ9AuaH9YRogMNi6j5BDydSiHrJ6W\r\nskmnmxakkA1h1of8MMg/BZZUGrgyQo1SGrW3e7WA2D32dofHctvY3fh5+aw3\r\nlivDl2KeKTpfY8NTCeJCuEJL6R5/N5u4MhfBXrt+ZwDnH+ECnyY3TKVpua9O\r\nt0CGsZZEqSm8O2fr6pv5+GxUiOOchDbbT5XRULOUIoqkW3u4zRQ1C7yTDvdv\r\nc58kR4rQ7CUTdVcbYq9CpNVZK85i0eOnoBa8TG45FKwGVhj1io9KpR9lDntz\r\nOoM2wlUlCDPAGkJmFZI9z6jIkFRISMT9/IcDkCNyHXxCHoGvuRX5kHaBfH+i\r\n/sbAJMlUL4ZXTva+uPdDnXt/JNvXSqIlk8I=\r\n=bXn4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b836b9892.0_1674600002467_0.15456659240540827","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a6f2e276e8b66d1ab34216abab00fb573c4bcd04","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e8912fd37.0.tgz","fileCount":54,"integrity":"sha512-2dWkTHwZRKwjq4kZZguQBBGxFV6o358Y/i7+smpBb1qP3yg8FW9fw5kD9GPVtNxeIfQIVrotqgaS9af+kl9h7w==","signatures":[{"sig":"MEQCIE2cVNwY9EwEF/gBZU74bs4ICXRHBCg9jzJbTqbmxozTAiBxqLiz5U4cF1LrFiLc6VTdfkIjG4A5E6+mV19PD0vU5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sbOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLGg//X8DV4JB7kRRAQXMG/AWgzwMqwaI3thEGMknDVtM8ZhhMAsuM\r\nByLdhirGq3lEyskjZ0jdRNX5eAkEfdOGD3xYU5HAu8bouo3vXGF6f+5tUEln\r\nk768ApLB5m301MDL0bsAQVk6pYx1HU6VykdODF10Kg/m3xm4x9BjsczUYIYH\r\nAAsBUVcgeZJCvd9MA/yzCQI4ckRKLXgwITCi+Q/qDuZWYEqSfAOUBHveIxs4\r\n65MD0sPV3Zsu/lVtHls69Fq4E8QIrvoBMzWCBgbRB+bL7I2Mlc4i+FOMiugS\r\npAuYUj9zUo3IVnR6tv96Xbs8RqFBytolV9Q/wbpw2c4EIgFog5rEfpggw4aa\r\nPW7dzQz9i/NtoPUgzadLf3VCTClnTXkuwY3TMpJsOP5SAIN9roHT/z4soefM\r\ns9M3lKFgFMYbwTwMT6L8sGZLsVEayP1OlCuMTBBckMd6UTDoOHjuMQqEVjYy\r\nosU8U39xRaj59OekKOUK5II67RqeanzvTg5joWK67sf6GTqXkj405Mdlhhrx\r\nPnJbTuKFkOdGU3E67RS+vl34lZetr6oVCs78qgPyeBatEPJ1eii+3/l7Br37\r\nNwD6PpxK3vhXyNJdjuweYTkZqsQ1Ry6x5GXUGcoBISaDpW158d2wOGXa3PjT\r\nSPdxZd4G3eI/0eSmIssZZ/afNH7DFvn8HfY=\r\n=DgNZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e8912fd37.0_1674757838315_0.3949807692481875","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/segmented-button","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d3a5fc5ca3a547b3dbdf3f4c22f2389e1131814c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.16fbd30ff.0.tgz","fileCount":54,"integrity":"sha512-mosZWhzZ991Jxbt0D8sLkq++RG11ovHLzyc4xs9nD0VAAODB1xNP9udWvPA8tIfY0SG6+PB2W8MxG/2Opk98FA==","signatures":[{"sig":"MEYCIQCVRROyX5JdhMSVfcNjTmRewKu1SlJUXPbyrbpDOe/HxQIhALqJqt4al81Dqbjm6rPky0KgXOYQnCDnxG25Kiqpc+EE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptqQ/+I1T+dF3chEhRqWGFMNw24Gntem6+hQ2EOZFdOGuGiNAIC90/\r\nR7+RhKx4YdF7SosidO07JZuuRmdaROxPKAubZZufrcws9VAzCrUKUvLK1NoT\r\npBfP006ee/FjOUZEO3sK14Qz1feELo8uJp8x795T2hDZUmPgH+bTZlLJl1cO\r\nePqs8OIVCa0YhchRWx8a/qCZ+saRCbk8zcvfy6P3bwxiLWbHMdOc5Mp8UM/T\r\nUIAiDJUnT9gOlY6+QzfH+zNSId8iLvSdaWD1ASXa7o3THdwYbz6KXyufk1VO\r\nRcM24/QXK6R1m1Kh5+JSNuvIpz8vnBPy/bT678ofgL4NUoUie9tRMt1M+vlO\r\n/PyjVFXT2syeXCFfArk/3uQoccvLCZEtNdYLNBZZx5DUkadER+buWQ73TUhi\r\n83n9j9+ur5KBbJdvqeifDYQSyLFiUshdxd5ckQ/DpkedTDyF9T6YOAwAR5xC\r\ntmooUgHxMcFzGgsdOhA8z0GMlUI5L/U+7u+jgo83dOh3S9sLAPO6mDZIOZib\r\nUqtHMkgWRKgeKjytOVLKzF6mkKU2/3vOFdfXxvbB2GxppahtZSCwgr0YMaMv\r\ng+tMLIOkswCyw0qpGACJQ8PlledOCM6XsN7UFqVgy3Hyw5Vm2j9f+fjQk3Ye\r\nMiDwJQwsplelF8oQFv+PZz6M7P5RxWo8VVY=\r\n=rnd5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/touch-target":"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/segmented-button_15.0.0-canary.16fbd30ff.0_1674758126147_0.6011794226169767","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"39caa5e58f5fb46d9abefdd31e2413a3120be4a3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.033ae083a.0.tgz","fileCount":54,"integrity":"sha512-zFduX6e4IkApuXO5HBYZ0ZY45JBVqbp8zkUhzcDXus6knJzpNYBGVO0wo6tOA8IQgEW1e3ZRLMcFDr+KqZODvw==","signatures":[{"sig":"MEYCIQDgYq9RqOmx/0L0iJMD/6cZBmOL7qZpItInPUTikkBemwIhAOUEsgNesTcym7mDA1PjS5ZQJWhVfEMf2YJMxuQa544u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN5xAAgA2dUZLEpgXh8gtzlSJ48xt8Lj8Qw9Hf3k2U3a8og3MZm0Gp\r\nnYA5Z/aAoHlWM04AQBL/0WapNNqqUnhbwlh12c7mmL1ZclLN0gP8I5Mz+kNT\r\nMbzm4wKaNzEiFN5OOQubU1f4K0hH6Sa1hST1OLGczjrmynMy8seBkPnptpR5\r\nInRv420VlOqhRbODChXiI4YyCT+TDQAozXj9erNPccF6NA1FTCyo6MSL5tKK\r\nunegOXaEdUaE0js7bcWaTQri+DXms8X1v+8b0G314XzUFucZrDJcB9u+ekJ4\r\ntQ6Hkua3PjtrYQ+dt+f6elX4b2Lha/eyIj4V67tDG9KLiy+GEYqjOLEjImA9\r\nwS0S1X39ojccykT1SrOp+ZEyqPPZr/Hm7//y/hJJ1YGz3P39HITm2ZfrRitF\r\nsrZWsUEVtgDqfJOPluGRn22JYMvuIFKNO/1owC4+Ba5LcPsTJbG5UbvPWdCY\r\nObbrj3zCoWpMtd0bLAiY/HQKNDh1uRey+BMnnZGSc/ZZN8pvQz2sxrGxhXZb\r\nQ36J7Ud1LsLQY4rv+oFIhsG/27GDiEgDJughQ2uKn/TGmA/oPCFBOUJloMmp\r\nom2tEi2Pxst5RbFOee1LsWnj53be6e63M0jjzrgjcr10lrJNcZ4hxmQjd87p\r\n/URrF7MQKUyJULnotjOhC182KGrXsIdL/PU=\r\n=PHIK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.033ae083a.0_1674761269756_0.698250799895676","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f2729261369cf24b50d7b1b75383604760ddb5fa","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3a705fa1d.0.tgz","fileCount":54,"integrity":"sha512-lNF0ruRhoPBK5mXhNpJC3x9AO47ydll0W/SZhKVrGBzI21KR5eWlXliEYOap/JZiyO9hkSfjyi9umdjyqnmDvg==","signatures":[{"sig":"MEQCIAGWwU1/ICIS6jqMBMkKVQon9ddsfMJVXgUpB79+JR78AiBTrjeoom/tiAO3MqK7qGCh2f642/2Cr30ycYoSWID2Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FPHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIHBAAgQnNSEcvsKnocXSFM7Oxsp3lA80a84uoXyK13Ttxzrm85Rtu\r\nHXP7raqQidSqRiw++sHINNzaaWVMGnHwtnEIh6e7WOTczK1PgPNQ4ncAGy6B\r\nY03yOC8NZtgEOzfkSVxq54Equc7mycZpGIOD3JwzSJhzWFIHRlI+EKt2igCh\r\nWa3PuS7FCrY8InT07hOp1Uq6s1WKnEb+r8ON6ph5Q8yF7+/pjMZ9fi2oHlpP\r\nSLYflDDmP97k2YCQ+zu5LrqetsscmEoZvtDZKL099hDxyyj9a9gSzTOLoMaZ\r\nfv5uCb9UYG+vIcCJUvoAy/CpBTFJhlhks4yZTuHRVd/6pqTTC0rtrhJ6p+s3\r\ncKqhrA6tocrY1aTqeM+nrctzTaO/aZ7SbTv7/JcXZn9n1XlU+y+GvSFMhQ6F\r\ndybWH4PjOG/dHOVyeYxDpuGxEj9bxhq57qFAlXMXOZpvFfJvDAR2n5dijXvO\r\n7M9NbRbXnwVYs0GuUlV9mE9okIehyrbjkTq5Rh1xBAtPgHNmwHehM93TUOLs\r\nft3qAstx/rkoDW1IP4lV5osLash2u4r7o/dapmF911i/OA5/bZX9puqo6lGt\r\n1wXCvM3s3rgk52m2ddKv4aOPoPUAb9o2HcnvWLjyAmuMjzOFDVGsIr1Bru2z\r\nBAT2rdA7pwkLsiaSbAGASSj9LAk/5OqC4zw=\r\n=ueut\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3a705fa1d.0_1674859463285_0.9827764219040576","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9de721aded6967eb722f35a4245a49089e6f9f94","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":54,"integrity":"sha512-nL4qy3eS9p5HNwasiCQ92ilMu+6bxvISFU9/Gi3VIROQVE0JT61QFYuGOqA3xAOUNlp34afdVeUWtedPvA/tWQ==","signatures":[{"sig":"MEYCIQDDSDOdk0Ivng30vl3RxhTVa3WeNAnGN9fxj/8fphFOnwIhANtYK5FZqTWMKVLdL4Ftra+9GDWDNlZOASRxrB6+Ls7n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouOQ//U2i2snuLaBbQLO40HqbqpcYI26X4L4/NZyI88qETPJvLgW0q\r\nK+qAb9Gp7tYVTePAufbXzyJfy7X0lBxTYOiND2PiAWpaSCVFcKAKrQqDzfBF\r\nr2x/awDaUxEzqhzz0z5zOEU4W7GlyQizOzxdA3X9mjQh/IoVps7veqSLXISd\r\nQlm0ZjEgu1TGbxSUMUnIyCWeMeiNkYyivxBNbrqoJeIIqy40kP/5NS6DxyvN\r\n3+xAzX3qRJFGi8vnu1uO2JCRHzb93t7Rfb1pOiMAeu59ToUVI8KTiu09jeI+\r\nKkb301NXdbWh3WoNsBEegkpCwCoihuwlmzy1BZuOV3Yo23Wr9utCK+cI5aZe\r\ncwU/uBQxpNNB8F1qY4ljPprpW45kTy3l4yzp7eNnMrD5v3hKa+gnevGH195F\r\nt4MJxvFQi0/mUTrYZIoNbHiTBnDtDOJ7bRkN9+xWQPxkzM/Dq2mPpuzaNLdO\r\nKlish/PlByDu+HxgIjSr6HE52qSD2pegAP2vxTtGGTcIQHjwzUTONdYCWn+i\r\n/Pj/Pl7vobfjkkFQdc9nMh8KdcD8uqtsOYTkCUYbTff5+G1Tlyeohjb69+El\r\nlRBvHpPCkdGMwUtybR1A8/AiUmmk6O7qKIj4KwJyyqrYGZspd9FirLZiPu39\r\nC/qwhZu5oXCW6wlkzc5swg2D98WUFWg6cOk=\r\n=D1Yh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d6bea2ff2.0_1675179055154_0.5357477544827589","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fbf9252d012937590f23193c4225eeb1cc545f22","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0c94182c8.0.tgz","fileCount":54,"integrity":"sha512-THKc3FScz2XkBwyQiw17YOWAKSvUhpbtw/9EhUfkzNo8HZwtO3CjcRJsoi9QCRCMexMmWoSseVNPXhJYad1i5g==","signatures":[{"sig":"MEYCIQC7tuMntYSnlQF1/sIyRIGz/huHizLebCV8s6n0jjrOUwIhANt/9S1SN8+KWR7P2hh/lcs2KGqIV7f1U1US1S/AKcmj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTLg/6Ai7qwkq1l2ncpB+3xzM9fG5CTsc90/gm/xDhE7hc0coNv8Om\r\nXFB8kg9D6lsMxQNqS1aU8ZkGuxIi/FAN1tNoJz+WvpU2Bm5d4M7Pr0Q6lZyN\r\nQ2n1g+gWjuvrHj2fgyqeTxJeQ021YwdJsx57XPG/heZkF+q3iRblYlHFvJJw\r\nJwC+bPMT1nM7wm/F8D+9CSHafV7VAg8XiEueI5RxqKLducL8HHHgzPU2162a\r\nscdguz8YNFvqWCnjZaV5ThnO4k6ffoz3+hbNBYZevAVKD3eZua6wzZ0rkVJp\r\nlCMmscRXKlto38B8Wjd1DKofcttvRa1A2YOBl5PoRnndQpUdHSbFx3GBb1U9\r\nt4AxM2xeIXPw5bia2JJ6SBZyfaKJP4fC8wd9pn9CCERZS/jL9oV+2ew/s1gZ\r\nNuxupgStpfSdAqcta8uuQzrx7+SNnoQ7Ej/O9a1p4UoW5dCwgkUxmRg1i6b2\r\nN1DQei6PBOOxLufxAjlhUPyvM5gyTZNqtffpEIURsYuKdN1kyHg1ZLrIYhPU\r\niHl6AOS3y3RG7o0afn8alOv8FUzA5wySwjbCOBs0ZPBAyf8fjQnuyGHBgjBJ\r\nKb9cX1Bnvd/ZOajzKyLwCuIVKaLlz7/QmpAQqIEb+l1wDTmUrsW8elf+XuSL\r\nRsORF7QJOFXCXu2rXHODl5X3a9aWvz7v36U=\r\n=Pe4b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0c94182c8.0_1675273502578_0.9014092176217521","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/segmented-button","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"835430c143b1c82489ff91b64d60bc14ffa71c23","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.15b221540.0.tgz","fileCount":54,"integrity":"sha512-VjzW5Oe/MgSvKGM9VI1beUp5gBm1ViCLPby+U1pTDAwjHZyGN5E+SerVAPy8G9hV115LDyGu5CLnjMu9XM6DnQ==","signatures":[{"sig":"MEUCIQDmwmhqmniuI4mw1h0JXVyuMqinQS0h4ENj3V5zIZAFowIgJzeCmF1YdJlJQONSvMj8B6LLNjwtuprPKWGekM9nuQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qcXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLlA//W8yyiJJl49zV06PX+hzYVgW8RzRG7aErUhqAp4Ebkc9m5Var\r\nevcisjPOCsMrArDKOGUXKlO0x5wWs45vVqcxHQFVMxc3YklghsYkTaNABtY2\r\nt6NhjZoJMcg9SrtZwMjMMy8fXy34mVrvkXdNWMhi5fvYdOWBGty3vhHRk0k9\r\ngB22m0CEImxj8zHwdbncG69FSOsqj6UlVlxovSpHKQGqdxSnYp9/Fv4Bwa/M\r\nwMVomUN9dRiljD+bmAGELEohEnbta0RD203SMGIOd5XSoFuu21irL6WFtobt\r\nHMt8smoNHuJV6W8iGRHkWWY01ggZQ1gd3hBqSoKM9pB5zs+3yhyoISSEPgFN\r\nfCTLW62062J06vDtB1nLfDKQzIbIkEZBDrERdCHjRc/RzBwIsRSqnbUsOxfE\r\nafF6K+01X6JRtgbLW8sTFsOxyTzOUzJOBuTWQR4NH4dqgpN6mVAssSV6O3t2\r\no6s+knRSjavh8nqDrfR9Bc5KESgblFUuyF/MiVWW7H0OGlD9ULKjXE9RVNQ1\r\n/tdVgr2Qlcu/ZbpucFab+AtAn5A4KeMsCORvoJ+cCoCF2c2Pa188GsR5+Deq\r\n46A6eLoDllK4vRKe/MjNWniLgiec9hEbvZbFiOgGjvPe9QmezG5UGHmL2ZPP\r\n2M+UEUcie5YY8Qwmdyi3MLek/GmPBLB4d+E=\r\n=T+CU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/touch-target":"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/segmented-button_15.0.0-canary.15b221540.0_1675274007598_0.8123991566266537","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"447292d6502f086ec6e5d77306d0d6cbfb669c06","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6a4b3f834.0.tgz","fileCount":54,"integrity":"sha512-bcG2ic1gcLuC1F8+2ui5WT90JeX2nKRVb3DFzkniFXAuGhIVJxkL2+2u6nYaDnnUmZ49Qgnric6QY9bvS75F5A==","signatures":[{"sig":"MEQCIADJ757N/7swg2cCQJ1VfU132H5Hf7vw3pj/8X4AHgauAiBvrJUxvF3vPX2f6lizlas4kXoS2h1pV849rxpMONcylA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2raCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX+w//ZhPQvSb+9DumhzDVbNGzJEGd1DtOrcqHPVhiKEup5ig6/yGJ\r\nsdcqx2Ktvn7HyN4LA4vbXnu/cx/EIpEb5fJ799gOwIEW3AH1rld1tF5Ci9zA\r\n8kdgCpiBkslnjh9a9bHUMNV8yoV5m2MWGQKUeH1dvokwDY5p2ahDyUagrTw8\r\nPnKLIGR/Pcjkz4kDJ4Crc4XlI2+yDvpnOSRGghz5Ynv2JpUcqe/D/q7QOlH5\r\n+PwZ8vMYqtI3/x4NfjH8fWrpqkFMhDpi3Kn269wLNADqD1XvQ0ojaULCZ9se\r\n+gf426FxgPgusIiCGolmHbGdi77iquMlvKLqct29+r4N2UnDovM0f+u7WcBL\r\nO3ojjy+PgY9b8HbA6y9Y1sy8TaY9t1LNJDiV+0YY+qzaglA1wColvwBK39WV\r\nNZjc0+/GPFqFuaSGGojJJNVPDGWiONviB88LtkqLq8TeXKaD7XfFceLFBS7D\r\neQ70o5djjVAqNJa3xeQiszsiOX+ZAg/FOQmpXKW05PzNY0nnJJ/xka3RYUXB\r\nPg7KJwiRPPW/ij3mMAAoIc/Qmcvx8jnUXVJvh5AScCkrl/4Brt8lfhjTwon8\r\nLaXaTcqnByj9XBeoH4+9w2puCejsznZRB/r4Pe0z6KAV7EslT9Hrb6Q1TiOW\r\nJmehnNTRV9RU9VzIwUKmZLyWHhqk3cO50ik=\r\n=PC6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6a4b3f834.0_1675277954447_0.08000115992470147","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"37c0443e6dc9d4ec4f12db70054425013a871e95","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b177b40e2.0.tgz","fileCount":54,"integrity":"sha512-20V1Nft+qYXrBHA9b+GUaY949F37C3/UfLqR/hGhzMM6dooMXJrAVNM6eA5mmbPaBXhTY2JjQOgtWBdcVzxGKA==","signatures":[{"sig":"MEUCIQDp8wi18C+BbJoLbgKvp080ES+FiXxqO6M8nQmioZEmLAIgQjqsI09eHLc4bqct3eyGJGPXI+UN3+KAmw2IeeuuBGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9xhAAnJbNkevLYAdwv2nnP7cJ0+f55G1m8gi2o4ki0Al7GebylaLz\r\n3m4UV12j9Q8LMaBL+yZ4HunE3Qtn0oGCImXs+NbEksqRonMH/JO1bUVuYgdt\r\nMxgz/UDkZPuvMjo+fMdK6zp+iZ4Sgp/hBOwMj0kwnQp/mgFzw63WmGf2Udp5\r\nYhp5AcErTAXpTZCpa0GsJtFI2YwO/gjU4Jr66mqLGpqjLnAqbRft1s/KBjwD\r\nOYy5DrG0iPeUQgWI5ANI9gtHZreAOwRu0SQ3lnj+5F4xP7K/qQ/m4pITEjNN\r\nHCPxsApnYH2cMD+bxjbcSHq7azZyAZYCTm/2MzJf17nRlCCM+x7Q4j4lSlpR\r\ndTiVXNw3xlu1QcJsp+mCLQ3VRHndMYzKftnEd+VuKSgoxfTQyJ9OqtRwCPBB\r\nP+lte3hKA7RpAs9O4rPha9gezLwGFnyM8nwXXH+uIz5I72VWzf2YQleeql4B\r\nrKxhd2DWqdVsy0pt+vcR1+3A/4Re4lbknNMAiLi1+2lGikXFpVIkuchxtGlc\r\n89ttSnWsED/txwlQQW/09q3whF340IIbtJBntUCZvOje2sjMrOfSB7l8xeEC\r\nlLkCVR3Y426O7/j5HmgsJKUHI4LO8yl1MJUl0M1Puqb+ZmSn6scl+suEZ7Cs\r\nzdWXgCXiral6qgtUznCSYxR8kOHu3XrLrAk=\r\n=Hq0/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b177b40e2.0_1675308903104_0.7033199376430832","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f8d5e82fab935dba0a96cb652c5b826fe657b6e7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d9f821042.0.tgz","fileCount":54,"integrity":"sha512-4XAH60wIa5J8PkvQxC7sD9rACJ2+PyXFBYZ3G5dpNDgHWUltPpXOyCYuojXf+33K5sOUkGZLRx9VsGRXybFcnQ==","signatures":[{"sig":"MEUCIQCYOKg1Q8ylpOLrGNUerqyprGmSXC3dz1OsE+myqGUD4QIgPHadHU2BLqdSrEqMHCUMDCh2muGphALxkHfowluPXH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/U+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHgg//ZbkDpp8CGUGAf52WiSQDa0dQp+x5EGWy9ZHVpA6/uXgXq9HQ\r\ngfnq79L5wTeBdejZdZrZLq6+i+sW3Py6yH02Io4SBgX/laHKZTr2G64b16+f\r\nSGZ70KnXbMllx8DB/Ds+GyAn9123Rgm5z1Mi6KaJMetLnfHeeEFqdalvi0pN\r\nQnZELqdSgR90CYszKK+hRYWa9Ht0WXc84a3yd3msWZbDFGDokxN9+HrLhZXy\r\narxekc4rxqQ4wn7wViqhwRRIHIHI7KUPUaiT8rOb1GIZ/IhwL8hIwp2fIaYj\r\nqfzyzlaBz0rbwCx6daKZ3WHbaLABSaNf+mdgjoLT6fX6Cjf5WMbR6sJ5Vh7I\r\nJGYhmOgmtqrg5b2S7LzNSBBA7f/LNB64UikRwMMX7v3IF0YGLz6dCGnMaUZv\r\njEmkJ6/eQoDl47Q6eNd5r5Kxrhopn7mhiMzjHApQ2MxPBSYmPpVsdyRsx8Ko\r\nGkkxDGj0+TJMiSDFYA97mZ1cMiClFO/I/nWM0omHH78bjEV3h8rZ/drCQSzb\r\nBLMrIyxMbSTq/Z3zjeCRhyooXSK13UkKXDwyao96GIERDP8ImtK1uCn621Ej\r\nD5JwufTBYm1fGZIAWShts2dp3u2JxvyYiaX8ulIbKKSdlMuA5aGsDrhFieMO\r\nhnIz73R2f+pdjbgYHi0giUUeO1+BShETWbg=\r\n=3A08\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d9f821042.0_1675359550276_0.5379164057529746","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/segmented-button","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e5705e3ea630ffe746c8e2e3473dcae5e823f582","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.47c7deb19.0.tgz","fileCount":54,"integrity":"sha512-FbsypWMacV89POVJO/t5zRYPayHONA9AZw3KAPFFo3J/BGkVUsMpTEhF6NmJDyITK8CgQqAc8zQizZXXf+8EIQ==","signatures":[{"sig":"MEQCIGCptPQTpkTfKWa6wrRlXM1C7dvXmRCFwUAWHvIe7NC5AiAgPvD0G4M24wG1thONbj62/3iXjM9DRGBGQunKHp/+vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRHA/+K0rJzMsZHLnXQSS0z4QJ+IbuZeLmW7xvzhofXPe7PG66bVGC\r\nWYUxO7lNBBdS2ruwp1N2gKFRhWVDdNMpQVS+wFQP/WPBjeI9Tjlpe+xrNUwS\r\n0jXC3MXY6r+yWXVSRSScJLi9l4iwdVGn/8sQQSCvs0IaNAPtx9FHY3kKl+5v\r\nWCKrAgzkiGW3cb9M4ancjcj0cvsZChjZyZ5CCWrhmeA9GCTVWkSG/aFHYisn\r\nLbNY6SEgYdIRliRxv5oWdwB/61aQxu8V8zVrRRf6tIyjZCQzxq1sfVh9TRDY\r\nZzaRLsTBkJ/VxRqKMYE2j4JJgucyKVddK3ITeUhqWoUJ4j/9Ya8M5gSbU21C\r\ncd/VcsHqcbUaoWS8Nn3XPYPMBDR6jP5wWPa+nIn6Y87GK5clu5rIBnF3MYDK\r\nhhvKs15TnucB7JDiu/dq5NSeIzDyEMdGscvA731np8+C2GWAgWbUq2CwsFbS\r\nVNz2TdW2026U+ifO6njZQy4G/jT6ItpLvyVkL0bHSxH6rUacnyBnDZIhuC5a\r\nHz1M263ZYAbCJBD/FMI+uuV/esjkxmdIYyccagtnzXEeLIei74UnIybCvtwg\r\n5QZKShBvFXGYi9x1t9ReWgPLemRU/Tey2cvidV81xXh9ECzRcs2sYpyO4YpV\r\nWLNKmIvaEAAfo/SAmHIkK5s8iqvQd3HQdHI=\r\n=32ex\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/touch-target":"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/segmented-button_15.0.0-canary.47c7deb19.0_1675415383753_0.32798726087507757","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b847f9faa19e578e7bc53d20029334675d8efca2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":54,"integrity":"sha512-fwdSMBdTv/FqQKPYkN29uHvYYeTjKM3V2qwtY46EKwAwTK05ot8uJELKnyiiToRcijbhXyjcnCOKWgFhrxKR8Q==","signatures":[{"sig":"MEYCIQC1g+e/VpCt30mQk2Jz0uymBENQs5uXLtZE1oIc03jllgIhAPV7ntuhnBC9SDNDBcd6KaX4OhxEc+BBjRbihL8mfFEy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ff3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT0g/9F/xJ1w6e6mNAtmbMP41TuiSegY6HRkVFesrO9D32iALiN8ht\r\nL84iVodbJ8a6vOUi2MjW1vqVu4MZpTbLRy1PG0/+UwRdpmgkxhEPzlHMgGt/\r\nZ1CJ5b686ohQFK3R1IL6k3EJpKd6VgvtAqJbcApSMDG4o7ciGqYyzuPgeYWo\r\nZuBgZcb4LyPCHperFmSLJHHeQxwKNHf9wo/8WSrWhqpQWdEIi2deneHO2ToU\r\nsbhujXbUDwYeoWsq/HTY2ZezA4/c1JctU3rwde8L7/2TM15FNduy1tjhVfEM\r\n3dtriiOQQ8pgFuhqaDFLV34me6V9ch7QKXwvP4qc4fQa784AOyA61IDXq9oq\r\n2GU7l3mQaKbL1i+X7JQdahKhTM0D7+IsDmw6ZLFSaHRPxCHGmxnJOCg6P9nP\r\ncgsdc6igN2DMBGsb+aYQCH+jtc4z0qZ/DTNbUmtFES/b6KxxSnntiqN36L5Z\r\ntZoW7cf79ii+EaSy5iXgaasJ0vcYSWr4nNpCeESIkfAo7qGEFtQ3pG0qbsgf\r\nOTI5dCozPseKOCgAluWon21r/ZVBJsdpWJAZ6+Vt1s5bb3pxzPDqhD9yX00/\r\nv0j0mBaiKwcA4jukfXaJPgpEg6tj2j60IaQpH1ndVIdCQWlbaB8jw+C+kBHx\r\n/xTi/bcR4EIouERPVxyv8upiAD1SdpNdZvg=\r\n=rfSL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a16dbd1a6.0_1675491318880_0.868597883980587","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"19b4ec1d03668bcf205f99627ff9f54a9ea82445","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.93416f87a.0.tgz","fileCount":54,"integrity":"sha512-iQa/F4NKzzPpEY6fDP5qAEd6kFqgqw5+pbYXz5QpB4PN/57rdrW0Na2Xsid/Rye3uN4iOfRLjG5+jZs3zU2LvQ==","signatures":[{"sig":"MEQCICFQGCa+Drs9pCBY0mcXijVBL5/25WvpRI0KUqYcdZeFAiBXwGaxYbDf7M4wm+hZduqgUPyAItVzC/sxTGDwmDzvag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lEWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraug//XjG1jIAfdmJMHnk6TOXebfYDVWL2/tMTyQ6jgLK9D0YC8pnc\r\n7a0BoYZ/E59uotQz0PzHPIeP8fhzlEA6YCXqbiMHPfsuIJUlHMQ7z1xZHI7X\r\nb57mut0H7tZsEkcI5CK0TtGiCovbb7bvHJSe6/WQlSqoGLhUr2zLx84m7RlL\r\nN61hchmRu8dUlNXksBzn2k/MhQGkMYVzRw+BS/pYFf1EgcWQK0Rp8jNHU4Ex\r\n1+RuWlqGjX2LRft9MfxOz5B4CdcIxySRgXSmqtrpuWbk1qVBeX6yvvnwK9ry\r\nZTHoRpL7NNlhxNu9SLwQ4S08ZVXiFaC0E2RUras8M4IjnquG1QAMN6a2wYV8\r\nAyj4R3HayLsYZfEEs89UtVba5CQ0hT6+J2BbR/ntV5IgqEXXECMzcN+TNOSS\r\n6BPuH9UFiQWCF4rrCvrOXCu8gkHLihEbcL3C07U3OLdv4oRHq6nkGi0Dd2SG\r\nk3kF6FQEXoApcpPChrVMf8sqrfYDNiLgD3tMYXwrq4XbdlKmMy3BYx7W4mmx\r\nwG6LqCG9vybP/cw3vxP/V62X4CvNJcH56cDAX/t1mfdyBBw1g6yVDrsfZtDD\r\nSlKNMy6tUtCbkO0IuXEwf66JuT3l+07+ekeYtWk7aIZ9CrtT+lHygCPUq1m0\r\nnTefp9pBxYiZIx4g+Pz7KEJ7ptv1tCII5tc=\r\n=xUV+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.93416f87a.0_1675776277906_0.411500698816458","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/segmented-button","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dbfa4cb4bcf26b9418de356d49c3a4f02dfff52e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.49b8e7442.0.tgz","fileCount":54,"integrity":"sha512-V4UIBHkzaItSyju3ESh7hEJaU9aFbDoRKenJJZsYfY7TtYDEfwJJNEOJ0z2HaUgCMJxHvdB2M5nhddcsX0ISAA==","signatures":[{"sig":"MEYCIQD7K99+jKIbn1Hpp/Y5Zl2uMK0GXCLIp8mAt0fR1A2jBwIhAJy75EpCL2V9RTYQC8qHXfgmcLBbcEUDpzRG0EUMe5d9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl1Q//aK6twZIHLCMjC81pgSXwZ3jrZDJShoc8Tklx8rUBC5/Rur6Y\r\nwHhkh/CzMtzFTovek9pD0f5trEpd85X1FDLP7R6BnwQLB0EtL/l2I9bUKrVL\r\nIXoYDxfm3fy5rkE6h0cJ4BTSqJaXeLjULmC/snII6+CD2mWadKelfxY16tjS\r\n8reDoqyWfHci6U3n7OInQ3ojlKDo0BUuR2PH9PrPwEQPOnC5NtL3v33qzduo\r\n/H4S8+7Lm+Z1VLJPNFTKjVI1D/4Xi5uH3F1tMWzU+Xx6YGWKUm0850CYVIo9\r\nOiyDExMhsTr5lA1lbwjZeIkdlz7tTUn+IAAYxDL4DlSr4WSyNEznZRWrhTL5\r\nNhcMF6ZV6WjlcLLJI3b3RzkttwtVjIbtfy1cIxbfF7MrUv6u6AJkvOVLZesu\r\nmbGr/lCj1fe3FX5cPv1rwjEGO2zbkf5yThdceVmILQCmVF6NMa2krfygfClq\r\ni668b6+hh7Aq/2B7MQGNJVTMOstHvUUtH0Xzd+sAOMo0gTVIx5YtWVg90Bzr\r\ndzSLiD9FoMeLLK8KsMOZMh2oHfimZpmBrVPZblVl3aq4C2sHDaUzyQeZDfRp\r\nE6TKmW/GU9niNHrFzHeDtQAPfSQrTITPb3gAqCYiIB2IdtUhPR3k24wJiukp\r\naV2CurmqSeAvDIm7UQD6D8Aq5Aee49KF4aM=\r\n=LiKa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/touch-target":"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/segmented-button_15.0.0-canary.49b8e7442.0_1675811424211_0.5316944361956182","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/segmented-button","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2e4fac1cec76f15d8eb94e3cf7e2d6b497aee811","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.de38de758.0.tgz","fileCount":54,"integrity":"sha512-Ubn1tYOv1ddLjhbwhUFzqJsjIW603cdqDMjqkU2hEtZ8NDbkgNeybwwfdweLCxYNf00eilwOjJmY0lefd7suNA==","signatures":[{"sig":"MEQCIA2zKhlkkfYc/sygo2IFVxjDM3SpaTDK0+aCSJ6c117mAiAv4/zFcL2vIV72oTDy8Mnp6MYFtKzcHcMNtpXUia9kmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRtQ//cQbI8KBIs4kgOWlQtEDMZMslzst50t2Y3PDNZEog+zN32CGp\r\n5khL7BIf5GR7s3Kdcde4avgiw406ouilDXgRCVfilqBxiRPPGEOyKIsoVj5w\r\n3BqyPAiMy14xT+dKmqnsUXz7mUgM2nZzrc2/wAPFoACaocMWpavre+usfJcm\r\nIj++zljryXPUZuCy/At2xStgIbktHASBJtb9tgl1xjuVfrPLvXmVRa3XCwT3\r\nAj0W840crKjDujAN7jIW2SZzQmEtHtqLMR3HR4cHcNOw8asex5OrHZ5tR1su\r\ncHaLoKWuT/zUQq2QPk6FDa2IcRJ9o7eygkae97onNp3ZHq3rHPXy7k38gwhp\r\n5hcU8AnI8B3bAxSHyX1MNgODIIbQfqKu61MKwOAua/20Lds7pfZ7QY/1ejPd\r\nNtF1goDhYPafrlFjINZcZmKADxDoL1D7TBsd+E9SeXw+ImZkhCJor/2GHbD7\r\nH37hjQPRRdWgiqYp+KwcRVeyXSnSVDoz7FVZUA0T+Xs9xZe51tVAM+t63tga\r\n78BDv6mjDWO7wHBkpYUk42mT+SWxMsI0/Pk3mU3QsHFPO0mAD2BQAnqvC++C\r\nA0fUZCBuuNdq0NtC7SLSNoxN9ghlGBgc0zAvlNxCCjmsjuoLMmcAe/SwDmXr\r\nUYGwCJH6NVJqjwvnEcz8PxoCR27+K6/tObo=\r\n=F5tb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/touch-target":"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/segmented-button_15.0.0-canary.de38de758.0_1675957395647_0.4738861919738955","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a1ea04cfb70891a9a541999ebf0db0f677fb7547","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4d62de70c.0.tgz","fileCount":54,"integrity":"sha512-7V1Jvd2W/M3gxCtE6rj8ImonKnIijL71K9oCeVYLLdhNNpIkxK2uCFNOeAzKBZvgTgm6wD16hD/bTx8RsHL2FA==","signatures":[{"sig":"MEYCIQCQSt+8jFq7NjhGZjgyhVia/X9kQBSO5euKrsMrl/JubwIhAPcuqnxVq92dFlbsrhYGNJq9VRs320O2hhSK8GzDKr1P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W3IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTww/9F/59AFED37NMGviijrQBTG2RBED+CtA+oNdy2tIlCr5eGRhz\r\nk5D9QjLlKz1VW6zgIeJJeIDTrp9s0nJnGsn0m3fG9s81snOu/xK/VQwr/qEn\r\nMj3B/ijtrW/Z86bUQBkvSAFuWI0OaadRtYxkDT9Xn2B1Wa11UhI2bdqV5Tnn\r\nkExvwIJ060Y5nfj8FB7Uz6UfqXS95uBHptT87wDeYzEXk6AcwT2zFf6YrG29\r\nZDPOqIPNvg1R16uo6KDx8Obw7r8Gy9W5LUX4VSDlOQ0ExpaZ5LlKwOMz2ILU\r\n+2hCJxpEt9FzgKKKRSg2FfqzVGtAHkM+/Kfp/eiU9gw3+gJTrCRTi90rjKdo\r\nZH8XvNTUwBTLM3L6M3Ed+HpkiCZOLdOv3qRZ++EnALoXmfWhZFRkDnav/s0E\r\n6OkJQR2AYx3Q3bPWcv7TjuCA904obHllUXg74x9q+FHyXAPP6M9FU0La9+bV\r\n4dWIiggsjie2gLEdzw1hv9D/hDpsy0uyWC7UeYx0t3z32UX+pIjXbPmd6c+k\r\nxvIZQqQd1oLwgGmqBSJbzzHed+NXjK9zKVQifWJinivzAXs9BR4jbAS8kOIY\r\nk7++3Op7wCcI8bxZWYLXJUvbgjHcxlcpXwWsKlx8CD/l4EzF10lG7F+odpc8\r\npBwgKgI/V3n//QPd/2tbQgY+oBjnIuRC4Eo=\r\n=R0nC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4d62de70c.0_1675980232601_0.7147335718975363","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"bf9269aea3667a4f247de1a1ff1a0da713ebd5a4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6fcd8d418.0.tgz","fileCount":54,"integrity":"sha512-MnEYP3dKx7cZeN8KDGcRlVYTp8ayS6nGmZq1q7W6I9fC8MzkAxZeNjA3X8uuF6XH2reTuxMeKKsfqqZT3+LC0g==","signatures":[{"sig":"MEUCIQCk6XCigQPaK1rdZex2rK/lT3NLFwojrjJvpAYBFipmSAIgIdv662rkBZFm73RDLO0dIAEuSXF+0ex5brcGfrrX8Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPHQ/+PV1kaqZjy+/Lr4k5u5zr9PkL+iSFULhCo5cFc3TDgieDYo1r\r\n5dCX97jjZAdKOK7U6NVCKxOxfYk4mr2qu6LV/eJvevr6A7bDb5V3KCES7WAQ\r\nqcbboEjpi3e2j2hdmawGh89lrup9MfISn68EIMyn7gr6o3FtNPyYHBI+5uNk\r\nOPxoiYCRX9ofSCZAT+jf3CcHW2BSVFNqubVrhlUl+771V9Xa7noaFIKH02kq\r\nT4ODd2Kh3mtkN/yOO50+HBROYvUqXNl8zRQhQeAfx0egWsricxKW9YJTKXl1\r\nwGAuWYVuPkPO8vzCFPNwBYPSDVpAqfzlgMrbIAXtUnT2DCi2NhSxceGhPxNY\r\nuiZ5myEdmHKFJAii5n8lv71K1SspyV+jUU749k/kFiUe8bITS8H8qnbe/CPM\r\nbCbewRCTutRZTKLhFsHrwY+L8rn5/5t4WJJtjn4lNVvGuu01VwPsiJE9FGJL\r\noVEC9/foYfoenUYk32hB6rgQ654j0TkjsLX+b5GaHpYFu0o5kCJUV1M2Ag9Z\r\n4tfexaHWMtF8DVE/3FVjD1zN57qkZl549dmRpjLREgvQPGBFBdAx8NJLDf/F\r\nnpFn60XDLD7iaO95VzHyNp/bCCI1ZWPVT5t9ZKAa4Qgx41zBoQO1XX6TvsBA\r\nf2zkf6CAZxds0Nb3r+84A3b1fSs84D4zUaI=\r\n=ayuF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6fcd8d418.0_1676289039118_0.5893347203441579","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"09c8d992c33a07d9e1f8de12a607f0b857533e16","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.066d9439b.0.tgz","fileCount":54,"integrity":"sha512-rQKIQUOZCI7qxbLz0vI/6zopG/gQDWZOk57w+kBKGxTsTrvxO+Hsu525mGiviOucEZhhsclcnTs/7a0oxN4wWw==","signatures":[{"sig":"MEQCIGzYX4xwS9ZueJyLNk0GTnxSsnv8qnui/HM3Ci7rpRcYAiBYT7rHSM9U2epvimNGCA7Oe0u+BiutKxzz5KQ14oy2rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdhg/+O3OkPfvpQzffeJTR4PV+iBq6GHe5rPN9ViyeVYCbeFlMJN8N\r\n2wcTa+0r8qUfNwzthDL29MPRaMh1mJeiZZDL3dpFBuGMC7EhGGRn6iv0FqKF\r\nJAiBJ3KfAM5rcfufanHnFl9uvSfhGjmQ7ONZU4JMizZtnSzaK+ZtCopgdJwM\r\nTwUkRjQVTjdG7U3ieG18M53UehLvQUdO/DgGeggn85CWCl0Yq4wAhaA+ubwA\r\neIVB3hHle5Y8tf49e0GQEaKH449mz4FV79n6mPITbrbKGwcUy5TD+EZ/Yq4T\r\nwIsA2IqH92pCe+nspBOA4ydOiF6MKOIWdVFbnyK8mTppU6UC1lo6k0t9Rlvf\r\npBOxkEasUsO2InYR0V13lF2zFWYB2wDsAD/Qsabd9SuPNeBFTGJsLiRyzCu4\r\nllBHP9p/oQY7GKGmotih7JpKoBlF6LdtX1PfFsslSjvJm2mfcpd6O3w/xO6x\r\niYviABLD7qXfvf7vfL2cd8LXHo9qEVvaxyS9QOwkV4HyJpbE5xFABqONm3SC\r\nPX6omqYowLy/iphhiTngFlfd+GkQX7Dj/aP813Y/QRZYFTufWNhiC1FwvDS1\r\nnnjEtWE3wfU49EDYKCgHuxQts7OWvEqGaTmEDRVXGFVTNYknuk7QK3Dhxo1r\r\nu3Uou6B0HFvbbt9Qi25snGkJTEM8JbjRpX0=\r\n=1MQW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.066d9439b.0_1676491115625_0.6976696569650251","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"90f0709eb4e0b86854174cce25f70b912824ddef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7ab32468c.0.tgz","fileCount":54,"integrity":"sha512-2dxep4CsaYinmaTRdmcVvcpvOeCj1L6dgp6K2MPytphQlh+1OyBPeqMlIY+V4fcIM4DxTwmOvw1TGQRWNo/VUA==","signatures":[{"sig":"MEQCIAipMWpFu3hngNpDX1vH4qgfMwBA5QZ9fGGqN1m763LZAiBSLKHHOU1XI7gAkzlNOzw/G1MpHFBKqGy/Ri1VtPgDpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1ZQ//bva2yIzm29oGyDRz2JrSWibXrGd7JE0Ezm5/dEW4Y7f4Rn10\r\ngxZ69GsP4sy74wQ3sZ6fxvVyWS3t7cRTvt466n8X6P7nCJihV/cLLNoznct5\r\nwCkeqeVERCS3RDglPHrEfwiWgYXqSIupBheFLQwJHCFRwBXts9/cXktSUUBt\r\nCAljbXMsiMIB+vCkDh/VN+LCxNKX0op61cvt2/Z0X15SWbToPNJQPGO+hmqx\r\nJrGEsr+LKea9KB31jKftnrXQiEzOIISBqHyZpAZMAKWIr1tKTZ4jQKjtutUU\r\n5V15H9EWyppruuSt+GRcHx14CU4BvmgdFqGOCgfaoC5tgUN+4fcxMBZVa/pr\r\n5jzV63xw/41WlSknbHmdp7fulXLhY97anAVA8Im1exAiRh0w4DTrtlOR5pYg\r\nKZ4K/18Ig38FgKQSmVxYB/W6jW/oMJMkuLGpilceLyFGP87M7n4lfXH3cs7Y\r\n8moaXE52BFU8edjDsHbgcXDfrgRqNGeOTTGn3u1WhFp47zNfsFIAO0lQSov3\r\nC0xSF+Wi4bwpdLrpBAAehQLpjCnbAm+ZUbZFkFHL6AYvoa+TTSV/eoxdTl7Z\r\nvyHE7Eobd8mXXohVJCH1oaV+RN681X4zGs4+q196avJlMC0A22kSE2UdlqLS\r\nz/GWLaCrmH1jst1ymsFx55LVyMmSBRIwzJA=\r\n=tgYN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7ab32468c.0_1677004496807_0.4358321575917079","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"34f77422b423c34d301af22b6d3c6d0f7afef8ab","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fa27ba61d.0.tgz","fileCount":54,"integrity":"sha512-qlWFAQvJMPeAFV6UG/r57j3aP6SGSqDmFylWJsBXH2FGSJDPByMnyiNKdHs8Um9l/NCwjume89eEiRsigRi2XQ==","signatures":[{"sig":"MEYCIQDb6m/fHsKn7dgHvavQ2ShshM5KAsqVn6CXdbJr0xBzFgIhAKVz9j32nAqF7jZXv+vu12miVyLmmZt65NaNqeF3yeTz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NhBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1ABAAmqoVlCbQGIZDXTkO+chEsaT7Q6hOXacyfVd4MMkkGObHUBlm\r\nqCGV0LWIRMo2sAjahmv/Ps2NHrhngxpRPX+mlPX7YH70GjDYdtn5IGL7iYg3\r\nr/gWJk5plb46nckjRVJgcs5dpHvLR5qCQ72yytyuVGhfaF6EDze4dAY+uosl\r\n8sSUv2qa/CAOXERIzloVwt6yGCaxZNa4nTKc9gdI7nfBfh8bOsEmGs0LGg/T\r\nrPT99Z2cHdlsee0Kkgu0P85GCxffZKQOhCQz73mWnxWV2dcyy/JUwIWW7T+g\r\nnLV0A1yeznvjZK7Jac5KVCsG/4/RBuS7OfBQaiJP8PFxlI75PdaeBAopsmKd\r\nFDP8HzvPhlLW6YW1GJ76TxsAzTIUE7O1q7LT8JWiK0IHdg5DSRUrgtSrLdqB\r\nMVVuZ5O2cAQAsBEOw5mlWySbx1XpxmVQnkU7dDlYy+tVZAFGS7ASH0JiBsCQ\r\nzImovyyQdaqhrfClg/tmWLJvP3pqop6JS+utOzQmxy+R2FP1jFAoyZVduQL3\r\nrVc62OFZrc6/DPeWCKiOgMeWwxISPETk+odnufA/LD7Am9WJic6GGZGXhj3G\r\nzGTTd/Qh42yNqgNuNIf7SjFrQYkDu/sm0G0LsYonft+vWr013XYeeD6gidOl\r\niMON1ZQxZFUQnSC8KkqLdZeMjcHSoP1i7+w=\r\n=G8pc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fa27ba61d.0_1677514817573_0.09110537450859901","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6665a30f244a540d16923da595ab7859ec24a718","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.311ab4d4a.0.tgz","fileCount":54,"integrity":"sha512-z31clw7LHfmAmn2ezD2cxUJz70/xzxf7GOQ800abMfSd5HDC/FrU5gXYTwRBqD2fVX3GKHOHhCxDdBzdu7bT0g==","signatures":[{"sig":"MEYCIQC6/P2BESOgdO8+XoXnvR/J2xWQpLXICrOT+Sz+ECKgeQIhAJNj8p22/r1TPN+TQrlk6u/yK2aykeTpm4kZ+AqhrNNX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrATg/8DyK7sDJJPHYzPi3MeUrkH3CmXAeXHaQgkn3+P8pyk13H/8za\r\njt5GYmS3E66CjVJEzBTEvwcHOvvWD6VGxRML6ujyfCADQ2JUyWrtoq/0hIX9\r\nZrAHjLC8jEr6Q/ZvB7CsIfVC+Jd4z1Jq+JfUcPWxZym/stq4jfcl+r+Tt7Nj\r\noT+HABAcl83SnXcMEzpG0CcI4ZjwmBil0KZTVfTLxYirE/zQPGpKlRulHbp9\r\nq+bFfs9RYpzazppuSYpnht7rgLurj+xZIb6dyv8l7QKfCTgfL4P46gskF/YI\r\nyynHrAvF5PkdhVqrZILDA93dKnri+UsbOwtj7TErrLA22E0NBXECqnUuk/Zb\r\nFKC/ICfHpjVdvzynTv/jtcu3GcWih7Y+5OA0PGkcPbWhJtKeniRHhIsYnOtq\r\n4VLbvl6XQXKsc5PhdkVdwuI99Z0iXUX8C3Shet5hjpdsqC9qqy37JLng1Yy0\r\n6q1be2l7ZwOH0rbbc4AWl56r3++A9F8VMJSPLEDv5SkkR+sr9f4f5QJxTod8\r\n2GGZBfbsAsvuOWN0+/mIKXwbC27dORm+xxYj4GhkTCuq6PiUOljL8Zx5/eGC\r\nRUHjmg5Tp2F3UIwQYlT+ppbKl1D/YjPLUJFu0RpKjrXQkB0krALi3PCgroXH\r\n7FHsSl8AoFwuHQHBJoKYmmJCS4qK0vpk4fY=\r\n=/c8s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.311ab4d4a.0_1677516136299_0.16335488779064433","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f024184a04b00c06edb87315b4bd900dcbd203e5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5cb8e2174.0.tgz","fileCount":54,"integrity":"sha512-fPxnUW6K1HrWSfSYt1aJNRQ25lWenCiIyAUccUqlDZ9hKtIC2wpSNk+XqmlPQzkNAyKYPHGsMp7P0trLI9E1xg==","signatures":[{"sig":"MEUCIQCmndC9YtKild+KogkkVP8d7G+dWetlATM5xGyocKewJQIgMJXuY7sgXq3Z1M7Ptfgkb9orhQKXST6wZBIXZmr2nPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsPRAAlJ+GUoygg+xUxOC3ftmY+dRFrPfeZEi98DbqjhWncwef1O73\r\nSfj/6A+QnFhFfcY77k7x+xAQXoygBgOHWuRAez4CQsj8ssVuU92+9rBISUhH\r\nUk5M0eNG6Sa0YWy1r3jbagztLGKrfYcNuKgK8Q1GK28VlYOyMci/tuOXGR74\r\nHrnu4Fs6d09HX+Bl05UZYQDt/7mcOnIHDRyOUi0eo3Pv30lwoJ+niqcbMKW+\r\n/T/FGfVBB73qYhBhk8Vkzp1rj4DTRddRkpbR7sQEm0zlxP6rc4id1PJfgXOu\r\nKuCs/MhqpQchtc3h1W/Fh85Y/6oc2ljXrO3D5WbthRJd5HgpjN9zjo/11V3r\r\n1X1nEcv2LtOtGpDBygr9uYnH45NsUeWirn/qFyQz9vN9M2aEdQRu9b/8Z5oV\r\nGZR2CJ9XHneOS0gUikDKl+f660NIbwt+2vBXo7SEBTDFM5tPJ1kIYymK85x5\r\ngBUMDj9VvrN0CFeqWgaktggl69FrDpaX+8VVH1st7t5vAZ1BR0oWfvT7cl8X\r\nwJrKLk+TeFBHU+IIEUoIeIJELzuSHUnZTybArmZY33L5dzhXyIqm0AbmZgpE\r\n0wV4L0l1RMahciHV9xI1c+kbWZFzee7rtlJWhNbG0khWKbv0hIzztYlAvym9\r\nXDjFf1ZasFdRic/dtgCDs1m4hEnbLsUfp/Q=\r\n=KYV+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5cb8e2174.0_1677688597398_0.644842673034772","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fa0c53e14b50e56d16da02057e2bfd92176dbabd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f32339937.0.tgz","fileCount":54,"integrity":"sha512-OhACJfInSP8kdQxn3z0lsjR3lZbka/RuYC4wfRbnfZEyrOrGkVwfbhydFJZ3XHBnFV34uC2YgSgbK7xTm23u6Q==","signatures":[{"sig":"MEUCIHDS9Zkc/haGqEERBDyQFm30YxKbXXYoXuFssmth9y08AiEAvlxlL1kALaOHOnSwM/uugSxllw33rWZEoT9rKMuHvJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ3w/8CludI2UzbQfPQT9IJvjh6tXOicrhHXAGMI+zGpFE+O6lnsaf\r\nIQNWAFC+w7FwVtzfRbKJa1GFhYtYeL0A2VKJ/ghNREZir5iGh8hlgQg7d5Kl\r\nw+zDL8lXMrYKi55E2Czss0RFBwM5MPCe+6yR/hTYJCIM8JDs8lSerLtD+4Nn\r\n1JsJAmGc3azUGAuArXs3XFFyax83LGaiiDa8pKumi8ojROtEhLerL7XL26jl\r\nBi0vNpFbg6AAqgtz00Opa6Ty6/8QiZx331vxhYibvHgN/CL0Jl3mfVxPYEbk\r\n0nN+bjbZCLT/cCpNznw5MZ6UvBVhWTG241aq2AeCEfh8n51QL3jiZCrHMS5P\r\nBFSq6BfAsLhcI1DBvQNhAOksSwofubCeHTH5nTqdUFTDKEM/p6WHunLbkj5i\r\nPbPvmXdadBgqKEBgObSxep0NjyPsn1AeySqdqdTh6It7rHnu4L6p29BCUTbh\r\niAuNUSK+cwvf5sr5zDiWvndU+ekMcqpRSQei0YhcfpL4beta8IekVQNUj6Kz\r\n0NLjqbLz/N+xFriSJkLYXcLya/n2+gV5FqP+eZHQCLK3Z9RiftuTATG6cnK6\r\nVEYjCijaDt5Bei6WaDW0BSGzUvmKATU3P1LE/8Qp8BMyqdIkoO7qXNMsxARk\r\nOc8BA0EBvRWR2KfWT/zS6Kf5Vey5zJ+m6so=\r\n=/0Fv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f32339937.0_1678115784097_0.926949862272761","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dbd55620add9060102911ccf4212e2eac862f131","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7644d63d5.0.tgz","fileCount":54,"integrity":"sha512-wB7KC4MZbvxkR6PRjfSCij1VQp57NI/59DrXbIlDbhZeerUd1uo9R5zXNLDWDG+TTn1JMYhrvHRGVOXPjNm1Gg==","signatures":[{"sig":"MEUCIQDeqiunBe0dIoI0aggrtWYr5sv9nRgYNAUCI+dEtoqDeQIgcwolSmDXKMnBYmXoeA7kcfhpEKFpQWZcquSwAHC6VHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmj/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP3g//RRUs2kftzuf4NaT4InBH5iQYqP7GUTkZ2bpf7uklmp5sI4XN\r\no3LkNIOP+Rm8eGFUfQ4ZJpOszgQMxe0gZfS7pIkQfAKUpj18DTW2iqBuAfM2\r\nh4Zg9ICllqnHkzAoXEgOlpd9SeiU1GhhRXET45cLWOHjz2l6kGMhKVaYV2Jk\r\n9QtM3zN7x+bwUXMXCHWv1ZMVIM14GAPHu6jO4Cxo6d4T7lXR79Ubb76RXUGa\r\nZndzfCAWbCSXWsDXHOdG+tmeiOIPjQuh3WkFreXe7qMPCd+kJgEy7Rdbxj4X\r\nWHBa7rG9ME8RB9ovGKJX/NRYQZifhs6Oxxxti+SXCVb0TgkwtYNZFZGm8rkA\r\nH0jIaaMP3vDLkjU/rkE3X+jn4TmTQU1xpwK0uyxfucRr4FiWFRKhEYWJoSL1\r\nDNOLz1XjbXwaG2iiuezRGAaQAoocyL6Bvv5CZnTwPYWUaHq4/MTL68v5QxT1\r\nIif+wYRlEmAF0X3gLHlxq51+djnsUzmSTz3k8oMQfA5HKqbPYarQWxz4Wmai\r\nuQq2k9D9VHBxeez+LEsLb1259MI+V4DlpTu+1AM5wC3xe+krReneokeRZmaL\r\nLVGr/vzkXmgtIieP9/Yfc8ND3pMDBc7LKOm8QiTGwgKe3MH03MDpAor/wO95\r\ndqDPq3CV0vfn6F3HRamVE8E4rb1f6rK5L2c=\r\n=sS/K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7644d63d5.0_1678141695281_0.8856214100455013","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7a54cd49fe30b8addff2e4ff5179bc78966b97b1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d96330c08.0.tgz","fileCount":54,"integrity":"sha512-XBNxAaJ8nxTeg348hWpFTWTVK58rbNF5BokMg0QM2krw4uuQwOqtaeZhmVubSYRyvFfAXpz9fWCq3PvVHCt/8Q==","signatures":[{"sig":"MEQCIFscMG9pIFBMaxtzR3RhYjju9s43vTfY0Ky9+8HrgSgEAiAYFXsu9/QPiY9y1qhlPGHJulvr+8ro51180Gxx4c7hDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHStACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3ZBAAldbqXhyIb9Ocdkih6TjNeffZjWgXxFTrGAf9g2s7+0bybLs4\r\nEWUW/FadcEclY3ri4DLMZNFENfESF3x/1dUDzm6unUeiR3vVmdTEVZm7Y0a5\r\nmWu9YE56rRTTfdHMFlvVSERZfq/msOVjLbKexXMkcafvioldIecMybEW1Qot\r\noVw6DDUhb/2eTY8r/AObierYjBoo6hdxXewrhzCqYjxr71QYxe8P8iEnGjl0\r\nAYiNi5lXZRjk6sOuy3Vr2pZ/WgI/0mjQDzQkJRC8PiQ+jjZIuTIQ40/2Re5Y\r\nb9GEqTSU8cUew/XJq6pat2VG3uaN5XVV4is6M6lQ1RHNc4hTc/SLiV2VynZC\r\nojNcV911H2oyT5uZtnLt/Iwd3rDuMPt0hnfoi8EwYftzesNI3fqFdmEbpnuE\r\nWO5DGI+Onba8MkZlYSp4o7HdHVFp7CrTeKI4eU5kVa5cmKjfV6JBzuvCrl2f\r\nuEFFhWBqn+8ipFZLAYvVdbcCHL9elOtPnq9kMI5Dk2gmG8gWyNwSuVV4qLr0\r\n1ooS9oneKDdhySSm2yFf/UY3kSkOI8F9wCExAIy68hiD6dpkXhVruqhdQ473\r\nZr7/H203iKUs66R5MDuCZbbTpqQQpDWn8eB/fEwUxRH6MBwuS8Yz7W1wkcog\r\nflcLYYT6GdUIDNpQg85Xvzpv6//+/UlLsN0=\r\n=BfWA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d96330c08.0_1678275757794_0.27196466352330684","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"29518e62ca114b393c3660abb220cf06cf93232c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c99cae77c.0.tgz","fileCount":54,"integrity":"sha512-RbSFzmEjBe7doacPzV/ysF8VxUe+zv8YKSzY9bljwu0/R+JxDut0lX0xePg/9muZDUKlD2gi3Tkgrl25LnKAtw==","signatures":[{"sig":"MEUCIQCQ3uoWLaUyvZ7Icrm3medx8dDuwzE93HQfQNba3gVp0wIgD/Xz4Z0yw8GxHLaNPSwD5uG4hoWTy0Zs5YHlE8sf1kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW1hAAhvT4BYW7yS3+6yYs4W8qixKHDjstr+UG8T4RJF4to/cDSHqs\r\n228Pn/B9akvCycT6UD+/Wq37F77rW2sOw5LqXa+oS6iMDnI39xq4XPZJLwAG\r\nt7Z2VYfq0pItfhcNq9slH5DTNlfnuVfjF3PAH4D8xDafGn79BhzmrDj9Q47K\r\nQVkcRRiRiArUpyxWroVNpLOFPKOtDe5sGmjx41ip79SfXF9f+DCbr+ZKlTSs\r\n1gNSUAHzhoLhUM/QORyopdlcZBh4Zin0X4FaLHb+mfp2wEpqt+qS8+Rsj/Lw\r\n/GKGCAkJ+e8hyEx8UEKZHAWQgbosD2ewmceHTg9MCqyUCz52eBR7gKFAgcTk\r\nZWZcdGZkiqvGimmkI2ak/CdzpybGMp/m1UzDHcrko+t0XiDkKEd4CuWnKfWm\r\nWOKjkAsMBgUfMU5m3EVmNk72UaG1WxfJp5ky3i8/w78agTxyEvaNbLmc7HRk\r\nu3ht62o63ljgSjUuOzEYBb6nUu9+Ec1h3NBhyb+L/bzm8nMeIKqW8Zr6vl6H\r\nWFc+Pt+5gG0XmHGXDS8a9FoNclJbm4WyEj3JN22flsxJwsFVl/swfWpHEBqU\r\nRFEbDAirSZLNuEHrDI5QXCF7F35tMx8ulhfGtE479Rv6Y6oKUayBh/0FGnZP\r\nkTgd6hmir013dzWAACYBmnRDbCzUcxoZVTM=\r\n=KgWu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c99cae77c.0_1678319021863_0.8670599397742924","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"53caabb09aebadf69974e2be21e5af6ce5e2eb7b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6023b1cd3.0.tgz","fileCount":54,"integrity":"sha512-Tlv65HlzyH4ld6WBUo4EgLbMJPlm2vEdkJ5QbWTeLK7njtmxYCzynN8XqknEBwcETTq1nbfWXiwtLvpcG1KItQ==","signatures":[{"sig":"MEYCIQCOySjkbRHjRDbV5wNrkOHW2TwFrkByyDiZgD3953VwjAIhAPVztJVRqrCZP6lvwej2YwaOpDr0IE2UOUR2xQdenQ2p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCey8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwghAAlrbBraXMQN5iVVR44RqqOISTY6T4k3uzKxMMCvGTDKXqip/Q\r\n0zFCxuuu29nrqEdQrMiEOr+f+kDBsEb5cOY0b/9QsbaIocqgND0wmtEs7PoL\r\nH9+Ak+gEgXNuRZm75WkKeXufKizZst7g1SxjHTlXrFjsG0H70BHlea9mIsPe\r\nRn47hG2zmbxzc9dF2DGf+pQulRsLquhVT/dVyrDn27XJurKNb7ZF3ZOTktYN\r\nQDoA+PSocsz8jC4lA18Gg8AJ8c94JAEKZ14CyvKS9/bPbUbNXp65yiQ/2HdK\r\nPMVgqRaE6STymYUV5G6SLfAtzDz3HKJnlKyRK9iA5Us7/JsESs7cChxn94sT\r\naXX4cVK2OSxcnt1H+NaDxW7TyThduEFOr4WUqkN+TVrRT1SVrOfLZGjyWkL7\r\nhEFZFOo59ujRlBSmdRUo9KINkPLdV74iC6vYwNbwjR+o4OtiJsNUq8YfHOM/\r\n7iecwEGaX62aazM4xLmyJ/8DuDPQVJkwU6FOqt+SOxNVkfA0cZn+TyUgruoZ\r\nYc/PqkDk57etiIqZ59tFg/lxqcB3YaA1vZd+1tsqdoFikAUSbPUr03RHPQEQ\r\neg7hw8yWudW3D9INCgalSfziyAqpOwpDIMvdsHp265bs9axsQ9qfCrS98p+Z\r\nttvVFkJUflYu5pMJ6rbhIAXjb2tw5J33jg8=\r\n=gYXH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6023b1cd3.0_1678372028548_0.4111214043418472","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/segmented-button","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"302a71adbe7720a9ec11572b54a5a8d5b18fe74e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.274610c77.0.tgz","fileCount":54,"integrity":"sha512-vPPOrhY/jaZr2Aw9Vpysg4LL5Y4H3WSUv1Tw6JczH5h2xl8OIZhNpIAN3UDW+sYKwtspzcD40jxiRlATciRgZw==","signatures":[{"sig":"MEYCIQDUeLRNymg/aGHcsHCvAxoermcILxnuSDkXC9H5IyCkkQIhAJ+CHPo0YzR6Yh5htoQfTePeCdx33YZoul3HpuNTsTSr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNrw/+PJGn+Syc5RGzppE+74IOvY7sQXA3bUQM0yok5rDqzlcsX2cq\r\nj0Fq4sbMx5xGsiGLU3EqoJ7+t2g3sRs8efj71DKl3nAOeqTJGdPdu4m3LnNt\r\nj1thtO6w/rjOeabRllKHsBB75CegSPJSUT6/XsfUt/F2+gXDdwrM1wW8RNwN\r\nAKLf41yG7U4n7A+tjGqZtDEOlPptFm7qIcdBiU0wAx6uJklyB0xA3ZA14eSW\r\njXZ3wvHmgj69ujTDrVp3ukWv0WBLZNhBDeQKo47ZEBpXZ9ya7rSN+N1gxnyP\r\nvVYqQGAyM9aCZGBc15058HzrcZFDbnCQFfk9jhPcWHmdhHgbGtHBq+fPiM4s\r\nS8syawG9JX0+TGx98vDPOEUB1YodbsNujQQQYcXVtNh1CELs3j/B5VnMe8Lh\r\nZRmAzBdvv4/70qE9v7jYJq4wHumjDgRZ8nkrvSzRdO4+BspVUzuYCFco/2wl\r\nYZMb0wzQwHDdE5WQLfIerDKJ1wSnn3phiW41zMTl4+PAx2x9hBJyni1smAQ5\r\nYnb+3lghK5wgwk3tUmx40uBTCoghDh/oHOjlPMMDIDb7d0mSwujiTIafMg2N\r\ntpdP6X9YraZRB704tg0PJzPs66DAKIBq6NQLz/PHzsKJRJcV5bVV7AvPctlC\r\n27tJblB7/BV6qmpB/OHwm3b/apKa5A+KRFg=\r\n=x1u6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/touch-target":"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/segmented-button_15.0.0-canary.274610c77.0_1678373973042_0.7013387240938758","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cd5b74017500eebe03bcafa63f88b0d23e36d6be","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a274583b9.0.tgz","fileCount":54,"integrity":"sha512-rqk7ADiykYZA/W+6djWAk6GgS3aJYUZpYlmhWjzt8loDU+tPdy1lxjzSU6hQmri/6xKnSTduWB8uu824b4jFzQ==","signatures":[{"sig":"MEUCIBPlPf9hs4y0jdIa5RJdjAu+HVElB0kH3i429a+Pnp/0AiEArQNvk5GIx2S+uqbJuMZlWjUoxt1BwUDGyK5Zjiji+vU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjk1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+axAAlcTjbNxV3/UWcXHVzEd7skWwhmW2h4FHHApqQw2+lDX1PvW7\r\naRsxKi6MR+AAp7KAufR2C3yusNgGScuEqU8tQjZUrrhPqYBS/CvWHLbXX9To\r\nVSvb3iPFQ1wu9LQ0YFcrm7QVc7SyLlw6bozgBjM8gB14buTRC8WKgukZKL99\r\n73UL4UR5zB+4MJ9lDnan1Q7smJ0B8JN9s2M3QERKo3bS25MJNnBHIJ/x4MkT\r\nRKFGmjw0kgJNhletJq9D4IolrmD88SMHLd1ZGLmHXvFXlyymiHmdXc6XNqFR\r\nQwCAAGjPjtpKFbwD2WBOsp4p/buO8qoK0Qfbuhr9sIMDrsrUsNjvHefp9APg\r\nKlMFNHS2WxKeDG5b1cOQfnEfWrBqgeXUekRMb6HDoPgvJBWcUqziKdMwfATw\r\ng3E4KSgxMHgshrALtmJCxqbO6dVS18sKg+XB0nnY6RdDfi6uniK8HkTnyVwd\r\nuFgD9cewn7gCf939mUgP8DoVZ0KxpKY3Im14wAJI5obMy3fO76S6UpL/fExn\r\nNXUihpGjWe3Hb9kVmx/RpWLPvSkO1rLSkbwU79bKK/V/t2BN6JMu8V8yx0Kd\r\nK0tp1Psuv2yUkZQ401S/cVhwIGzPkNa3u9a81hocrkQvTd1cqBSbFGkInFee\r\nSlH4vPFx1ZcnLX66XRIEdWIZjzFEtvt32k4=\r\n=wHVX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a274583b9.0_1678391605225_0.0869000530958206","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/segmented-button","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"20afeeeed31ac4c80cd62bbd3a00e5a74d255aa4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.da22ca960.0.tgz","fileCount":54,"integrity":"sha512-ZpD0vxr4JkqoNbMi5OSyctNidUthyHpRbGFl6oXtG/As0y8pUyOsCyAlZobhmhh/wfrs/Dl2AiRTOqOo1p5S/g==","signatures":[{"sig":"MEUCIEVRcTyYmoMO9vsSd9S6w7PBIjSqCnuvrdIL/icxKhTTAiEAghitYbM0n3Pt4V+kwgkQF93xJmY/l8ZkEj966IfUJI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0Bw//dvzSyGO3BrWxLpc1kICy/WKLeyL4+aKEfMhjvfKbqIvoSqSu\r\nG/QW7+yxc2dlunJMj2T138GeYrrq7CDO2ekB7KRupmX0QtgnACEfIR0vMr0L\r\nnyu3AcQBdzIf5uZXlDnim6++UkTiYehjn59/hxsEHbTh36lP1YBNO2xpFg0t\r\nIkTmRyH/r0IrIorr0X/iYNq74Y9WtbP/OQHRPLgrLrd13Jm2zuTeiaC3Bsfm\r\nzzxo5HsfygZjbCPsN7eTzj8aBLjsdOmF5KVVBnk0plLFJ1HJIBiUU/FrH5G+\r\n9+MJ29TGgXF+hYmhy5H2AHLivLuiGZS2zlubOTndOT5O3SuXLbrgbGz8szcD\r\nDD7+27U3baTLTbcbw2bO/BHnVoJHyl7OQCTmNRDOlnHTKqVPS+ucRd+U4Gtl\r\nVcl7eMPEFqiYVRRQbioZpM6pTxlPK789cwSCrL9hwd494xy/R5M2knmVzid5\r\nXjg2g62/zhsQnAVjqiHcw2CrVYjKiF3reW36lDXx/P8uhaqQv+vgHkwyvRre\r\n+U5vxexfAfjrHQLRR5QOcUQh0ABILrJOn+QHFJQlrinkSGsJTsLjA/Q+XPHA\r\nOPVGjv1B/ALNSV5681ik6/uwQo2gNQpd2B4R4kf3/dIS56k3RjS1dhSVOFMY\r\nX+CFyeFPO8qgaEhnj1+BnMo/Jtj/W+7r4nA=\r\n=9mDp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/typography":"15.0.0-canary.da22ca960.0","@material/touch-target":"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/segmented-button_15.0.0-canary.da22ca960.0_1678393141573_0.01276107860998299","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"297207fcccda57064e5aca4d707941d3eb44fb63","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.304a94e8b.0.tgz","fileCount":54,"integrity":"sha512-6QzW+U2C4QVVA/txlimA1CzkoERT5IPp/TLEvqaozQDvSc3kill9KMzH0paOHNj9tGgQX1pqyu2KC/mbbU2K9g==","signatures":[{"sig":"MEYCIQCQ8m7bvC6yOU6QLgzYllyUIfSKPli5xAd7l6SfBao+WgIhAOAB+LPUVQZF+4prT2bgZ7mJ4d89WFMR7H59Hfggx9lx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkV5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpixw//S33DzHl11QFkvIVxyo9xmBkWmTO7Pne5jV8rb12LwWkPrntT\r\n/WRu4jskizPe1PrWBuhWhwT6zJgQjv645M7WrAY3OfbT6RsI2xfcWutCQvAG\r\n5HQYTDJ5XAe92FBk36I2XY1766z+RkqM4oLohVBD//N9byPG06AtrFW7PmcO\r\n6ZyaJ7VMusdSUvyNsybFRRH+hEX6tXaKgMDLVO7G8KLfCRPs3TfnSiFraJUR\r\nJsGPRucU2N6eAoIA6iyCAiJYfw2g0Dx6tzUlqt7E0Pc14i3HEoVGhMFdTJET\r\naXvRZBX4y2ARD6yjnNub/cML1UnMonDPqP0zy0Jtm+mc1Ond61DGmmqJHUvt\r\nxeg8vJyhFyoy/e+w2u2fAP/76XHfe592UHOqhokzjrhVv/AHKMDr+RcLJwDf\r\nPoPEDFTgJLBcnq9cgYF/pCO2rOo5DddTtKhmzGuCWaamB8DZKWSQX/LLQWo/\r\n1WVQEYjJEQ5hny4cxjM59GMl9CX7VlJaGBRL67JJwDs5vpKYpbTiQrhFHu0s\r\nwRPy9P0dR6qaJDOeO69sIXbLy4RClO4l20KXrRYxbsTnGVyn4K7+t1H69Nmr\r\nCHxcQGV53eVW9JJI2JvkMGAe1aK4SAWPqM/wnoX4jnHKpAa3AGJQHdpkhIDz\r\nMnolSZT6blok37jgl63l+jVlQyIeDRmdShM=\r\n=F03u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.304a94e8b.0_1678394745040_0.6840377233706652","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f8ab665393ec884f6d49112545f4dbcb78fbd512","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6c265915c.0.tgz","fileCount":54,"integrity":"sha512-19zPB7Tig7uHWUevU3j9FwI8AGXF/hPTcCVcHhBGDPW08C75a6YnRJWPtAESLGdz9BVsOdvX3BH1tKxLQV3vlw==","signatures":[{"sig":"MEYCIQDj2ng1ilZDtfDo3EwOy6H3QLKGpmdC/ztp9PMdmiV0RAIhAIRHECKAsNzX+DBYaTnPpSMA451Bo6mY4VYW6/UTLRdL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTARAAmm2gwHiDHN5lMYYYujFgCmEFJVhkckTp7BaNcKtgo2rDXht0\r\n4+c4euToR9bGWs6G5RR44rRmkGLgrucnvgKCpP3hwVEb6PvPCTfEdGXvxQ85\r\ncwYMQaxsQ48az3NsQxiAWe9Y2Es4zPUN2JWPzj+YRPvcofzrEalwTVOGg+hK\r\nDPq0v4R5jUeUz/zepHjNkQ9l9QM9MXkQuUDD5oVyUdIEHHic2h/jUOnbl0cL\r\nnadqvyQT+Mdm0wFzrlrZ6G9LunLxJbI6Hu9k593/9Sf0r1i/6g+g7mpJwRLO\r\n71ix5fdml39Wx9ExISBRWIM6esv3Jw19NpXDaiNXEFX5AYYyiuMP6GokvUhG\r\n0w0cLrpiEeYFJbn1Akbm/uPH7RY12foznAgkPAdJBI7zcSr6P431SCv750uU\r\njTc4FNkAze/kd745zaYvij6wOGFO0lUM1x0cuZ4gp25IQEIO5QFwxbQtL+3E\r\ntVMC9t6GfC4kqHuhbGSm4Ig8cPHaS6sEw3HgS1ot+Ho7lWIjFuJvERfpbtAA\r\na8Syo0N865p95hiteVR9o23RQtIKfWQVsl/+NcvvNg9WTudPb86TmixrZ7LT\r\nV7y6HkoB/bOYGWrW+syQOTahkrnrsY7abf1AULw2YewlI/QAGUUAIatjo6gB\r\nlc1tCQ6/8GMMvJMMWI2Rod8Y8F9XR2R5vc4=\r\n=h3ww\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6c265915c.0_1678398483420_0.31806140410113737","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/segmented-button","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e33b29f34305ed6808a0200d73c12f8ffdec9e20","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.de5224633.0.tgz","fileCount":54,"integrity":"sha512-ypHGerzsIyX04YoQx+kC4TPOJbgx/OHUUZmPKxDIJNTQszq+umuTjb0FVhMTsz6pHZ/P0az7sM70hdlAkW3Vdg==","signatures":[{"sig":"MEUCIQCt9SrLdhriUAiTEj2CHlzom1Syg6E31B9yq4f8VVAlGQIgCRR0WW0oezs+tGsGDknegSlwmiUE3Zh49cKpNSC927c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnItACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlUw//fG3iIcGc9wunQ6asIleVXWfiWZHXNtApoFYrK9SEYrd1sPNE\r\nmfVWDDsT2LOeAOKKsxVY1CT+ZLT5LA+eTfVJKFJ+wsa3cXyb4rfpxLbi3Jkk\r\n6cRQ/IIyprqcL/srKEcjEi8xbQhhKZnG1x4XhD3g2bXHBrMmoyMBvWSKyqj+\r\nqPc3SsJGe3AwY9Hic2cUDtv5hUv0/VZU7MGZLL8iH38Un/2rlyTrkH9HeSVO\r\n7vhX9XhK2CMSb2ft74mYA3BZzQpXJGJJOtxYV6S/MQR7h3CeW4ujDLFB++xt\r\nWUTL9NarRBMAA1+eInizaRDoYQ9+h7GOAWX2rKCPbmdYD5LpQXnhk7wYDBaf\r\nvc2cHQgr8OWFEiy+xKG1AKYEXg96/uAR+DKJjf9CNt3/5sPP7Z11YBmajHqG\r\nGILsCMSIfQINj0USfErtfHnedUxbNf4qoxyXbp79uUfwTMJEH94EQW9tVEOe\r\nkg6pmF3veDjfUPxJji4Nch/8xHFlKI4tCPRYX9V7f2EJ6KPy05Knv774OVJY\r\nbApP643KStNbjuvMCIGwA/fTzp05ZqiAbn4886vjfaoxpp1b1jM+D/2IOlig\r\n0rUXIHh19yO/K8rhhoREDtNlxpBMJR7klW6VJtQAcTL7sejDMaO/WvRxjEHI\r\n430clycjnmjSBsvDw6Fj4BIlyEoVGXVOfIc=\r\n=Diow\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/touch-target":"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/segmented-button_15.0.0-canary.de5224633.0_1678406189323_0.24866341800316416","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"347243852d3cd6318414102045213f59eebf8e51","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8879557e6.0.tgz","fileCount":54,"integrity":"sha512-L2izzptnD0oYNDp5ii6rG/ZzSTt5l9JDWCz6U5hWp25wXnFAfu6uZWlboGKHyIXWFra6LS6cE/uctXn5Fko0lw==","signatures":[{"sig":"MEUCIAfpmOfM2thqJUDgnxuTRwdA/nAw+43umd+zw3Pf135GAiEAlVp3k8ITTt0D7WORcO2Fgot5GGvxkOMfscC3PEEuALM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohrA/9G+9Widhz02lM8/bN6WZyoyHuYd7njsQG+va2ucEmUD9/89gq\r\n/7Rhz+KpxoAbLPcITadMTnRFUQYOpddOQtIrGJAAvOE23S2GXgZ8LNXAOaR9\r\nXy/qT8voIcFEMkg/D81egW1cmfGeyrC3IUPh1bYUzUe+tBubzSeOy8kXE8JU\r\nDIPEXU9/wTsxB4vZUbogEQ/+7BVdX58k0DJioqNG8nd5ujSu2Gwdoa/GnGHG\r\nzIFF8H/NO5gOthGipoK6GotUiQ4O6GQljCsaKTgeB8yvCgdRWjqNJDk37c6O\r\nMYgvl3nPAHi8PnB+TWDalAfKdO99aiwkg5th5mh6jEE9nx+aewfrhfCW5YYt\r\nBIxyixzqEfW0J/oenRugQ5gchtUTOCpl2tQScXwnLFGy4TOO2I5cfMPPtpPK\r\n4rE+G3MY4oByULQkkakVBT/niYlA9ta0OT+/Y1BHaBMECXP2/XkNLJpEY4qO\r\noVEL8EbOPcR8rOblND4t0ceLbQVIFJvvngqPn6V/FFMYQHUQ7S1j7Lb6MH4A\r\nY65pJIY9rVbAxJ5hQMuiICx4ufri59O7KfpetOnaVwl3dz1PxnZpjA46tJPg\r\ng/1R+nr/97s0uGIRGSib1d5y28RVWScUKZUB07z6yHEtfQFB5XknLWkONSW4\r\nUsxdYROx9Q/HpqWtBYO9z+dMMak23OuBC8w=\r\n=7wd4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8879557e6.0_1678457319639_0.03077540470770823","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/segmented-button","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"09c3efc26a077383b2fb96778780dc468c54312a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.23073a303.0.tgz","fileCount":54,"integrity":"sha512-S8pES3+smQkG6xbWESFOvaiOeCQv946lhDLStya8q8YRm5cwcAUBHeLasY2SlJrsZG4xUt+7Gkp1+uGiIiZkyg==","signatures":[{"sig":"MEQCIAFFvsRnBwzSz3NzLKieZkZOlTWP9pKwQ4eB0S7QwMgtAiB34cNb1lszxswngPW3uhHm8ts6Cfz91rGvruRtAY1+Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzuUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql3g/+NIKMMXt+u9xcOMGiySNAp1xGw9eL1jFYc3TtNGkt61ortEAQ\r\n9vr5Gm70aXVF1113URLCmf5ce2vgsNfGzZXAGKUKo+2FOZ8Ng7iNhvfew2E2\r\nXfX7esyxFnUK+bBVj9Zu+ITMCoyMFBzRdsd1PovYL030Y1xqxoWnq9iNMiE8\r\nYja/7MzM8Y06+gIkOL7PCSOa1/Efn+QlCcRU+F1AUjk0btd/DV5+YctNq0mv\r\nprDRu2peJH+YvhuN7W6N56qrAPrmPtjnBwiDnTT26Ghp7HI2gvAE53zJtkEP\r\nA0h4kwd/CeGu9usg0tWr6bJqQIjExqdyoJj2wXQa8+OAad7Mry+zg6wb2ZuU\r\nZtzqedd5MmCtlKD5MAouq/ElzPsbknXDQk9HRLQkwPG/SkcNJ4ZndQ9BiH5W\r\ns7yLPwRm3wKjffyfCyTmpdeshAsJtzWvR1Duu1omYT7Dd+C5ydIUA+Zgkjno\r\n1xM+a0Z90qJHzxKgE4uamg/lLCwd3CZSn27YFMHwglYJ5jNRdd+JrGpWRKgQ\r\nrGTbSthS/0m7uan2VUW3dWxR1z+xltL6jIOWh/ZtOVMI20e45xdFIBrgC4Ni\r\nOppmzV5V1ZlOgOonzve5dk7ZLirbrv4klmvp0i/JoVNdNbGMWRR8MMauCnqZ\r\nybunGZ3V6uv8Z8mP77v10qK5lmyIlO9GHY0=\r\n=RkYf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/touch-target":"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/segmented-button_15.0.0-canary.23073a303.0_1678457748518_0.7695713328777374","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/segmented-button","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a3b23c65cd986bd90edaadb113432acb6ebcdd12","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.51c7d4014.0.tgz","fileCount":54,"integrity":"sha512-ASt2B25Fq1g/W4d7nGaY9JCcfLEcYzR9eBF9bc0OaH6X1psJEWUFcZHmvkN0AKiHwz0JHStmakE1vrRt8PA6pQ==","signatures":[{"sig":"MEQCIBOV96eKSpf7+S+8e1irJbTxkgglEVJ9Gr36qr6poz24AiAu+9q902hTqB+FKiVNbtHM7G8KO8CywxPL2nyQRHr/MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC19LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkXw/9EvRM1cCnFfJvZRIrM7UgMOxIdgC+W+zb3mBFMicYV0Cq7Bey\r\n8faa8rGrSquBbOGuCAu6vALPlrbRH0z8ugTuaht5lVTOH9t2i3uyg6A7P2ZC\r\nS9fsuOH+nHXxpY25/TtZQPUwrx4oSQUsaNdUJ8ZcalAfzmdQ97XyBH6hsG52\r\nLkPf2niP+wJcvVvLREgIeEwrVKe9Fpuq8ftDSozyv88QtKoiTd00ryxXnCaQ\r\n21CqoOch2nwTcq3mtHI1+6US15xYzdB57PL4I5yPGYQHWLUaMp4SJdneaX1W\r\nogXXte4bHj/k38VGwgpNOIFjZYuxWkSYKTDybVs9uYDGaZSZ7YQTmSehZ+SA\r\nLxB7fl6rprposG44sBSqpvnejW4QNoSOrM6BudTKTVvTDZtAUvsBBY4cKxCk\r\nO5pdSQCxOteQlyrHQqxjbPi+MG6jInqUIXkWLCb/UfqwkH57zTFD3rCY/byf\r\nJrv6Evy791akGuae1F4fHIEoEJqGR18YJFuFG+bdeaQDpZHqdNtrrlynqAoM\r\nZ/1ka1xi8CamMfXPiSLyID/rDZcj+pptD1a2Gp+lrQykfU6VdjAkaRc9l6hx\r\npDgy6Gz8Q1q438yG9tdS6doEuBB9ptv+9+oUWgpXvhP+VyDBP1gjxSRfMz++\r\nfmSm3PbQDhgbRvjsbegtYq2xCDuZQUZgJjg=\r\n=IqSq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/touch-target":"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/segmented-button_15.0.0-canary.51c7d4014.0_1678466891485_0.34433448019729784","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"efe6c98e28cd908245f2a229a6948199456391c4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1175a5be0.0.tgz","fileCount":54,"integrity":"sha512-qrZvKlSk5E8aKYJBz8bq4PVnDItmMoecoK7IQq+3ugawqC9iPH/7jh31Yh7TgrLFtNpRsKmGy/8NH09P/trgzw==","signatures":[{"sig":"MEUCIH7XBtMFZecyQXxZvSB+ztRlXNMt1QVRHdWnOI4AK7bQAiEAw1x41M88n5IXmk4JgOA35RnraOiRr9XEi44D3mcIALw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5euACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqstw//fJUm/21vuZvVBQuOeZ6VgkV4sG8yXodxfHSzw4Epd5GcxetH\r\nvHMZafDBpeaZ5OVN1RmVE9lI7FLH6EvkGGPjRrdVuJoWtsgvK7VRzSEQW1CL\r\ns6dCwsKIfW6j63jjo5sgZs+yMKvrJGCOaNlFFOC+hRVK4FRd6t4AnV/SuHmU\r\nPgFGZKUg5/ZIntJ4c0it2S9Ub/z95NSGxt4+4CQBPQj/zfKnaPYUAIcozwNj\r\nPJNhrUmgBxILXhYu4N0YbgQlzSZkrEkWkCk+EDBCa3nKsuU7UEZqz4xwfV79\r\ng5hiiekvLKsAtnRcLL2hzSHU336i/k/6fbAK9NxK48EC0rAqbxYJFRbAmS3u\r\nh+LhWfd6lSKVGBq5uzmD+Ov9q7MwOJ0xPanNyokIOLEzRlk3CH8BqZQzkOwD\r\nfhFrMSYJv9V7NX/jjDeFkrGZuATtwqsYk1QblputXFxjoHuhfdZrTwbdaa6W\r\nOwBlVajIcpOxIhN6cCUNb29fAXdQNQTb+fuYdFu3Fe4ukipXBcUzcb5o1LWe\r\nUwXla+6p9JCVVJ2UL2tMLiPeL6KDUvoDsyu5eOBoEuo/oNUDOi4WB1g4TVlU\r\nvir9dfJtir++dCdxRYS67J2nRJs92Hd6GlKnCg/pSHBvtclso+XSnH3Du27z\r\n9ZoPU9wMlP/RhajBcg7BPT+hHRZuCgRMBhw=\r\n=FcwR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1175a5be0.0_1678481326043_0.9611183499591469","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"34afa810600c4c5f35920d854735c486435f170d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7adf3af80.0.tgz","fileCount":54,"integrity":"sha512-yOAmvfSW+wZXt9GWcfxraqvVABq8H60yngMvtOCEuqQGs/xgM+7xd7QTRIRtA7G+Vk/9louvB4hxFuR+abXSPQ==","signatures":[{"sig":"MEUCIQDMpoXykp0O36nZB+C0H3Fp7S9zeCO/WX/eW3bO7e7edgIgG8lwBBVm5JSPqZeobroRfU5e1dO6cs1XpkwEQAgtMys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp28g/5ANo6UhczzGoFvkqa1AObCHc6ICGsGUj4ljVig6YV1hbTNxUq\r\n5L8F+xZujERXU6MXy8d4PligFOQpuFBUuOkcEQK92jh6zyJ4aC3xbxEIZKnN\r\nFnweAuhJtk0x6Coh0II37uKkEllLxPeuQQ53pfS2ZodqXrj+LftG393uNKzH\r\n4nL5lIbZ0uoHWTpQ62w2gOqj643RQrFuZQj2PCBdUqadhPZwe+t6W3IPgK19\r\nxPYSQZJpWj+tDii+9x3DUJnGCXS0Slj6cMdRC+oxDNFJyiH5esq1aS0wrKta\r\nOMUfX/BHCcyXt2M7aCbLAdyMqjCldI9cV2Hytjm1pS+KyrLmsLy5gLanDLVY\r\nyALrrYU44en1mj1meCVocz2lR+PTQluRJhmmnAyjAoHolmFeQnRsHSJnXB8t\r\nXT4cnXgML1NsyaoB3FVy2iQ6PY/VpfkLN6qneEUXL14p9ZL/LT8Ym1kbwPVA\r\nL55rtH01Ziig6x7Ac+DgN4TSe+UcSSDqF3A1UnSMg5GWBC1WRaUXuYAnIKol\r\nus5b/lZzl1Ic1Pdb5WPaXadajcGabSRqOuFPLsm+muIh+t7xDdl51XXN5cck\r\ntDZ4QhPdxye74nN2KH8cWgUbrAkmcaBVq8fKLrTdMJt1ZhNT4noAPI0IOa9k\r\nUcqoiY/umqrTILumDsH0EUm9xgzp588bTEo=\r\n=Keiv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7adf3af80.0_1678497943829_0.15829772879112758","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/segmented-button","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2d42a1dd5e8c4e581a2514c69ce90665017b9a3d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.82554d770.0.tgz","fileCount":54,"integrity":"sha512-+VTj7IaXYTGSntD9Q146YzpkG0oeeA7eGtwPwMjWUsGFVB0DDCy3JlBD1tJAzd9tsLK4ZtBX6Q5kYMcZ0ixlzA==","signatures":[{"sig":"MEYCIQCa5Rwvji8hZMhS689rElmxCL9DjcwtRJDrhLo9a+tSPgIhAOUDxJ0J0fC0JBwdfdmbqOBLBqnpawja3nDvNsOJ9ZRv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9t2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEtQ//Txsv3wxZ3VpvZEqllrKRkvdWCvXdI7nhliGL9ab6PWOXin41\r\nDjtOo7q0MpSmlPb+2k52Ii5sWhjl42GtNvn6CoVZGMHCTBWJ0sI1Vkl5VCEx\r\nLWzL9zhzBqhM4PA+CaO935ZGwc/lMkdYSyWivdIPe0z/s4IjIvN3IJTF8Ur4\r\n9UZExYLy9m71VF0xzq82HR5uXByZ162ER3KbJ1wkEqaf26JbLqFyTOJkqapC\r\nbSIFOzZbHUq1ycPtXfMesjHmqmzb/BWp24xlrVwtu5J1M56WqPXXJ3yTXIhn\r\nFdggbHPC89YHzkwFvVn5PiZE83MLkEe+g9QQhODIUFbT1K2eASYRm4wGcjku\r\niAnQhaVTDC9YyK/c8ybk7AV3JfVQ0um7DG1cKD+sCVIXWQiU5MjpKoiPEux9\r\nv2pQc56cHsDuzBPSVK7ozWCTHWyrKXndm0Y8vnveflim+A/mm9rFHBvi3SHv\r\nvjIrf+UM4PR/fucN2zZViY+N1prcW1a6tQ1atJrMOp9zMI1T04huLF4B1J4U\r\nP44xdHCd56PwZVbJ2KV45TnB2ibLTI0y1dlkTtfMKZkgnF1L1hj0jitx0CTN\r\nVV/Pj1162RaezFpldQsaLKJVlHkCKUeAfiP2eqvOTrmC0pMRuoc6tIOj1k76\r\nuiIxPbdHT1vDGddjUc+Bk4gTzy7jCJdUrvE=\r\n=bgTu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/touch-target":"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/segmented-button_15.0.0-canary.82554d770.0_1678498678571_0.4596029995989279","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/segmented-button","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ee98738ea9d8acf335f90c7b02c9c34feddc4a4e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.93fc524b7.0.tgz","fileCount":54,"integrity":"sha512-3ZS+sy/YtDlv5QfgjwT/bzkPlXvclFkfsQ+LOzngscvg7++Po48z6ggQ5vSz+Q46pJA8fqzRp8FLwEePtVaCug==","signatures":[{"sig":"MEYCIQDMvR1DGNvi4ktclrKygNnC5Q8yMVcDhVbPUoa93iaCgQIhANcmn3e0yG7X9LsIvaaxqloC6BDSIKE890hGFary7L21","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuFOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5kg//Rfxfux10riRkbWYO8Zce+g2cshmGq6eFK9dUyTv6f3VlYXjS\r\nGlZSsc/4EVEuh1+SoUSFS+iGDibJ8zKDHv9B/pCYscoMSX7mhSszNCqiLKan\r\nyb3fVnC/dx/zfSNuxo2aimTEDLnZy0jmvU2VJFyuZuZu4RA0Iv6GSWSz9H98\r\nxh3qRgUR0hUDAynA2AK/EZEz7DfuKvcVlnVAg0TCXOTKHfn9JTvOZVKv/Fjl\r\nwaWATNWxSzhZwd7N1tfmwLCJ/TnpYgc0RtmsnZ/3R0DLwp3Kt38nXaLmMcVo\r\n5p51ZaPtbmSLThADCzGadI04UqhC3SnoweOnjeT8HnwuYseJKv9BIXu7nnTn\r\n0xCzK0sYX5Y++EcyeQ4EUkdE7dgEn/uOWBLwo2GIxWCVdmJQN4mpONtKxRmM\r\nszLcFojeA6sx8kEMJyd6/0znoodB8veV6YfPOc4KNwULa7vsUKXkaNbtArBa\r\n2IuOiT7atKf6mqmjKv0CZgOkop7Gr+KDqqD4X0UoDjAW5Dl30rFGuo/xze6s\r\ndF5wnibQAqIXaeIUOmlKAT5hD6YY0rMVmfG/JdD/sIp3Ipih5XbL1xCjPSHk\r\n1pPg5XkSg+HuuZdoz2+uTKwMnYC+h4kx0jfvEcTbMDYgQ9qLSP8GbhJ0Eohr\r\nhmel3p+nwEc0VSGWzkRPIyxWNM9Ssa7kq7g=\r\n=HBuJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/touch-target":"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/segmented-button_15.0.0-canary.93fc524b7.0_1678696781705_0.783280534170905","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/segmented-button","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"06b7514d38ba4eff0b782c91888acb0053e2c5c3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.50be0fbae.0.tgz","fileCount":54,"integrity":"sha512-HyegdltEWL70+jG0oLk9Llrk6UhJH9LTx7NOejD6dYq9OQqBn1IwmnxJ3RsF0LGQIxfkiqJ3nCjEfyRG3jyqbQ==","signatures":[{"sig":"MEYCIQCZOTGhWl54KoAmzoCQMTaA3IoUz0+tJbRCK289rht9HwIhAMX2OyyJfhaZJUelxOujEue38QG0co/8Vnr5HNn10PNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrdgg//cFcMpAQYO54ZzTxIB/efkfpFNjpchExwBtbORiUXQkt6rqrv\r\nEGXr6KaMoztRAmmFib+4uNJGrweHe8/f5mr98QI9Y+21AQA2C7juH0CFAB0J\r\nww56eUwazdAVhGWklclqVFWrNflXEL3j20DIfN7yLHa5PdhKwx36/43999Eo\r\nsST+FHqqwh6fdzP8I8P2OgQ69/f8M5DfTzeB96g+lF7Q+4KP3HvEci7LP13L\r\nrNl7U7CkaJCw5k62Rzwg0GBSKd6VNfCSQKqYIl2jMxvNTlz4IcjNrM/0vWgr\r\n8Th3zA6P6MsNmYYXZHKXqAxtFjddfmFrQOYNHbIpbMCKBtjXV8jSx0GiEM/E\r\nuajbpsuqT4t/Fc5jFnYu9hJHlVdmqV0NwEaBAD2poQCeuik5Ncx3KpuCII7u\r\nJ9ysdAXUppgWncoH/KmxnnTHB7/X3lq87Nu6YQNztplLdqzJzFmuuIUTvJeN\r\n2jh16EMrPnyn0lx9MpAH5ig5Qes9dx350jw228D6a8jLZf2KwHoQbnyLgOff\r\nVRH0kPvxKsaUv9wmm+/trvZMVNoqgdIBMC4GR0e7+LxseRzcXYFWcAE3g+fW\r\nLybQ3EWN6dW2JJuz2pWt9D/rDNs3zf9aet71K+ZNMBoRk2c90SpAZ/qozFKP\r\no5PHMzsltvtme0dEX2ZCmAKN7EfxcnJjv4E=\r\n=732i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/touch-target":"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/segmented-button_15.0.0-canary.50be0fbae.0_1678729497708_0.886120203204996","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"56f5e30a04cf4d9a9ab839422d3f026a85fae22d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":54,"integrity":"sha512-gqEBn3Y+bG8uD5bPgjuz/sIlnHbPHrqv6f+MSV1XAwuo9OH/I2E49zo3oqfe/ZxAob02Hx4T66NVm5Oa/qrL1A==","signatures":[{"sig":"MEQCIGLMZuePhdEj7KpPZnOQwocrq1rZYyPrF0qsCTWFQxAIAiAYvKIvehXPXN/ULAtoC9ptMN86BF+GXCZoKFh1kqOigg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcug/5ASlRuJz0Y+SdxORs6tjmskudWMyeRrAty3aw5uckWl/kzdbU\r\naQ1it0q2wUjK7wYnqtFIVOxuNEAarPd2BWUHXT1FM8Bv53hX2ijQc2jaaE3Q\r\nv7rNePS92iByMbmz8ePsZpUvPy0xGSnl+W68hPIMHkaTVzcHt8ZXz0Hrp5Nk\r\nErdEEds+kaN7eD7/qVnS6CFRkOUc8vlK6NLXJSvOwry4jBBqXbhwTWshKruA\r\npBWOOCjCLvS2u14450DE15KcGK13MyqHAtW7B2BQfkPs8KE3uYY/7zR/1pK4\r\nvebfx1Njqx0ZgUn5iLvimL0vbL6vl2bm4hIwCcybhIjMdYuX3a6VAauPs5vF\r\n2OX2YUi8eUVieowxCzpxwmGsmiRrd6/nVQBMpWa2VunJKkdsIYSj53Yvdhz7\r\nfdssVyIYTq7CW1PjaSDB7TMCg9CJRcVmaTZEmRenjcf6IXDX+AXjk0/wSLxj\r\nzd8ADt/BkO7ipbZU81mOwr+9CNdku9Frj2SB2GQRC6VbaU9c1r9aMH0/jTes\r\nLsg4g2ofbvTrq2/YgohID529iXwElhw/bIJVRytJYSVS/Y5wMxfmvxYEP3rV\r\nSPf2hCbTiz8rPXDlc2vN4a5Q2qiIcVyD5gpd4otveJUwOvqRxit+kwvJuGe4\r\nmYJiNiw9R6XvWHZgPV5/2yrnc5MEacYRO0I=\r\n=UAhY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6b5ffccd9.0_1678729700094_0.999213040852216","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e7b3bb14d4090c0a09454411c47df105083edb6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1c8013f4e.0.tgz","fileCount":54,"integrity":"sha512-kHUujWAEav7+a3nKNBliDSbU+c7L6NE/XGq4ERISpuyJbqNI1/1av/SG8jTnIDdu5q7Ec5Lk/7eQht2VxrJa0w==","signatures":[{"sig":"MEQCICcfFaBcPY28TNkMo5Mgokvq0wFPqhyiyp86uBE64yPpAiA5iJ+Tq8qAC+5gqNFjuL5itfKOsTHrbO+GcL9g0Un4Bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2V/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/AQ/8CBnd7n2YW0+cOIy6uRKRrehjzWaZ+3ef/S6AwJx3aQ8hNCXH\r\nCiaOFrwbNsay2qaQ5/vmCV9oiH+XqYTpLgd5yflb8nfRY9xahrq7LL3ZtNBw\r\nJcdTa+qHqtZb3zFfd/V6+A71G6MDiIOlfl8pXVkXI401kcgbS5rP3lVBn/Dl\r\nz41EfyC6b4LmXiszXdRxHjcg+DRkCVy5ec/buamFuoDQz/xU1EMmXF1yXzk7\r\nAQfq79JNQidJl6g6RKXOw6y5YrflGdGsIKjIBpAHfmim8C56kqMIyXh8caSU\r\nYhqM/cG8ToTAWKKEJn24nzVQ9LI7ZpzBpUnKfxyRaAhCs+A4ORtJyd32Oo1S\r\ncD+UcMzIROsPbFPHUe+jpgNAMNF8KnuTGv5bmGGr1KUGwwnE2y1XKPJBONf9\r\ncSAXY2oXSDh9haJFzZVF/RIoXsWZgC/EuEUH2mUlhfhzbUZ7mMjc9WVCwFcI\r\nusXlwU4KfyuiVAjKuEoUlqf7DGhp5b7/pjvOM/lk25mQQDHsKFpfUbUB7n89\r\nLcQ4nY7LwINs6znY/Xnmbw+toIkkMWEwzWyUdoF11w4lNU4NGiUjs9+ixOVj\r\nYsrWXkyv/uoBKdn+zZAgTNKiWNlEumkOONd1Gm9+axlV6Ajj21fz8NaCvP89\r\nisffjRva9wcGVhh4mODw7T7T30nj5mCigug=\r\n=QPEK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1c8013f4e.0_1678730623626_0.23918749770275483","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"62f84e5359e2040e02362173afc693dbf7eed81e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.112715df5.0.tgz","fileCount":54,"integrity":"sha512-kVF2TgvXhK/JGE9jGvMq18UDOOHKq0IcbiLbybWtezjIlsLVGiIok8kH8zEftj8Ck1YZTdvBMRAksb9KHlDmFw==","signatures":[{"sig":"MEQCICH6d/GIl/oeYpCBvIBcN0BcmHRiJe0YKDQwj1uFrnaqAiAshF2MSVqAIU7O/2uhUaOUfy9SC1dfH9L2cp4raZFAHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD24BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUpBAAjphBJjHKz5UVEkiQdjnIOP7i3bx1rRYcb+HP0xOka+lZlDeH\r\nOESrDN1MGMC8okGxhfG9xabLrnAZBU4A6EC3t/9PWg8rMLHY8rt33jnfH1y7\r\nSnNltRFFyN5bjGRdfqZlRBo1ubte7l6wRYA1Ts4W+8J8+TLkXkLrNNpRgbSx\r\nh6n6qzpEkWSLlCEkTHmPHttWXLMoo59AnM1FyOwDaKLZ5J0ugIv1WozntS0j\r\nqzCgeKJ5QCz2w8pjGKNegfyzv1XN5fIAL6bVfXBr/iVvXx3whLJlwuZCbUmL\r\nuONELe41ACqnc4Qp5751KulmuP93loEwu3CAw7FYQqd9znKJdFSEWisYUa/R\r\n08+l4DmFNKXznUM6aSR5Q11gdcbKI1jHt9ytQhbNIpWAjS/vGNKDwh4jagOv\r\n5KmlkuouMCUaZQ2sLKUKhTcTfLolvO53koPjRcj+APjnOh45cfvOjw2putYv\r\n05BmNzO9TUnAgjbyJgZKrsvE1sH49sj4MiogZYNJlfy0UJvmr1ve3AgbmoLc\r\nRWBLtHf2bY1gFuiZzUIcyZVsKrtx49MqpBYWFI3Z/XFTt0lkEn4/aBr/lkF2\r\nb8ya6bLT/W7OnQMOm6aSWM1SvJPpv48ezTiVHgU5EwZDzABui/WbWFUjkBXz\r\nE6GjxsvrOOXaRXdVw+8wVZ5FR8l8Fi938t0=\r\n=8PqJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.112715df5.0_1678732801020_0.006364847018731856","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a07d7bcab546db1c208282cf5ca82d88aee987e7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d250911f2.0.tgz","fileCount":54,"integrity":"sha512-8fFC60VJF1ZMrXZDnHzHkDzMcHYCcupr5ZZ/B6XB5UcvKSqpGaEtcd/N7iYwA4pQCc/C+edWGZDvebcYadocZA==","signatures":[{"sig":"MEQCIAl8gbJJz1XZ/5g76f/BiBZ/I9n/evn6tjNLAoWK35W4AiBqhp7P0jpDYW2GFvYYsN60wK3bi7jVRHUauRUf2Yr6jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3o9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpXw/+LJvr7OpfxcYZqG2hd2XdAMMc9Dd5YVGJqD1t5omAHaMltpc1\r\n1rrQhA6LX0hg9OjdT38X3/f2tH04K8FByim0A8DH+B+EugzUisw62G1oRyGt\r\n7BpyHEs8oM0h1kWR1V7d0co91Gyd+lgb3kECG8xWNbSO582+jnXU5nRyiGAh\r\nXosW0ZnWvhZnD1qQrpFecQVvljFnoEolVf3RUaoFDm43bqu63+easj4qx97w\r\nKjWDA6Lt6nQzrqfOh2iOFrk7tlI34Ed7xBE20d3/+us0/lxszHyGTcIbIRn8\r\nqQbonxJfMXmvLn7JEH5Z7jRBye+9JGJGPHhiPk/zMVWtWx3Kl4N1OzI1Wq40\r\nGvX43dXq1NOr8/kcs4mpbpxBmapmQPsB0Ax3R8sVMebvZIZD53B/ANmaAciC\r\nhjdJeRxpduzi/B4BjQLqJHdJwOcHWODzRi75B3yTIAUsdQ7kIjFOfeE7u+t0\r\ng0llrD5+YPLK2yDUaQnazqI6oF1IstIWb7l0FW5flZCq4tY/b3E2x3L64wZA\r\ngx+eumzAeI7qdBFYzWKeD1/xGVvgDZLC1TlWChNrAH3w2eycDGKGb/AgvAUQ\r\nzUhgbllY8GM1i4X8uzmg0+4MpYc9eMqfdVjEWawLNdiltGnVCLG3AzML7mBf\r\nMkJ3UZbuY4GFGExfiWFL+Fk9RMvCUwTKUXE=\r\n=yIB6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d250911f2.0_1678735933379_0.0924306513697668","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"4e3e01df4f64fb77488815e26ee3125c8083bdc6","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7cd925c12.0.tgz","fileCount":54,"integrity":"sha512-OXGLwqt1MmjndoZwrxBV4KcYjeZpglIBHasrdgc+2PtMzzhb2/aY0vhO0ZKAaiUCmQ5DPs++0NoJKowtK1t9pQ==","signatures":[{"sig":"MEQCIGUkfb+8hj9Xl+bEOy+2Ejyfx2+AA7SXQ4KB2hRH4/swAiBvRd2/FmRR/cLtvA3oYBjVvuiKCz4lYkCldJ+ZRk05qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3wHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBmg//XKzNgDNyW4mFr7epTX0op05PfNVVN3ITHh0z8gZ+CMvxEjKC\r\n5ad4wVPgP3FXExksBtnn+rGHhTjRznD+GXCSRqiyvvPI0iva9shxP7hEmO4e\r\ne4Z2K4cBGnzGyHOHf6HFxN5JMr1Z+mrdrZc3fBKVDXZNzFL3OwsNqBgmhMPe\r\nGnj8MkJHDtBXkmN4xi4ZoR7B6w5oMH6TL4DMB4mKTgI3k4eG5I1XVOJ0m5kK\r\nkvJpybBWE6pNCgfap+4o1sSN95zCYjE2jgBW4gRMIPugAnP4cXYA7r6ob77i\r\n/wK58v3ZUKkJX6bGbmbncwiJaAqJqeGCKgjreF/5/VC46QtLTfbjNENymuaP\r\n55RFEjFtp5WG2r4lxYeKFiDiwj3g0rVmDzcw3d1pfTlv/72YEYJTQRwmeXZp\r\n9boLuWJrrF6C9A4twtNPpXSoECuY38r7nOfIMRneElyxlVt8EXVEqIELBZMI\r\nnWoJo4fxOvkKVd/OI182oyGw0Gi5XWG00no9T95onTTovLUwre38RSniz16N\r\n3VcfzeVpl6vKZLMa0ZJNLQxn0zHiIU+OSlUoXCP80iqZk1Dzqxr1+5zBmwUT\r\nzNccZE1Pf3cmctEdkl65efqJ0vPFwfIyOekWHGw5rthKf4UpQ0jzhc6uzTp4\r\nwRfU3JJEHTzfOZFfcAhr8RGziBS5RVdbZoI=\r\n=91EG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7cd925c12.0_1678736391123_0.7415612974533063","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"de0e33be216497184e33ab99123d574826cb9902","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b2ddacf73.0.tgz","fileCount":54,"integrity":"sha512-m+Y/Yao1SGxMBXjVQN3a8TV1NdY8lLD/+0JosADq11nRntR5g3KWtgkRslGRroyaMDHu5C6kCAvN7h2VhFs+cA==","signatures":[{"sig":"MEUCIQCTIhwLDRQf7sV7zT06RzQBnorofdepdOm95p+TpUIiAAIgP170HZWdOp5at52O/OTKENYy9z7SlKzUGguVxIzOWWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD30LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6wQ/+MXsXUmHYYuMEOMgPbHp5f8Ud3zI2jMdsSPBcRAj5kHyyGVFR\r\nBplVx5suY6C0j555gfS7CI3DAjONK2lyI9WdzykHiNsraKK47lt1UKCLfUU6\r\n/+DQe2UzIUfaz8mdVW5WneJmRvZF5lQqFJiD+K4Tfb7juBPe8xmYApR9AjCl\r\nXhj05v1DyE3kBzr/u4ZZ14oiScFXUZxCoK7rUyRpRxVUcsvYkws0QU/RY8zD\r\n16+UFYx8Zrf5Lsg5kx4b5FTFfVoGHROE0wUJ/MMabn6YLvhdMzFoCDuyYDDd\r\nLRvnENLSAcup+cw0yvVszI/naUvGKF2SN9R53nd6U3aFEsmp3C2hpL2aeSQ8\r\nbbfpwSRfSR4855aVVf7R+hSsJl8cmhy1dIZcP7c1fVhCaHx96/GvpccWrKJE\r\nfE0PRN+gzAvAl+AUBhbiNh5iz9sZHMDOqchRdaZCPyNUn9HmrlhKsNA9abwj\r\nHblbfIcz0IVB9n6EOw9OStJf+RuOv4scc79sKd/YkLouCk2kG4MM2DbU+Obe\r\nALVq0/50riBs1wmTnfjq7bP9t81yP1EHEJ9zus7Sti8FHRYAh1kl4rsZrwyJ\r\ndj3dFrkrddNceHgVUYAIXhJFmqM4L5/Zd80WE5yWvcpFmu6Qx/aVfngu1hcA\r\nMsHb4s7Mh1DIDqAu9pog6Gq1p5WELVGr6o8=\r\n=dSX9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b2ddacf73.0_1678736651163_0.583291905619882","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b01c15fc8f198e007e78e43e9eb5bec22c8f4682","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.989ae2ecc.0.tgz","fileCount":54,"integrity":"sha512-EIJPFcEX9WHCt10JHjZsDq0kl9Duv2T/xC8FNf6t9Xgfw1qxpRXyF9Od1JnFV7hn3/oWlrMJhgGpCKkO75x7lg==","signatures":[{"sig":"MEYCIQD4vq+B2QvpRPiYoJrnkDxsIV9FTspF9ltDJZ/izp8ymQIhAM+REpDVcLqLmN9wMgdJB4s/kRNhyu3rLgR+wzb7QoFH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD381ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH0w//Tt9xjhW1EqGHIjJxtPuYsJp4i1XhE30TMlVNqhJ8UFK6LFYy\r\nVm7bMQZAMv+/3TWrMt2Y7SIF3VFSuj1AQ32pZY0LFpCO4+wvoUK7OYWST1rJ\r\n0o6ePfH/Ie5OmyVdu2ExQw4k5prea4fUUMKFAgjp5z6fRLMaqjR5MFXxWMwG\r\n5gT17AM91mqHgPpEiP6CwZXnJw+SOcIFmSg6cKpGn65baqJB7vWvSoFojldn\r\nSjm4m4h2kydAtdFRkHtdBnbba+lPETKyJVaUJrFvN53tEPhrpFn0ZUYzL/Pu\r\njX7YbcS+W2Z1WerxiyePo8ltfPaFluRg4fbe95oDmAdIAUvB9kS7Trgaulrk\r\n/5KuOQrHo55JmLupGuv2YO53nWZ2jKwv12LVwqU3ixxaOOOzXVIhBJKeozyG\r\n2GMpgwFGQ79ezqD6jo1AVWn2ImD10ENSru6SCrVIVIAcWlYf8nVsRCSAu9bY\r\n93KdbEJRRjl1rCKZw9d+tmXeoge04GhlMq5XIoZ/Fc/lgLfC8I0S/uYAvEEN\r\nNy+zJP6UDKaEvAU914ESXC56no5CWH/zs4Wgcz8EBOTjVfdfpJRjG5S28IIv\r\nOXGXC4i0afhHIKIx9ysy6AUr4ykhwcKBF/JgKGVjDsjNeKQoSKy30T2rnKbJ\r\nTg6UeThjoWoerjOrsrfuKyd1pTYSbKqI3Fw=\r\n=ENz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.989ae2ecc.0_1678737205755_0.32624774335841833","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0d04a3e3115c52d7b9928f8c348781d2094b03da","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.89c66483a.0.tgz","fileCount":54,"integrity":"sha512-cvSPUeFb0EjBuyJ4L8H9UgZkMcK8EoQkHzXwQm9akxnc9uqVpAr8/HxVj7nXJ+9JUAxXv8ofrWmvWjpuNjYBKw==","signatures":[{"sig":"MEQCICj0+lm98DTLm204cT/uq70VE2RyPmyS0zEc4vME1gZtAiBZYuXT56zjkGfHY/GtbPtmvK2MZ4bwMZ5/Zm2yhqnzhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4THACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNyhAAiWqm+I8xmJK8WrCHDQnOUyhqUHnE9vBby/4rYO6VJBHOrhbT\r\nMGB9UHVfii5fzFCYuGScaavlIGcoJe5AbM0OP2/jVS2MYVnk10J93aYOFYmN\r\n4DNw5icZIamBRKYY6BAXuD+58/Rs7c/Vh3FAUzqfirly2XoSGY+rRkJGFIJQ\r\nWgQYDVORjxIK424R/tSNyO3bWu0z327PpTf2FbRW1QPdl5JseTYESsGsivpL\r\n+Azte15/yIKL+x1l30qiFa2OAA2sHs5fw/QynooilMgEPbtARnrn1DX4Qk6x\r\nKeMI8jTDeW8Qj2zuFCebofvDFsgZfUNRkmSuHxRNFY35sv/KBCminn4qpfnr\r\nleyjnHK8qHUMjR4mxk8uBTz8jZH6xPYYWhCeFQnk5ZpCx84wvafALAPu6vvI\r\nwNbiUqxOvK2C123lrWA/UqSXSXJ9rdDz8Ta5as2xQ1n8350u85+3ZIuBvU6U\r\nbLSvB8AAvrlH0XBmts5XIaRrxlCbJPr4YSlAJjfL9VpgyPvmx1LgLQ0llMn7\r\nRcEbALKM95kSKtqGNQF6lyCWTtBKsya6Zq5kZPoXh7YaeTgIFAeu79zy+L3U\r\nD76HH9kbXhcQ7P81EzjjlXsy3XU2oHd77t29juMjSYbj0ojz89/kAnvfLkV4\r\nNZuFO+dd3fwjnFi309l5GuBPE7NWJmkblCA=\r\n=jHH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.89c66483a.0_1678738630809_0.10584144903801751","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a33daeaee05d27066eed8f7efaf6ffcffc75fd3a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6a85742c2.0.tgz","fileCount":54,"integrity":"sha512-Znx0aJK/niIddLyS40KaVI6lLcb7EHdjXb5M0oLnErGyFwrwN/HZjLz2IuOKnOrm6E0PbsGSJAm6Ip6SyCT1kQ==","signatures":[{"sig":"MEUCIG19DReUwfberZMGnHCbO1k+mqWHJAcUSXcLMia38aarAiEA06+4UDUCedwpdR7hKmdIa1g2aJHZ3HBAgjET9fHeknE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIZxAAhXzYrgHBotJ1IDiAfpk5oj2hUDQU485KfIWzv5DWr6dU2XXX\r\nAWc1XLGvKdoaTeiUG2ZSIdvN2hta7sQJkScmlr9dUXA3TUnX1VU7y442GmSR\r\n9Xq0lxx1bNdoMC7UpX3zM39ptt0qg+3uaxeTSIYXt4Ncblpt4tGUiAieeX7L\r\nh48JfifjsCF91ufOQo0k1esSd0kQGBDYdM8a4lupo2tcVTuEEED9wo05m350\r\nNIbEwan/KyKEJZNeafQl0iw7oWK1KGeRhvkps10FCkfh53QwhNlyTMko5ppE\r\nyCx+pAseYZuoUBM4b/y/fhv6Ul/WgGRNHAOs1TD05s8sU3jXWOPT3Zy85Slu\r\nn+txaznX/wt4lM8wSCwL7CpMHW27aiy1YU6BTOd6+VBhanudYFgUs7/kdtxO\r\nO3qQuinj/S0K2Wpb2CxAxec7hHoATlNjPR+bADZuUTZ+m1SrULm2w7fX1kpR\r\ntcHQded1D3sACbSRxicFmKqKRw8B7deDm0vk6Y2QdAbB3kJ/0qDusR4dMOF/\r\ntG1yo1vocUCg6OlrolSG8vcEgLJ80KDmX7uTOyLVkmhi2dkQwXzan5lWvhit\r\ncVB4mGlWfCE/HpflXvIdF3z01xh5tNdibD3ctGGr7BwRMcmAYyPlwjtzBU9v\r\nHjG7e0tP5VJT3FZjOGbMQn43X6bZwUcYpmo=\r\n=tNu+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6a85742c2.0_1678762085417_0.5579624879566951","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8b24290e40350b5ef1119cf6584258bb29d657bb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":54,"integrity":"sha512-MKqwsZvycrvXPDCPLdv0UmiI3L5GoErnebdcwdSwFPuMCjhTTaCwrAIYzRQTA2Ig3m+GGOpXOUQXQ19zwU893A==","signatures":[{"sig":"MEYCIQCcmHBQOI6Q6TepEemKBE8t90Fy/IQPfYQRicdus/yRuwIhAPogJhKmK0yAoTnUnqw3r/+jDjR3c29pqx/ZkcgWJP6b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELpBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyBg/8CrtN+Qzh8fO4t0IMg6/1Kk8/wM7LklsOLowmpYJ5hCTxs9Qx\r\nfghqpCMjGlmeUF3DXAk7Kz8p6rsGhjWleFAnahK2nocjM/QnkLqRnKKOh4xH\r\nvBM/tlTmC+5VGX6h7krIiWphH89+2Z1KSM3lIisqf09vDOHnUnsZDVFXcore\r\nrnaEr8TVajoIY+7KuGa4EMCVY0eilCjIZfUhIubK7/z+Hs+G1bpWmpwViEsi\r\n6hfqvuTGeVGuxFERONWSIilWuF9bD4+h6mAPp7JgUH7BZKubS+JNiPGYm/zt\r\nLld9TstoQ0g/vaw8ZU0hLzL4kxb18k+apMDI/fCRjXu9IgXe3TyGzFaXh4u2\r\nD6maky7q09k0f+/skYjpHPH9y07sF6TVKr8A2hG0kj1BDHJssp5IskCaLrFi\r\nd8vV8l66qR1c+de9DzW+qMrpFhzXcXjbV2x+2q8GX26hxOwYJMC1pg9NhOGP\r\nvArAAx1j5euYfy8P4n9q+DrB3mEoOhfTpwMCgIRt48Jo4GTuNQO2O5xBaeWU\r\nKugd/RLJVTspnaQh7KsKdWHX8FGpttfXrCoH8LBGjgsMWt3k7Srp2kar3Gbv\r\nTWLC5wLE+IjDHhC60usC9OUnES6/Ywx6AdJpUSlGPfApkmxWP2Dxe1EytNjl\r\nXFUH+c4BvMFfPPFXmvsrjf17ePrn8s7yRFY=\r\n=QQs2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bb6cd78d5.0_1678817857547_0.04317441912822284","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cbba44810e15bb68bff44fe4aa6cc3aa203cc65b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5f94aa37d.0.tgz","fileCount":54,"integrity":"sha512-mTSR78xc3REbjq1i9xqvp4+TPwyZpvGoqnbWrh7NI6oGv7JFO5V06h8I3Db9NtEhCY22sp8eWqPnGfhygHtAGQ==","signatures":[{"sig":"MEYCIQC+wpryJHYjIhn5CNiIquXongbW/711Dup1RSxRY/0fNgIhAJ/UIXETWdPaJ9sTv7u85uFPPAPpUrGhf2ehhRS5ABKt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELsHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwQQ/9EmAAaQudKo0tJWTNeFTIxOlbodvZpkpBMi3S4jIA+9+onQWP\r\nyAXCglgichtRiUHmUal1ryZU92mAek83aLYioscid4k0EK1kz0gSEpGICdAT\r\nqwygVm7drfqvfjqBa+jOPQ7jXGsA0FJkdQpLA+CruNsJ1lKY5OFC5wjRcY/o\r\nRvG2jr1uKKjAgflvX/j3jIT7VQvpKmWnw1mEFa7k2d9UQhm4fOU7e2wQjdTH\r\nDhljINCRKF2e6e/SwklhxGK359Rod+zEo8Q54OsKVF61GTfSQX4WNRpKyHSK\r\nQjQCeNs+SOznLWjzGbspz+tm7UtkiEMIS07TOwrjCw5P9R5anTPefbaSOQH1\r\nsc0q9GonvepxmTFGyM+eBdxSkqkRvwxe2+YLJUWWHNWVc+OYTPLnrM5wxOO6\r\nEA1J0Xe3L8uxZ9x4K1g2GRdz8z/sCruDVyiiTY/9XhTRpXQ1b4Mgw69s5qOp\r\n1TljHLS0AiV9BGg+UR+Y+MZqIfO3PrdELYxod/RKhlO5CmjsFBAqp5JCCIm4\r\nyrbq5NmHKTrRu9eb3NgSXgQZEHpU1DvYbLiObPqqkWi4+EQvJd2aTP3hdckO\r\nWHwlhjRrjqdKq5fzWEbpx6XRAUmVNi3eAkkDDnpEJKxNl6PMWIYsGXcPUlH8\r\nQO43H5hqudRHAwSAICZJASCiMZRwUNfb6qk=\r\n=+Yyg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5f94aa37d.0_1678818055236_0.4350580361065055","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"810f4cbd98193c5e03bb53b3160661438c9403c2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1bd317240.0.tgz","fileCount":54,"integrity":"sha512-2KsqtDOT7lEzxLjNXN8O8400lY6siWwgHwdFAseZiAZk11xIuUjFQ+gX69qCc4FD4O75ouJ3Sv+HsE6DbuPFLA==","signatures":[{"sig":"MEUCIQDaUmAT7E+3d183in1wU+XoxHN1ymBhKHUfEKympmuP1gIgDVBJ0rJy2oWYkqhTuuU32CvnV80naU8ezDr3ebTZak4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcJA/8CvYwGKCKHtC2pAkfMMarKOzOjZN3lkdNq05yvTRF59fTRPfH\r\nJ0OcHe/ntO316K9Olx83wTvpeuBbRGtwnrWIfQws6U4KxShdtqyVYLvgul5U\r\nwGmZoQ9MRItHbQ4r/eUZ9yW3qu7aRZ9YkAMAske4/lfJpuM9MjLrio4G7Jam\r\nEOno0Bfw4oytkp+D8hhVEANaNRB1xPhJjzS2bg33l0Fu3Xs/7GLsnexIOSl6\r\nDLV5YnULhV70QBxKmJpizW5dMatRvCIeWCRDQvqDrxVH4iF6njBvUEV7Uro/\r\n6QarPAOXV138CHDXA39izO9QsFvPkx3NiCD+2KqHhlJRLpNeHIc5tJXqtIye\r\nfD0tmxIdzowoyIFu6/2XI/DkwprKLK0g2kiytJUyWHqkUChILFizapqkNwmP\r\nMsfmwaf+qP118QufSFtSvG2p+KlCytkWhibei7l8R5BLrSQX29I+TLzHJmFB\r\nt6GVELm2RpVuRtNq5yGTQhx9+EuSeWmGQNQ+hlDD9osEpfnliDZ7DLmGMsUY\r\ndbS5Q8doCzCUikZsCkYeNARxtHNPdBAa69S2p24QbOt5/iwumD4Agkno9BQr\r\nOPss0AHKYTlliH7ojvJWZbjQbGSaYR6s8IiULV8QI7/OTSTXYzPG/CRRT8xZ\r\nbEekWb6/PTnar+aWsagEMdPahGq3MruEjXw=\r\n=8Fnv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1bd317240.0_1678818285530_0.6855197315746695","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"13e0529b2f1e76603865b65ee293d782913d32ef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d441d2a2a.0.tgz","fileCount":54,"integrity":"sha512-wmpymmhOxWLSaCavt4y7LsF68GNuY6ZKnLLjAYRlwDhHFA+klQ5CyDWpOKvaFr9xsBxM918HCMwa05zF++6QjA==","signatures":[{"sig":"MEUCIQCeolvS+xQ1obGaCg6hahHKypLmgZXhYOqK0/dedUhAngIgGERC3iExUfbp3BrKuKEsowR9hq3Bf4wnXdvvC6AwsZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYYg//QpNyBrmrSjN0AcKpDU6kzJ8p38FUkMrf9QsXU3Z/cHj/GLmE\r\n4wmpEWZPa0YwW4tTFYDFdQvaA408ixTAP5MeRT23eRQVYJNbFh2KqYhr6ikM\r\noquOzxyqo7QGMeDxpM4C0u+r7SSV+fCieiCa37HhTDNI79qUeS9ccj2Faq4t\r\nBWbkj6+mEHN2wgV+paS38A9K9BGg08BbvjpdKueOox2gvworPWcu+0Dei7XZ\r\nK1/ec0SJMyFVA7hYapZqP9jzED0sNqybw2gH5rDvvaK67RjmXm19/VPrnyOu\r\n9bUlTo7VJcWzmrwtqTusNpaIW6oRkP6kwOmPqx6GXakBLE32TUPaXuqWaAKc\r\nU3VoizUi2gHR0c/vMt5XIGwIhlussvNJVrQU/jzbWCGLno007QyBInHT9Yfg\r\nWTBVnP2lp7ILBQdkZgANvdoGAzJbDEDOzOJrq1B8Tu7XQpZoq4yL14AfkU9p\r\nSbBqJ1gi7oKTnvC8LhMgx6aY2yoIE3TDFyFuUqYjEDzj0r1QiZPKy+nEAwZ2\r\nTbj9OS8t885sXh9p6/zNWDZI/I/hp977nyWEd3ZpB9SV8a5YdXJxjsg46a+G\r\nXPGjQK8DRg1ajHGn4cDlIaiWt/vFW86jiDgW/Y1v3qtqmFryu/IbUYoTd5i5\r\nbL3eKcau24zhaLBPdt1gHQSq7mjCp4LtjkY=\r\n=2UXl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d441d2a2a.0_1678818453906_0.3592785647949537","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"73b69cddc788885375bede21901c2bdaa4c79871","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.fff4066c6.0.tgz","fileCount":54,"integrity":"sha512-X5i83/syLiUfqyamoVmGkRb46P48ktPlXWdbMpqTFiCAoz84Q1SLoUevqX7OcBAdsQLG4IofhRqAlh3Cz/eGzw==","signatures":[{"sig":"MEUCIGTtNVENIJW/97zbD0NcrVSPISiTY99rM40564gmcAiqAiEAki+HFI1fqFS8J3DVXJ9BFzG1jemKOpNPY0LINIQj1/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELy6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2/xAAgaKyU1v2U1YHDy/L0EnYj59JUR242xTzq+k8jURe92ynsuLN\r\nfIb+VovLdmzEVOpnurmEc7+l/oTUvDVtmnugbnyzxNQuqpyvQzJe/7O84l9l\r\nCTghzA7t/JcCdLds3SZZkepwby61TGg9fv3v1gSXai3daDV0rfMEg93MXKIc\r\nene9LxxvXaxvpeDrDKGxWi1b8/ZA6sYpnaVU7AMU08keqqBZBqVyo68LbBia\r\n/JZerhDOmeD1okSFSbv3D6EKFy1EO8v5hY1FyhaYuVtE+N/p8EybAxbLA6kx\r\ncNy0asvGE8TC6UYN1HxhrJhzUjVTVFXFZJdCK4HoEHX6XaLatNGnQWVCj6lk\r\nglgOJnqsNCT9T0EhObXZRcu1dZQw3ktYXs3kkeBam4N782nOOzIAZyBLxUIS\r\nDCESbR9tmSeWAXAT9gKIYeUQVGhs06X6Yqji/p2ivVMCq9LABluh8O9P/hcy\r\nbAkh8e/QZJuVBc24jhfYBdyGbqdx2W9Fkmsxt1GFa/T7axn0QPxApZoa4Hz7\r\nOWL0NiRDik/hpHIU4rJqOurXnahM3pdMAcALLB6b4DpKG9+SBa7WrxsDeLl6\r\n0aaGCfGkEgRbame251kVktVfkx7wNv5vQzfp7UUwSr8kfTesvuLOvRwsl3xn\r\nQKSSIJF1/WejXr0TouQwJns+QdOCiRfdle8=\r\n=Pf0r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.fff4066c6.0_1678818490642_0.10036169313604715","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/segmented-button","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"893abdc7a36e78ffdb583a73a1dfdbca73d8971b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.87809c710.0.tgz","fileCount":54,"integrity":"sha512-c5ipSWqNBiWUIf41SZJXxGB1z4CSLj2e6inFKxfJsrhyH9noX3OT/ZWXP7iN8uBIRV8R/27oQ8AUpheCC6L/hg==","signatures":[{"sig":"MEUCIQDCWRL7zQCkhhoY+lhTNxVoK3LpCrBxKwAW+m/OrmpttAIgbukDptTWENCaEgsvQFiaN82FC+IZbZ0GUFsHjMKRCxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMB6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCpw//fLk42uxb5/iNmn3seS4Gpb6QOVI6kT/XHa966O2dPkS7ix/5\r\nmr52194/J1sLUf4OeEDms+q8GQmoIoZ9KexSGy95Qjr7wX9TVK5KiKwlSoTm\r\nlg6FANTCnmThaYM187yoLGLD19M+G/Dq2+TB4Mwhuf2q7PpQE/WrOv8sdpEF\r\nbli1rUxJLoxdX2r+mJbSVe2n8MocUsu6XSNnSi/LyV474wARkaiiXAnDQTyi\r\n2A8LNtApidvNGfaJFtr9zxHweTJyWuMgLoqLHOJtc8GkUMdtp38tw8mr6/6o\r\n5Q7NhSKEqbiLGWAOnJX9xwACUpDxIOh0u2u1tmx7teztYky0wznpzaIj76l0\r\nnI6qDpI5onXtdRaW1qwCZtL4zpm1VhhiV/TPvBFzvonqQQTsDdz2EBjleXqd\r\nZr0A52LK1o/ivjPCnze47mVVBZw9x63Z7YWEUaDJoUmgx3/RT1wW5cpZT5Rc\r\nsqIRhHV+o4fJzN6Rcgg/ExP5ZKi/jCyI13nPU3v04BHvzCX0aQ27Ek/3Vn+w\r\nGxaX0yvY/PM/G37/i8YOEjPQIl5uS2rXLbe7EMQNLo37wPJ54ff7xNVaZ/he\r\nN0vwGcmtX+jlA1hNSrjr2bDSmqmwjhNMgBs/YrxW5vlWJiQCdP7Z6je4QnY6\r\n1XmNKO7VEYneO1/4g5IlVSVnjFcKKEEZ/WE=\r\n=Erv3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/touch-target":"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/segmented-button_15.0.0-canary.87809c710.0_1678819449768_0.10005281211661732","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"185a8d8d0d39135418f307fca39b838f47db1b24","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.48d30012d.0.tgz","fileCount":54,"integrity":"sha512-ZKcBbfcv83SbNGeBR6d1OYpJiCPJHBM0uI92hW6jGxWUAQmCLeE/uRpzDqzSVYcGGwAjVZuG+FaXKLCHwJ4/5Q==","signatures":[{"sig":"MEUCIDAXhO7YWnqJqeaE+6Vl7VVj0NiTNuRFlgHAOfsD409lAiEA0dLNeNdPwQfbajAsBvTXdwlfYHG3J6ythsqUbUf7sa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMF/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodFA//a7UIJmrNhNN7fUWqML09f+Tcm4mllmbw+O5xtkVENuQrbHKl\r\niSD8YlBIz+C1jlLco5LzcJ2kzTqdS0rFRB9Z3gffnX/LgASPEM3Uw4WYc0v4\r\nmUqxTp0ys78HUYYcLc6a+ys408aDMwOKe6jN9e5GhYQqshXiEJxapjIx54Cl\r\n3wt6wBF7kNhcheDg55H/IYGJJ2tv69vI8tfYpR7AMf0D8MDEtpKs0njsNr9C\r\nNb9dpvxsWoFW2+P5/yndlSQ+xiYeXNRv3BvRGEwOYn/t/+9jDK6T9a1D2t8K\r\nAWeGx4zK/05tqRxIE9cEkCM/vIDJYEft/BguAcV8T4m7k+9SMlm3WQOP1Gx2\r\nq0ff0Zqi/E40HS0DqackepJnSgbWHbvSusa745dn2/q7cqzU9e19ALvn8BXE\r\njssFDZBKPFYpQ6lMhTE4d7yXNCrzqUE8MFBOs4bOK8N8EK+tdRMT6FAGuEqj\r\nXumaCku3S+YTD6BjGOB3EH5XkfQ6IbSo/+miYwT4mcrQ61XwjOhuQvNA/X35\r\nhGG7tIZd4UjK/a3xDMhqlG9mn6jPl9jC4OAAA/JWbpBJ+gLCo1aW7CssVFYj\r\nOK45DUWAMwQg+iQ2otJTKGfRzAafnzMjQasfP0DQCcpL4z2S9bk553E4OOZY\r\n/WDuem+nnLpKGJYr8azlbhT4qrvyKmdt0B8=\r\n=RbTh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.48d30012d.0_1678819711062_0.20656619314898084","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a684110e3b8e238c9196a84e369bfd11a159fbba","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.419b23cc6.0.tgz","fileCount":54,"integrity":"sha512-qdyLUplXBcI6EAri3z9Xb+E+HQkystq9mLhE4olYr1TXVUu3v88DCLACkDi2ykfqa3pbxMKpRffT52mX4KQ3Vg==","signatures":[{"sig":"MEUCIFLNT7bDgXELG5RyKX8nCsIILfl31Tmad9Xj2H32ZALMAiEAnI45spipnKbkqz7W3RUWZcyLs9EzMfeVz/whWaMB4cE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpySg//Y5k6uDB6viemmewF3YlElLB5hzkowtI6HgikpfsFXgWly/4G\r\n9ht8DfSNPGlY4pwtO2zt4e4fdow60SypCdVHzAYqx/nHyzOswMqOZTz8Jd+B\r\ng8D/WzKYI1YJiTkRrx+4vUxWJYe8O+iNoq1JjIRmRcs15aamtMbsrd/poHSc\r\nfyCGMhnclqaydPpEe8fbefabT6FvS+D0A4xkKUvPF+y+dVsxgtHhd34yvyTF\r\nERSvUXmKcHtWa16y0eL9rtkC1HynTPigqPHKlDbGU5yGF5tZMXVhwrN+3Q17\r\nhmMiqt6pfKFA0y6ZCj2/tR/vqrt3ztUqq3ghoHb5W/O+LaoRwLK44OeLp6LV\r\njCVXxrVKkSdR/sAfL0sLb/vzx/l2A/bB8WCbB3/rtoWN2rAkxJC0X+A8BQlt\r\nBfRrxcTb/GQEAdsEzKgQvE3z4/977owqiLXDI80/EY0AWRjIM37jkdedwVJh\r\nk8XFi+sosgMyKWbvazIAoNWIIgfTwBjKuAj5xVqTWyhxshgjM+z8S3CsQCDe\r\nkRQzBPdhuyH1LKrugxSPAI+Pe7mhtMxVVQpOTtd+PkB/PELycJqdN8G06MjQ\r\nM2ZDFdFVHisy/LjsM3r8JIC+GbmAwO26lloyRm8ndPC8qmOldAwLa1cN6GIY\r\nUKV6FZY9HhEs79xjHFeGYhyJ3pW8MpRo+5A=\r\n=OubX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.419b23cc6.0_1678820372156_0.1242252339008485","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a13363c05d4e3ade4106d63fecd9139f0fa0332a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bf86521f4.0.tgz","fileCount":54,"integrity":"sha512-xHEDFW2+eLCOOEidNhWBOo+vTNGyYfW2AxOMqLNnb4pe9n5L61hiU9kE68xsvTln0HM6r4+79/KHDBXx+Y1bEg==","signatures":[{"sig":"MEUCIQCKa5vegBGA0bf7xTt+NqiNSO5SFN2qJhVfG6hR+mXp8gIgW3Ur3P1ILYiqaV0PFzC4jNiPCGoJe85ctnhvL4YJGII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP/EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Sw/+KBQMXBRIBLqxzJsJi/eHoITlJKue+BbIscAoOdrRAawGN0Zf\r\nZzUAkK/Sw+P+W/jh8oGNrgrZg3yqy9oM1S0SQpuiBMd7hE/4f9b9cPZkQ/Dr\r\n12BgQaoP6/kAHoTPtZXB0AZhYAo+F7mO7hEBUSY2AF2dkxNGwgE1huN2EkZp\r\ntLRKnenDW7yJxjh7u4tqvoN4oiBJECOQ3bfYJJDxmm6ZqJZuFT3wljIEvWIx\r\nFxgv3qqzVASZtqsoQ1WEw5IuNLMtJSOFJ1SNF/8fLht0iIX3J8LlFafwB3ZA\r\nk3DuD+/eFmmyLTSYRqeubdBeaGSVqjH431QY2GMECJvma3RRLyWPyqDXA0S2\r\nuTZOOHEqJ6mhRKl4BEznOhizOxqlZNNUWYi7Tru3wH8cIRjPkJe8Ae9TysAR\r\nyd9wNNpM+CLgooYzXi3+tICjbrjpIXEC7H7Aey/VQD7rHDfT171Go0Ptn02f\r\ntjjttCfE3H50FXqMk4CHTXh7kNuVk0y8+xaEsbdNhzCz3rKs7j0Smnd1TGVM\r\nPci39qP9n4WhDfrn4hK2X2o/mc5zR/ydiq7DPmYjgpQE9BxmIaMCIoeYHzhu\r\nM8rNhc0Ild7iBEIV8Isbjt7GI80scBhBeFBN38R4mLr3bfGDc6nalTREpA72\r\nNr/t5lqT6dSMqcRTLUbD4ouheN9jRrbhKXE=\r\n=DmAp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bf86521f4.0_1678835652330_0.8233871323148316","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9555cf84cce136e3ad9d2978cc38bea01d566652","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.11f3d280e.0.tgz","fileCount":54,"integrity":"sha512-FJocKUVKnYtiBH5kVwFa+JmqG0hRbfBUPJ63zhvlAjuJp4RWDdGt4illIykUc11SLOXXEkbCkHEJBLHcqt3mvw==","signatures":[{"sig":"MEUCIQDQ0wcBDAm9vwOGgKuYY/awpPBBA+eiFHN5NV0oLAj2mQIgKIzCorpT29sdnpxy2eR6O56gM3n7kdbWORL+wEkJ0no=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ1RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoChRAAkWodehG2r+egd+KsL/wlfSDZWv2zGeGzF+sGTvPBLo3x+H5O\r\ndkSe3pLz3PegaXgbmLU+KL9vpbIFw9MiKY4UoCbai/KeUxtREf4SMb26MkFS\r\ne8OLHN4H3fX24d3hjvFnau6Cf13N4A6zInkLCRliGT32mYcocaryhXgnw5yv\r\njHpP0KHVjWNyCAG11loALqUcrt1Zq4s3SGVVnkGpnSk71V6EgXhfrw1GVIq+\r\nq7zx3eI5/3K3Zx0+mSJCD54wKwxMQGA3LH++Y9YYB/LGG+OH3lM1iFhau7bu\r\nLHtXrgc2n4AZPr36O85HufO7XoVRxMrZiw44QweGIi7UUFWcevajAzBnucG2\r\nXtiHdZ9cBPlIGuIes8yVAGg4QrG0ysQd0qBinQhP58R4+AgfdHiTC+AH/Kla\r\nU7afJPUG9wjE1AG5KXNBd/Fv4RYb88O9F2gewxll+wXFngOSKN6YiZe4nVj4\r\nG2+adu8k6r90RGaPt5kRRY4wEIanYGmeHFkWk9wTSzE2ZB5wf70OuQZ2FmMI\r\nvbhWZgOuuBayDg4GX8o6Rqh6bg8jjPSPJpUcNV4Klj+CfHqIR9X7tUtIMiCN\r\ngYvEY/e87rz8oBFxgreZvSXF2uuvQhAX91TjISwm484fzOION/WugVa/ehj1\r\nFlX7caf0dnn0PsttVqFW8EkynQuCkbJZz0o=\r\n=PCl/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.11f3d280e.0_1678839120727_0.12059618765093805","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5b8dc87ac8c5a21fed6f6ef2535ff0a0693b9261","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b281a409a.0.tgz","fileCount":54,"integrity":"sha512-f4Gt/W3dMkRAohyFKtFHFSEFYan1Q+LhJJtE1zA8io+ByAxCF4GDaodf4iM5/1NDJJ4iHKFUWSy+AumdSxJISw==","signatures":[{"sig":"MEUCIEY674E4DlIvH3H4Mr5y4SJOcY4WpT9fYObZygl3bU91AiEA9Cd9MW/GzJ3ehlFH/DjXKAN6TrpuNnPHcoxwgc7rg5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdBQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp18A/+N3QQux0mffrQWBDuOq84ELs9wzgtvblOI2xDMis8OGpRvTO1\r\nJD5XE7MKmlz/tBOeJJTelnq/Y7S7qI1ZImeOvEJ8wH5/OeLG9XFG8uXdRMfz\r\nZDhv28DFQwrurRQRUvw8e8BRY4Xc1FKYRuYrJVQjy2HdXkmwVvkPMsZ2Zccv\r\nyVprYIHwHmVV7iSOn4FZC1mZTeCEwwLj+uFuTxVYrTv5ICWCkjURa3wvg9bd\r\n5i5AeJ08QV5EbJpkHWsvwgPgWP9J6n19cii1BA7z6aSCjWbrOm/EPK9Boxur\r\noqL4zqkMuxiM4OTwWgQ5wX415vCQatyBvaAQjQpieGRPp4ZcoMOI25TKJnQF\r\nJLzEakuqK5LFNzvYpR8WD60txIk+RTxUfaiT5/hK+8+bv/uN4cAQSalW1VbQ\r\nCEQHJ5PRC7aHdLKdv3kalUBFqBouYquUkoYgOnhu0I+JAkdyGbKEF7LgmsTX\r\ncBV89OnQsmebLbUsqOSNWNie7ErVDIS3qWJA9sY8IXb4EC+URMrsbvix4tEg\r\nRPOFRTpG/wzk/Nfw1bVWF3W8BwJVJvMI/ZMtPuwwRG3ETVsfCvYox/UmvfYJ\r\nGS0ZSKSSFSIFxD2TUOT4jwPi8xOensb0YF0nSpusduoucfFii5xgtjOaPA4Q\r\nVJoWc762lHNg6et/XHWy+5Np2Xp+u0nAiSQ=\r\n=UfJ8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b281a409a.0_1679413328684_0.20622706071988817","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/segmented-button","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2e1d77b00ff5de01709eec3ed56114de2118e352","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.39e473690.0.tgz","fileCount":54,"integrity":"sha512-nq+NCoQ2cJtT8EbWaOoTtNXVJ3qoESirsmhStCIYpmpYo2Y1buEhCK+QNPUpOk8n+Gvdd/lP7xgP0SpQXq+7NQ==","signatures":[{"sig":"MEQCIEepq/LZqWAqUrqD87sq+TUNx4aa7HCY7x836SMBoRJDAiABZ2AZFVj3qBQZebx5G7rUYFhx+d+DUNrR+rLD7lU/8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBdw/+I3nO8yHrNS1Vkybnox0RhtuFeN1EN78cbJLjoLRpDf8XGgSd\r\nl83D9KiFE0IKO+TRXUIQCT+xrE1r9YyHuv09yn9IB4LMBslq9WoT8tpxfW7g\r\n6a2jAhXb3t8mUvomiQjB2c/wpzFG8MYbklLForDlulbjHE7gngVibcFCpTmG\r\nb4S1lrmTd+j9UxZ1hTm8cBHHhI7jfF3B+D0NTRdtsJlO9v9kj35y2IUW50Yk\r\nNmHVKlzXWf4Cj/EQmW6De0/8vBckjiOkkeY4HIgfxRC4IevEIk/+cI/+hAN+\r\nhb/Buv1KYYcvQcZG/X5q+fVTST2Sfmf6xvsbjNNeDwNCQQ3bsFPMRTAmtDq0\r\n2dJ2W7sGm8AWVbq02zRxaRLZZ6JzaOk/xMA5uyf6PL1F7s4FJ9JNVUY+e5jl\r\nIftVwkx9TUJBGKQRNizBDX45UnecHMIw7XhVNGbqvAbX+w1Fkv7xC3rxufVS\r\nTfgbHR25fM5LChzHpcVx4WPUjR82/K4qnuHzfe82i1jdyfHG/thN2QHu1Gbp\r\nggIoMbZScNF8dfaw37U6Lc6n2187FTNRoGaZ7xE+obQv9NvKU9RvIzyQqEfq\r\nx9UQhrd/npm82zbmJSQRWRvuBy4XP0q+6bShiU/s01uN64V/cJfeswB0lqeE\r\ne9KCe8PHFdD5DPxDJEZ0jtZ6wPAjIlGt/BI=\r\n=U6aa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/touch-target":"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/segmented-button_15.0.0-canary.39e473690.0_1679421136917_0.05769453420462467","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cdbe1b4a0435b20b631bd1762c294452dccdbfb1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cedffb44c.0.tgz","fileCount":54,"integrity":"sha512-VLdYvLYK32RAY5WcoZvahaPS+c9T5a6MUzEmuXCyAIjFckE9Q3rluJknhf8i2YJlM3JhT/30NGctsgaHH4w0aw==","signatures":[{"sig":"MEUCICdHc3tyhu1eUQu+Nj8bpFvaYuy21fnf8SSZEley9NyNAiEAlCfyMA3HTVUkfib79L7r/Ck4u1d2V50hdp8mZ/Gjtcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLNhAAmMbk1EWDZuFyfbI4dhdYFUT5YPKsaSHBoX+5Fem/1W4JmgUB\r\nsaWswtzUciC+2KRooOji/lxWIJ/1p3WWf6CI9z8mxesgFJglN+vSUlf0uK4L\r\nvaX7Tei1+PnTX5D6QRF2P9tjxlgX5QzfodM0/eFmQsmUSoduKiXWzQk4+5oh\r\n0cFXQzKABaS27lKTFWjlMBxcJvED0UIu4cpzjiwQi+bZEwVCVDf7pjzkPVb3\r\nwH/TjjAv/zDBWr8iWS1WffbU/CNVTxbKCXiO0mBg2FANH091ydN+LknOMgs5\r\nHPQ5S9EfCNXeWRIsyimXRFkvNO3e1rICrTCsF1CcDBa5ZKWMlCq8117gr4Np\r\njNBCfsAUeLP2bdfjWgPFP0BZXKduaozgpYgZT3D2tPdxJqBZMxppbwhaTH5Y\r\nzJNymp0BZV56Wl2SW4xyTncutK7RWWDH5YjBYRY6LjHeXk/JRaOEFNzJUcOl\r\nSnMAVW3nLMYhZr39j0gXxy8P+NaVVCaHVhDzGFs+Hz5Yi2emog9fwxeLNxJq\r\nqV7Or+x2DzPKpnRUFtbxLtHtsB8exi3QQm7nq8PPOc6MAlW1s45udzg1ueL+\r\n+JrDwykMYebmP1SPUtfZ+ffwYFJ0TKuDwyKrUPPBje79fX6RC8uf70hcWMDG\r\nYDgru4B/4O2XUG5yMd1s3c2F8/ej3xYvDtw=\r\n=Cq8J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cedffb44c.0_1679421553550_0.4277588618065711","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/segmented-button","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"9816e9002ab5930c5d0b68e61b1e0f637a377ae5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.36a4cba99.0.tgz","fileCount":54,"integrity":"sha512-krUUAPPqbmylhXQ19l7yXJJ+plCH3Sv7bIO51pcbevrLhST4nyo3cQT62nhyqbcpg9vJtfPWqtk5PvUyOUHSfw==","signatures":[{"sig":"MEYCIQDzH1jWau/B33Xc+sagPWonWcbZU6YY6ebkrD8sJzmpZgIhANHdvf1gKjSm9c/zOhn4kkHAe2Y/w9JjCi2a2CzAaFOw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyj6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5OQ/+M3H3vdCzz9Y3npkLWoYBknNH/dTc1FEe59CsDenIijSU/ual\r\nLjvVgOyUB4tVQcuzjHZ4Pv376pb4c3DJBmyK06hYkvoZKPWDjPoVp0qpU5j5\r\nq81NO/H2U6CmZsyr8t7bMvrQ91VPEb6xsbZMTGX2Hoqo1qtepHKifCflGzEJ\r\nDnvO6jXAmT2W6O8HZ7yetOkdVHQgqaV6o2EkJUVffeaTlRIZFhg+hIitEiOp\r\nBSGWJ8puEVW70l8/54J8XDaJMBaYunYI6gLqksLkLyVHNolS7LWLXCZst3M0\r\n3pd88DiJC2BF9sPssWVrjQMDCmNHr3IWK0CXewya0dS+fXaj/A/Blj+qcyfN\r\ntDQ+JiHNoRGhEeQC9yRQs1WLDraCj0wz4eFHsS1sznszhffVeXN3/aAulw+Y\r\nVFNEqeTB028U5tt1NLZIVYP9kSUGgKCSfDJM0YIYJUo7c42o03JvvAlsQ2ip\r\nMXCyYzt2c2dnh4ZgbYXONQNN5MjB7l8p0qV1i/tBGw49j0PpTZezTWZohrja\r\naM+yhcjDlck/G7oPAz2B6B/DASyPSOqq6psfM7VfSELnYMG6Kcj2by1473pQ\r\nZzgjcAHFl7F2RzkdBAmCSc8aT4Zr6bEFrX5Pc4h5iBUkHs98pc9ZDepQKV9l\r\n3BADq5jxWNY83eWmxy0N1pjDL+OfOC36SQs=\r\n=CkNL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/touch-target":"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/segmented-button_15.0.0-canary.36a4cba99.0_1680025850372_0.9824169570635031","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2056ed6765fe064063dad2a3a8022539a77671e8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ed7e82ded.0.tgz","fileCount":54,"integrity":"sha512-kVsaVT2N/C64EWzBYlaDbl8AOCtj26Tp40Epv/1QcNj+wCP1//tCzZ2nUS/dSWdKFhTdOwAQhPRaqRm/NDUKew==","signatures":[{"sig":"MEQCIBppk2DgNFqgG7uAtV6c+2KVP1pMTXY830hQ6/ho3Is8AiBDdCdwIJ555mIrIjyt+redRukrbAfaQAVeeeAjvuh7tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpmw//c98zIUVxVLVQlIH9a8Lzo0ZJzd2NQp12kf4J47OCcJLdZFma\r\ne6+/V2AmYDDvvFk53QH0zs82aZZM0YA3B04sVWr+0Cw0mrUxc5XkedDnjRr5\r\n/zKbJuxDltY+O0kVFAzF3nTsOsUxtRG1v/Y8eqxzl0tzG4uHvNWU260J0/qX\r\nUpN6/Wnn190uJwSM3LjYxUY3TWa8g4qZXhc85nqRYtnqPt1eYa5ezyEcx+a6\r\nfFPUHAUmF7I5FipeAIXImuWLPT1GXmtb6pDLJcNShM6rQjnUbZnRK62VMwig\r\ncJakwV54YuX+b8j4lkdGWggGR/i9HHHdx2tEHfOPZlniQsU5JM/xdbW1sF3y\r\n90S3p+m2jk5uMeCrfl0j7O1t+LUUMKpalr3iPez0ZxxxnRXXlYUssYAUnyyW\r\nJYW10nSWrSG85j9HGHouivldPBeTyN9Bt/tR+826elJ3HD55iZARecojpOUy\r\nZSYNsUST5EVhFanbUmkq7Arf4hi4fJ5Jl8cvE8iIv77fI94gqhhs7DzmKnB7\r\nM7OGrpXK0VZR0HfP7QjZiGj4bfSpWVFuTeO7MZvsNIldGsVKzfoIaunOwmNC\r\niy3l8FjT17J4JCEUTd1TyyRXZ8Sk2ZriD74BGr5cIGZDVk7mCFhGgy5OmsJv\r\n+HX8sqoAeUUed2ItUMbusW0LMS4mjOU91Fc=\r\n=YiD1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ed7e82ded.0_1680035727875_0.4359761938529534","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"560f50d03ff36fd8951bd952e6118b90ee917d8a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.55093ee1e.0.tgz","fileCount":54,"integrity":"sha512-nxlrkQid4by41SwXkdDeVaIcvhflBFdN9/mDxBT9Sw2rYyn8BYg8nFgHqhR/RozG9fg8D2qPvBr6gg7xmFrtyQ==","signatures":[{"sig":"MEUCIHhYHpN+Wgizf9y5ni2nxW8/OM7SUd5h6XzO/da20HsIAiEA0RlXgi6Cpjs6wBXTuByStx8OiC7xLRf2ENNo2+g+2LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIhHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr3Q/+PKER0Hvd/L/ki8Qs/wCEzLywidYTi2huiZwS8PonIg1eaEve\r\niXo5G+WyeSXGWAo9wRAB+kkyvzEB8ootEf004uVXteo0w03haKGO9GNaxCWo\r\nrA5EweJW1dulgc4YwXDBqd3UViYRvlQgfMpDKGWXAeVt6EvYvN/G4cAv8O83\r\nmnV4n46pcVDVKp5g+2fX8i301Oje17caLBsFovbYAlvhz4grs+7og3PRIwyG\r\nz2xALc8S2tJZyDSTDKnZ+r8nbcQ6bSQxJODm36UKMtFNzK7JuA3spVYgnyPv\r\nXOkTnvQv/Qv40kLzXUeiaGTvr1YTJ+ky07DZ7GIFX/zqowNBQkSNFO2dHETQ\r\n6LP2x3VT+dmamsu+ZwU04a5e/vY5s5l9s3RESX8E1tzivdqvXyb5MVp6330+\r\nDXEoJ/mD70gw9Xq8IewhtFAE2QTHoSXyOVPcpgwcZQN9wbZkpjWydWDScaOE\r\ngFowlCk5N+MEkbUVfCn9dzokuExtnRmNn5tFbCJVkuD8NjIzZuTw/fdqkkjE\r\nFZyo41z/eRZmUsVaODxDbb8wMfUgds3jLMekvhHvI/9gts++jfvrkH09NPOd\r\nG65fJC+1ZWyQEaVkmjAoy3CziRxm1x4YcvAGQ8SPZuB1zj1yk5YzCZc/N/yF\r\nP4W2hjAPxpPbTT1/aFeTo34Wp+23y9hszII=\r\n=HTTk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.55093ee1e.0_1680115782767_0.942329549638613","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"a10cc7d6f8ae4bb38d4dbb660c04ea4a916e39d1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0c53abc81.0.tgz","fileCount":54,"integrity":"sha512-jPUvfiYCWhihKiJksO3BcX4OfXB2RGEX8HFhb0rM5aKrLTOo5cOjqwn7v1dyUPbeFMCswOwC29yiYBR85C4Sfg==","signatures":[{"sig":"MEUCIQDCW77m7bKwcd0km2s500n81bfzWz7bJ4rTb9EODTdTdgIgF2dHTuyAbxWKYdcQUaUyQMqbBdQrb0RQhiQLN38d7qY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3TdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfwRAAmvn6YhYDUijuzPMSROISL2NTOZWxYxGMQe7nUmFESNQuXpWP\r\n5oDUHKqGTgQRp7dzEQe3pdgz2+3GCFFzt0szydbP1rhFiJ4l/XjdoL9mL1/f\r\nymxRAn2hUg4oJFa1KY5JDHWgsU3+vkyeY9l19du0aYdHYRamz/Xek8nbUvGJ\r\nvbVlVWQ1tiBTcu9YSH8lNkrIotRHWlSEIRi4eD0KS+KjR4XZapdWTTTXSGsZ\r\nB2nbOkKrhkk/drMm4pmaAUorIgWlYkWQUtxfiptVQViWNf9+GQrJkDzMA//g\r\nzc0h5bRoJ8mVhKwUJSAjKAKO8XyB/DToVNxgI+UTWR6saHrAMH5ORt+cghHM\r\nIXbw6IHFsT6ORr1hFYmrokol66AFTguVZ0QfBOs0Lra2h08SyIj9XY1T0wOC\r\n0YK2QLKRAni9z0lv5RebJOTOxASgbDXqlP24f+F31L4FjUrap6P1yIJlnSU8\r\nADWk0kpT1LCpICCx6g4F7+QhXlEg/3zV3sQjFnwcLA1+V4ELpz2kkr6VN4ld\r\nCFPnTCt9jhXlUonagMkNgm3ju4g9vfEPTHp0Bw5ZuaUJXQYlU43cYg5rfohm\r\n/5Y8kuimiLZp3UzWNPe0piuAl0MkMGzI8nOi85m3dNyqJ005EpaBxc+1rtzn\r\nKjMiXHpNPJ9XZwWQAJ+BV4D0ohYv/c0X4yc=\r\n=Pm+J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0c53abc81.0_1680831709378_0.5360399786470287","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"0060ef48ff0988b0b869e87635e669361220b921","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.51311e69e.0.tgz","fileCount":54,"integrity":"sha512-fm+hmXZg//DvGe6VPZYZi3xYaaNTnn+U3p6GFZgVn9+gxqSNiq3Ce77ZutpS0rusHTV220oSmUq/JdUrqQmwDQ==","signatures":[{"sig":"MEQCIGywxF+iO8V022sPbifm1h/mCush3zhdeRKqggizL1LrAiAZxLIo/pA7Pix1nUUAyxsYCMitA9JVdPJPTJMwm1HSjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpysA//cPZoFMx4m/MpTjLbqGcgkP45L90vwiwmEtUmvRjmBh4PlnUT\r\n0WDvbX/Ugq888H2U85fgE4xE0Gh6VdZo+i6e7el36WTN95KDTKqSxOh/bD3C\r\nlwUSYaQxIUCD2j4gZPssB5kCYaQb2MDppGDLnnwYT/FnGYC4ruLqDVUFnjfu\r\niGuI5pSq4eT8Ghl+LrbZ9cFGz/SOQRAcM0OyTsD4RlW36dfI20HWu1ySgOqE\r\nOSJNA5uqRAE6ZQLmOAeGMh5E4nmfs/OVwG3b6zujxAAoH165QoG/+lsuh4VT\r\nP6QAw5FnVcqhvsQPTGAupYNkTm/IMrocd2QdTXv2i3LHkjsMTTZhffZDO0k3\r\n6OdjWsZePTsdUI+SVWVZTBSSbu8bSMpDrwmD/SSCeSJG4vC2ZMoYMUZncjEf\r\ntwSyMGZ+XmJBQ3NbODyQm5b0a74YgD5iOans0TRt7gExS7ZiGV/oq1a5aGjH\r\nRmFyieoP4ZHTzpFdN++oL2va9j14uXZIEt5CFqoYC0mLdCpwRPw7bjRNvCrI\r\n+y60UDDPheHMtB4VhwagdUdA7kTJNWiSLIWGqXPIiyR2uyw1rIIlmtITc88b\r\nkhl4tycKG79FKOizxjJeReYdV3O4VoU4QG30C8CXNgBHQQyLhsb3t7EXkVVv\r\noCyJONmzu3nAjqREso2xcU+fZNPhna9nCLI=\r\n=nh44\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.51311e69e.0_1680890914437_0.3992017674905015","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7345af2ebe69a7722511e0f509b2259601982874","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.113b1a38e.0.tgz","fileCount":54,"integrity":"sha512-mPB3QWrJQgpD5s+Aq83AVdRpZ3axUDJdW7LwoFI7YREUllMQvVF3/jTs9ne9T2JNVsKr2MS7SfC1qdma/xfxzA==","signatures":[{"sig":"MEUCIQCNheIVSL9QLk782BAFobWcfmmrOPa1KAxsFTWENy7vtAIgH3SeiGRTmLisL1mAgKC29jVrrDO3S89McijM8JX+fLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr1BAApJNihe/Q0O/4o+tsqgQ3lCiUM4yl5fH338VPqAO2z04dCdA1\r\n8vzvpletVPP+FaDYnOIHFMvN/zRhDk7sYAs1e8HWHSO7PeYiws2OHgAQQYE6\r\nUomhoX8Vp3FfaOl/KLGNYAcyjXS43RKMvKWwQA+FZXiJGT5pIZgjb78dqbvH\r\nwBSauePFQk77JOpKzqD4giJsj3rAGtIGmlVnDAhRO49b3109VFw6P3oALe54\r\nlLkXPMO03R9TlPMYKKScdVNkLLYvG2BELGkcXIF8+cvRfc9alW0mngVCqHIP\r\n4RIiXUf/z0Kubo2rPkbDNnnVmO1FxDa93u9uKuKq9Nf96BUPJd546Oe2fCJ5\r\n7UVkC2yPgpEVq0FI05tYyKPOe5h1SaTwcNY+NY+i1yDtvC+drlpOXfdFMC5E\r\ngMO50yvoTd9o1INMGZDuIrllpsF+oDYYlrHTk6Jk0HmB9cfPDfEE0/okYQHx\r\n1MyvqfkTdw6mczbjy6x0equdn2myJHVeqSjrC3cki0l/DHq9SBDA6EsOtalu\r\n9eM86/ekkmdFQ8oh1teY2p8nNpvWmoEwc9m3XO5r1ZCxBg0hbUht1a46c7vW\r\n+RvE6zAfmAHWGqTogD9ac0RaZNixn5ZCOsAzoc1osB7AnO11F8UpaAUoKEKp\r\n9PqCE5cs0WMMDhuUcGmmcYEd0Q8ALsQyq4o=\r\n=GVvt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.113b1a38e.0_1681163669891_0.9763137600468217","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6b13bdcc04395ae0097afd60ec91b0306ee65667","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ea2191426.0.tgz","fileCount":54,"integrity":"sha512-47KKCadmYz/8nZSLkdlxQXO+DliRQZD/iyS2nRHdR+bnZlYoGv04cNPX6WS8S1TqVIx0QzVYfAUgYP+vwzZHpA==","signatures":[{"sig":"MEUCIQDFc9Q1AgpFuacbunYhTWW8BYhZMS/FG5L1UG8wxl80WwIgaryARi5HfAFHj5ZHtnKeP5lXnUyIzwETNBJsgQ2KdHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdd0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOXg//erMJzYC3jf50MhT2SIpa5e3Vo2o8/tZzpYRAg21PF1J/wWRB\r\n4r56OsbD1GBx+Tbz2ivx9k84QU8w7Auflpfh546VTgq15Cyz44tylWQKij1i\r\nYHuSFNSvo5y6sGSnMof4bCNFXk9TPEfIQaI14Uh/lMrDfUc/GsWK8cclNDfe\r\nlIoaq7HCrR6EXdP3Y/pSirmdIp6nTL9xr0bZ7e9SyBGqwLgzjH0zn+JydUoA\r\nHDTS5FOafdgJo4H2aAiITUti/LNF5m0/RLqYF2ngXgWqogIv0obnWQm7y4Q0\r\nHkCnUGoernoKm5RvamHO0doSCfp0ffGa1sduFIUEaWg6EkyAsj483ywsCl1D\r\n8/q8Vxgb71VuKf3gJo1RpO17cFb9DcacuOrRuierbvMIeA1BMENIvM4NrAlE\r\nNPw6ZgAZ/TJq8yPtsfNiaAkxcARz5hi5XCK8ZDNnj9PudYKjU0JSXFA1/Fta\r\nFMxwF8WjVIBFZAQe/LyEmchkXIeVbg4FOEYb9RfVoaMukLPJGE3CZkhMMnPZ\r\nq+KOW0TAcWpH0yY4rYHhyNYAWv4ZOtCXmRn8bjZFmKn24B/R6kborncutpvl\r\nEnAitQI7xe7RHl2UNZoe6+nryyG6cOBulAWNEhS86L6TJ0/zmr8EdxJBHE8V\r\n0ylh3Fdhb76PDqoFKfEWqh6kj4tQPaCiBWc=\r\n=Hi9q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ea2191426.0_1681250163779_0.8546697143525546","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d367f6aa1db3c2be7737643129ea8da31b935fbd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5a5c38538.0.tgz","fileCount":54,"integrity":"sha512-HbmjOjRBfG9dH+tC19htqlesk49iiD8jnp2gmEywscrR8Mpm0yFP780Z6PalMjYcCobgaqFol5QlkRx5TqynjQ==","signatures":[{"sig":"MEYCIQCzoWtBq0zUHnbcEvB8X02SJAJKtaGoPWv9mFOnZ73OuQIhAIyQH0GxBlqmOHZXU+uDi0hlrd3JknhI4iofV8iSaTKj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTlA//aDj12J9vu8RQgPJa1xJzbA0h+kvHJEO+hP+F5hNpQY1XNi59\r\nR8F9rTUtmH3fAq8E444yR3zWbkQ9Q/uB2dSn/s+wIRD7RI6X/rJoGmRjgpFV\r\n8DtBF2CdY76YsjmQshOveyF7o+Mn018BDx7u+QrMdgrSZ6zlOGp1L/Zj5p9u\r\nUUSt2Nmix6o1AaoETO39Zb1B0YoaROIUgpVlh9cBzjSzqaYI3IQb8mFSwumd\r\nvgiSWH2wIacwvKXBxhN1HyP3kzxdGI/FZUJoWsJjM/bmpBiKtJcxjEhO7WX7\r\nZDw1Jx65gOjUHecvopITsK0LUWZban4Mj9us/3jB47kYeC30vRfB045ZIKpo\r\nL0Y29Q7iCGjdnmilbr9+sChBS5Yb1Zn330Kk9xgZ6qlsmt7CzOCjnHHXeMHn\r\nBOICCUIZOSN31bJSkq+jHtYBVD7r2AggPa3F54TSAmPJ4+yer8CBYZa90RYh\r\nVTaUDT9Kv+A+vt5KssP6GcjfWSb5g7UEZv3LjUZj78qYqbE4ERxQLQKGZaAe\r\nnd/HZCno/sRbFaS/BYh4v3vMKIni0CTmhIvwnixYXyeSopI9N/35qQ0rOpUT\r\nRz7GAHDG2qqI3WspUMj50hqdHeHOAMAWWJgCSaCGZrUUJIPiDeWmcMo27FKQ\r\nLpruI7Kayj41sWCD4dFcHjOzowdmfGwbp7s=\r\n=KW63\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5a5c38538.0_1681252261002_0.5450704596483964","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c9f602430e5c9f61946b130d1c32240abb8754d9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":54,"integrity":"sha512-wMk45twuJL2247eM3Wi8KNuQKZgqcoVx60+Iy+KGZ22iMYtSNVcPNyH7LUXaNUPDIsBsF9nhPI/7aZcX4pp0Lg==","signatures":[{"sig":"MEQCIAiiKkbBvAb1wUXZGtEQNMPTYSsev8HysUKjAaZvYQtIAiBIat8HqKzm/aKW0D/4L5zH0MOMWvEmC5eEeAKvQrbHcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeegACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVBA//Siw3OTYEw4cuMS1o20R9STXIeVdfdAlPCree18yDoE3AJfiS\r\nUy4vlHSG+y4DQGrSBDBIwI1131UlzYe6zqv+HdCM/o0Q/ojs2JyXzuUkm3jA\r\nTsoDTd7kp8/wEdkXXm0Rt37NeilXwNWbhYww1PYbTyz5Cs3fGBM+Baye2ZiD\r\nLIUxeNk6rqH+ZZFTbZzaspCcYNF0niMgTncjFZAOGPiWAnc09ECwKGzBVXgM\r\nXZUEgEEUSTJHbL/fnXT9hn6dfDw7zG52xxn9mgLSIzhO6xtXCEqyyMZBqWU1\r\nCKa0u0KU5GqllBjcjMud+3Uz+xjpG6EeD6m7ieS/SAwh/8Y9Wh79jvZaa+8e\r\nHLmq+pBuT1CeAD/iwIMJKzSOINsZosga2fxov/PKkqIJzdkD5npFsvqfy1kk\r\nTZmJw/WQqO5Llw4gQxfizNd5yoxJ3Bva88EPuAjiKhFXuOT8MBHhm7/Sd2nu\r\n3MIGPST1h2NJMpmXwoSLqJL94qAEoLoasJuuqtE76aXWsGdDChulLSx9fVSb\r\n3/274c9/gWr0wo+P+DA/fTfLFMv5Vq7g/y68RBObiqA8H0qrDll+yteiGCT6\r\nUxC4/emb28EYNGnO6ZNBqOZvaRFCOceM6LHMMZLxS7mt5942qQnuY2JrD4GW\r\nWNLw8oJKL2kJys/n3I5QoGUDC63HesnMY40=\r\n=95GP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e4b5ea7eb.0_1681254304559_0.46042900715506563","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e6ba6ffe7293a735cb6400e89b8e545b1fd742c9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a094dd9c1.0.tgz","fileCount":54,"integrity":"sha512-e4uEiSO1h+HgAxUIEGSuLaBG8sYxh0qBOuGaN0zy3banWqVRrkEa+cENqdDOb1vWct2S9GCnn8BpbAry7kyTbw==","signatures":[{"sig":"MEUCIQCEP9+LfR3yuRN8tC9CmWQSeNmxXqmIxICPLPgbmipoKQIgDaZj+DybTe05nGQEMLUpWLdoblSbzLvVHbv/6uzjaQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdcAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqyfg//f8FF8W+rQBdaxVUioKwhNTQ+qjj2wGAKtF4SNgJK0iQ6V2op\r\np+aXrOUCDX/YGAxyJhnHJCTSBVFGzImxDFPow11zaI+2elwzoKugOSeZLX+U\r\n8s3uiw91GzleedrtEy4dBB/WqQBDLTDlleNsp4/19Snl9jgUnzvtpAb7KqwI\r\nvbHhJinduEcyJdmVz6ls259itGO3F1vaxGNhai3AQ0nMdflOmz8Rw7embHeH\r\ne2F7gR1kqV5Ppu/jsZiw78GqxkayQoBz4TvHf4LWjRnouev3onNZIYel+f9E\r\no2shTFVOCkk10OtRhMJh6NuV2c40faboB5Ef/O59FVX1xYGH4T9O2ABdy+DL\r\netyS1AUb8u65UnF9Lmok3ERUuSPJtBDfmsJfHo9ISRSERZoZIII8OWngCz3o\r\nIeHAz806Dh1E1I4pD5352eyCJLakt1RIBvZ8kixlFR++nosocxnDzV9hn/O8\r\n1WpgSjk9YRhff6/KA6tR+IbXmllA7QxcaSijH0OYEHIzdt4Q2b7kFO6Q0R/d\r\ndvh7MmLi3zcRlik5kW7Fwar2wPflMKqFLQ93donCn1i+zlRTWANumje0BDM/\r\n/Jjy+Q4cyXZp4DIpOeronNs2gxTpci+nH9Iq9g7MJVE761Fn1hV8O5Ty6xyi\r\nLoqDvj9N1XX6gb0fiDtLHkWH9TFaGStqd/Y=\r\n=RDG9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a094dd9c1.0_1681512192066_0.9842862006154827","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2fb2ec308908f5f841379ed65323eb4274f198cb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f771b091c.0.tgz","fileCount":54,"integrity":"sha512-zDDO/UREuIv42zHy89vARcpEDAfK3r82QCpZvZq1lZog32PfmZ2oKvEAyyN/OafMLDkuuBnHpMMr24dx97AzsQ==","signatures":[{"sig":"MEUCICSrkTW1Vl0XKWQAyvOeHzcLUU86+0IkkzPmAphqeF90AiEAzuVA3sIqZ0KQ1NClOxnQfaJoLR2zpVxjRn+ELwkvv+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWgTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzUg/9FoYl687XPOb28D1/bBmgJw7Pl4zi4UW3Cl3RZaLZllCgODcu\r\nsI0ta1Vai57fa+5EC+QYPvUwJh3g72OxGc4h1N6IQggIHkkr2JMa63LZfV29\r\nCb0qKRboqIS0SIcnrrjM9D+0bBHa/1ZjdavGCHbTypRcqd0Bh2HZQFU5wvvS\r\ndO/SsmRHS3QbQ5eaGUFva2sVzp1K6gBUMyyZlHLFwX1TKek0N6HZzrT0dRfU\r\nrQyQBH1d57spBvdGqBAw5MqV3RMbM/Su+f6UnGzs71gsvKFaJsO0XDUzaI/H\r\nG8GM49nBx6Ek4KcVP6G57WUYnTXsP5/hAbN6azgJ0Ha1ipLBNGEaA5+Pb55z\r\nUPkjY5UwFWOQL/DltN98kfuqjJfbJSvmCZCeE2hnoR9JFFu8Pym36IYXpPOM\r\nDF5n++O5CucuPX8La1Ia9WvAweu4U6+TLreu7pL4C3rT6jhlKsjmB1hntu48\r\n3QynZJn3CdyimL8XaDeBEo8gl5a0ueVU49DjsyQsl5k2DNRfyhJCJrdsZlTM\r\n2PKSj19cyRAnboAKCYPQXoPbVaN7GAjsajnMyJVRvq40DpXOui2AGjsNrzXK\r\nboXOrWBVuvD7G5j5x1lqK9sHCwDmNBrf+gKgzA3RZdufEc00/txy5FZHtmd0\r\nMABDcK/14QXrTC5FaZm3XB0DjnElNvRCVWk=\r\n=bjxn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f771b091c.0_1681745939396_0.6008309349011596","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"f85d9acf4e8e89f4af016debe38ebedeb52351ca","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.79b1b612b.0.tgz","fileCount":54,"integrity":"sha512-lz2eFPYarmH0kuBbjlPAiFX92YfUKS2XfjPGZWuWRb3xBXxySLfo0ZBuiCV6JA5oni58RuGiQofRfOmJ/hRl3g==","signatures":[{"sig":"MEUCIQCfoljiIbrqO2GnwEcOMHKQayXe/W0f+rZga+jN4l5g6gIgXnBH0tCzlK2M7aTKY4kE8IRXNhS1zzseVR8oz9qzZHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHv0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocqhAAidFrS3O61PxmR2YWVEatq6zFzNTqtoPVsTxHuFEOhUHRxBLU\r\ngRzc4xKowKRGz5HaPBvhvlWhSryPa199q03ankA9oPv6F8zNFprZaFNqRaMu\r\nKSOvgJct3tmMmcZjMbMJiE7rUfv8AN56C3ApPLME/dHC7j2HVvceCjJgDl0U\r\nKlxdeWjelPJ13Eqe44nU9IczB9DDQ9UxyCNzLlTCkZFuI+vMxprsijgrEolB\r\nWYHTO+2RYnC+6UigJuLcyAzMBSGlAocCdkA2aEBVNIyf724Uo7wDwQNQjC3y\r\nwFg4z6KogkAKrJ84Rqd3kwRfKD6PLMMtPvxLLwQhijT7pKUpQVzo1gQrYLQq\r\nhDCMdYjRDbO4xPztYGG0Ba4Kev5KEjzjX6xtp1KJYzw+Ggu0veDW27RolkIn\r\nt3SIPY1GltRfq8Lnb+/c2e0UrHLnYE3Mha2Z858KpK8L2yw09dkFUbFCKiZ5\r\nVwRNJrGaprfQxGx+FVUWjzNM0OmOYURRw76vUnabAi6eYnlUi0UWwXfe9k34\r\n83eLMLID+RcI1M9YydeYWnBdJ6PyQQyZph98YpVtnotX5odo4DLTrx0slOA2\r\ne2jNT4qfUh5bfWeRf3Gt+U1+tPpQqf548Ezns2SY69eO0faV9Z8vFIgzwSh+\r\nwDQUSzK1ykwqk2WDYxdh4Ong2lNK6cOIF/E=\r\n=PAGF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.79b1b612b.0_1681947636234_0.9271773525623712","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"5ec65a7de1d42d4a4a93ff69b528cf78264e7275","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6f50071e5.0.tgz","fileCount":54,"integrity":"sha512-Nheyz36EMprz5lfLSaJQBFtDFU/Wd4NFSBFfBVksBzVZEafGhh+Ns4+YO5v5LyDOumopxPjkKXVFyauvc+yGxA==","signatures":[{"sig":"MEUCIQCJvDlzTN7ol84xDRL8G1oYwL8iDIUSVyXGQ7R+pFYH1gIgN1VUHsJ28S4YNX03DR+EQNv1/Hu3h8DOB1zqLdrZhok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrgQ/+OuR8LBnj2jiCGTbouJnRnwrVN7qMAX/kkE9EXC4Q6jCZ+mUW\r\nmiYwGx2hQ/hz4xQs7fPSocEKWfWRUMADyufK9uBSrWNo2pjdQcBTNuwroxkL\r\n5kAaVabQcrcHEaM4Q4veYOcMBaAZ6mFlr1vA5L2sonZtrHlj1oJVRQuVZrQM\r\nqMJ/Q46fFrxccY8jjH17X7Ht8OgsHMU84j5a1EbjdO9OuiFSZxSu9WkD41ps\r\n9ZhS6XEFvT4Tl+D5aADrYB1lRafPqtGBPwcZKbZzvXvtSbTVlJ2sTIYcB7B0\r\nFntXuZohSi8qT21MIGk4yJvWmALtWWJhx1fCNal7qxh9eKiHNaWPe3xl8W2x\r\nZjKCNUj8JbTZDYs+DlX5meFoCUmJVd9B464GsSuv3EgUKoo0ofB6aFnrli1z\r\nXPZHcwYsT/KkW5ITHYZl47uAFr7geYMBajnKPJOcLnYqjdEWPWy4AQ0eMJLM\r\niLcMjbadFYQtoWALSiYJaonpOMSgryb9zwx4CCUC4k9l9Ae+mnutORVod3iK\r\nR3FNeA6oh4VG65G0quXaEZ51PJzCr+YFTf30xHeesQahwCA2Rlhft09bT+1M\r\nGRsmyxUyTl3N/ZrmeU2u1fw9qbGCd+so2moP1xFh7FbtwAcLf8+dnxC/oD41\r\nTaKJW0Cr5yTreizP4E6jfs6zzo4eQkOvdpQ=\r\n=0xuF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6f50071e5.0_1682013683042_0.6638300229923069","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"649542684339a4fcddf880dd1cb4b500cdbbd556","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ef754381c.0.tgz","fileCount":54,"integrity":"sha512-/ZTLnhChXwjWGhBu1A4QqiS9XWYzHuLG4A2FCXVHdVfgc26m+Or+oIw+uuSBwE9Y59Q11SK3qlhlRfHrZ+1Fuw==","signatures":[{"sig":"MEYCIQCa1IUNHhdeawrcLwF9so/Kj1IFhYFa179rGgEv8SFztwIhAOCsE3WLZmYEm2fCKfRrdcKYZHB8caDuRgG5mEs1dDEK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpynA//WCW5yojcaCjlZb2g6oEyN4z1cUpqQOQJjRTeJAEtVQRrPjh7\r\n3H2BSPhVFVfN5peRXqLO1tb88rrS6kzSfziNoIrFwNxYzCLsPE0uoxWm3rHT\r\nvrRg22ifmNuzzzYdlDsUiBpLFB8tKkwHXvMAkH705WKbseEgaFd+rVpSE54h\r\nZWkDEu/7IOkLTSdj89D0VDvCGsrXQ/ORRB0CUg5luC3wGFPVroiIwDKCbGaO\r\naBi0CMTDAiluNQy5y/OnjWB83PDOl17bsV0HorPzZ2q0eRNI5HvKoiLi5gZI\r\nJAesbJi8h84X2trR+taZ+xeDuRKguHlJqsGa9elRLqSpflUUZX7TMjiTDUhl\r\nvhrUuUjpmuC0MxCD8xLYii0a51ZRy4rgTadsyIQblTzUYTpemS0bgdS78dZ1\r\nDtqtxMeNkyHj+2veNx+pV5pZAEDrPYj8uzLnVthpJT1lw3Ucm1tR1g3rq2fb\r\nvUfX0N8dhIDm/7UbJiho4iJt5mQ8zF7vIKe9mezB/BfTV51H3P+GlSYvld4N\r\n8+kvN2zZb3xWr9atXcKF8njW2xfT9IiK5fNdVp8W+lpOsKrOGVdy/IdCpZtX\r\nczFn0oWTnrxP9kdWo2v1PogNZUnHTepmFIxPAeQXcmbRcauKcReWtUMszQSc\r\nY+ThI97lcsfXeKldTV/mB3n22VyHWUez+mI=\r\n=muK+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ef754381c.0_1682369499511_0.19024312170424817","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/segmented-button","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"647cd4a1898c5b9f01c42426c371ed55f4a49947","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.69ebf61ea.0.tgz","fileCount":54,"integrity":"sha512-MAbRyep44QHWmgY3QJeunSiv5dMDI3rHXR6lFyKLC1p14Z470/j1UomJapPmd7hvpevf/s0cGgBQXtg6xsn2wA==","signatures":[{"sig":"MEUCIQCoR5dc0A4Sw4qoG/rByAlki1Kb+n6uppIx8DfC7CjTRgIgQKzdAAWPmFp8VscoI6+NOe10wmamE9ln7lDA7LZA2IA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq9JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuCw/8D8tYbzGCUV83U1yJmVKZxfFe0J8HJecHozoOQliImBREsLIL\r\nEhbpry6SSAd7ub31eauTzbNLQUluT/R17RW4QmGM4I72lnPaX/2YG84ske3z\r\nh3tFFALvubwytS/Nekez0pXTtif1EyWooKKii9tIsf//yvQygVAFhiX8B7xx\r\nwrIVMfWPhnrcPmgnXHCiWMZFsiLFDDc8TmQAa73Zv07zt3X7UZQRZ/P2xkmh\r\n96CL8F9xmkM0QqBZhCYcYWoWnmDy+MpuFg+FUBNB1A1Kpst3ymqCLTEMuqzd\r\n0SIUVG+HGcNxttE4hdDDJcvLbZpN7C+KB/lDwiqNS16tB/sfUHxNnBQ7u3Rl\r\nKGYMjlZTRoWxavBbVQvhXkOmNwBFGpawes76hcXWzYKPqWbocHazNOJ8IGZU\r\nDB+o+1mUwPo2DrEK4ttVBA/NzAfoLyI7tzPHok/rWwaC4LejgcDoxKSNnl96\r\nohxWNNeWMecx8x8T6XtuisphFh/KR8dzZaiaAGzE+prAYIt/uRWLKDd5zCbJ\r\ne8w/fchDHj5rC2a8g8JDe1EN8bVssffvAaUGeY9qnV7Ncrasuv7p9l4eEzvL\r\neDg2gsT6/j1zVZuW+1xx4kEaUjIweuJsKZqxnVW/dgKBGGYAYyxipkbyD8nk\r\nE+D/aSOYN5nybdty16VXiwsJTkaHk8H8BYw=\r\n=X3Hj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/touch-target":"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/segmented-button_15.0.0-canary.69ebf61ea.0_1682616136676_0.5441960444225822","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b62a0e04f6ee439b620f7354eaf0bb73ce429446","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b90be86de.0.tgz","fileCount":54,"integrity":"sha512-UHGhaMqvZXib3nINTmospB2oFpXBhR2XR401hMp2V8rVs12YuEzidpPWOfyEq0V9xb4UGkayZMLgFQcIsahCPQ==","signatures":[{"sig":"MEYCIQDUBYzmf5nghMdZifhAly2l0hXK3yK8estY+wHZvbMYKgIhAO9j4qQsZGj/sdWR4NuKpAK1jkcFKrx/lc3CHLo2Fxcx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGM8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriKRAAhB1Ejg6r+v8Ku5YnMb1NF1S9t99u8g7vTYew9ZSntIEmWTnc\r\nTJR3gjJKDl/yYO3pDq151udXbOdnBVhWvt7xX5UsPBCae5zALLin0d4+UMMz\r\nDY1SWlAI8CVhN2ZIPTAmaNLZxafNLcAw7mX5wnJnKXOBzoPf8eSHXtP90mFV\r\nP0G7d3D8OvZNGJ/jrxt3bx3b1tl4cheJ79iz/jVA2m/RJN4D7poWeEZwzW2w\r\ncZaprwOdr2+D4XjjjKeY7/i7hIeAOjuZR5Km38O7rXqrRecPsNvRokm7gAVq\r\ndE2TlesgZQWBh/xcjNZ2gCvceJTyGTpHWudWSOlPQny8S4SByeFvPfLNMZyO\r\nSpMBaiTkBOtnP2w5plRe1qRLE2xWlbq8gxbhiX1VkDapFNL3xPr7aOMmIbd/\r\nyZAFfbwM/b3yQeJkRhhKI9BzzSwOxM07RMroFU/e7vlWYd5fd8dOhAKujwRL\r\nwPcpB5FYLVe4bwnOHPAnWrww0W+efH6ILpxETNQSFdJDFgPEopcVnZXijCOt\r\nfbxDvbSEoSSmR+AsXnRu1gGAoyvxDQdIW11bRduSNLrO4pFkC9yR9XtUvaLw\r\nHb8wn3Jg4Vhduh1loKO1bjVjXjtFxwOTLs8zZ9ruH36AzRl7DtQ2WHIhs02S\r\n4k7d8gudPE7Vr0f7SV/q8cRGuvDXJ8Fk5hE=\r\n=K9wM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b90be86de.0_1682727740225_0.85488134355558","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/segmented-button","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b1b1ecd52990d396f229893170b7f7568db7faef","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.51f9c0c28.0.tgz","fileCount":54,"integrity":"sha512-rYIyfIzf/Ev2d1/4OwkmzGvZ/jlQZDwR6i1FJA7pYbpYyVAI+8CxBL0ea02iUZfvTG8KQcx0fBW5HOlYSHayYQ==","signatures":[{"sig":"MEUCIQCruBE93TBZEPadAQkOvrOMjqopMs4BnOSojWBwa4vCtQIgNqLczj2dlVM8aoYpZNJMeQwurCI1ndtvn5vdI7uR5OI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGWGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzbw/8DiEcqsjJv+yqu0QFzVhmYZsC8I3t887MbU9mb3U04sR7qC6z\r\nw5wgSEXlHiSq70uvBb9T4J+wg4nhaUGSLv4Sst4xI+hCnB0au/vEEb8O5Pfx\r\niAvfVFUrwQzo7vOz3exa/eHOtp7oLXToICxY3PCaeZQ0xvPvUGmBTve2lRd2\r\nVTif+bTaV4RG8avzmQvjCnnhSBWT7LOKrK8doGhoTrdd5aMtSaJEoALurKwg\r\nRGvMWAwm+6j26FeutJZGDmO7xPN96w0xCjMuVI41zmgn4NA7+7iDtHibFAXA\r\nlrL7AYXgi8472kL1bGium+wMFzDIvzMw7BPl+hvVX2DTRFwJp6OT6KLTRPOI\r\ntcib4KAXrUExgSwPHUKZR9Cd1NsHibsi9nJMqvxUW6RCf88PyftPFjGu9yLC\r\nEO+bNkSZlc56OdBdgfUYrNNoc+850I87/do/J3bOGL4LoQ40/pUtpH+0Jsch\r\nEo9yvK900FragD+pZul8te897v3TAydVcmGlLZjr51qBPyKQOlGmbkQVGyZI\r\nCCl3+Lvp5VflKVQScYdjHXrbK06WyZEqkRcDVw34ZZkbdRMk4FVPcT++hhsf\r\nIzYTnasj/rpROdkJvIQb3giztfkThbhtX50S9DTUTuK2KungTKTdPwrb82ll\r\nRlQRwGPU/GkzgillUbO1RpUt2K7QCtw3fW8=\r\n=P3GE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/touch-target":"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/segmented-button_15.0.0-canary.51f9c0c28.0_1682728326005_0.675821635686588","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c2fd2cd0c25a44be1ecafc8279f27946b8598b86","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4e840d685.0.tgz","fileCount":54,"integrity":"sha512-nz8DSDegrcnUKN1bgL1ZZVYkiRiiLrjodLUMBh/h/Gc+x3CIn1jDFFMgI7IqY924c64DniCtyLVHol/H1poJLA==","signatures":[{"sig":"MEQCIHo42Mx0PU/4GNZfo1E9Gu9s/Ev1171vwmt7RnlIC+zGAiAz6eHr9ALeOI35abuHWWDC0EGaR+wPR24mX//nE+JmxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4e840d685.0_1683041663629_0.040735221420188816","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"81942458de96e62dc129e94bbf3ec9a840304276","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.10b8563e4.0.tgz","fileCount":54,"integrity":"sha512-2Ly2MmT64DLWjp5QDbC5p+UsFnUwLCPfI9HBJE0SOBsg/VzOsdS9TcGZyRnjs0PAmqSd0lm6deNfTyoVyECxKA==","signatures":[{"sig":"MEQCIF+RFoFZ8fSB2PFzcAlptqbQTvxe+2G033A5bND9QIvkAiAIL1OSJaO5qh5dgxkD0YurqOszQwFabIuQM4Mw27M40A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIqA/+IETcZmaEU8gv/blfNR5OyqYqHME6Cp6muz5k9hw0dNd+ZYyi\r\n2HPzLUkeoMfHfSQxnykZHjBWGiBwJHVLPByTV48sLqEUaoNJqV44EaEhCKOW\r\nmWb7FcQXHwu8aWXu5yLtK0bj1IWu8r9LRuxgJd0lVtqUzM7H32wEI/OWlYMQ\r\nT65cmGo6uBzwt1A0HXDZ+tzMHxuheO6f5CmzIiQiXFpE0jbMlY6sk4sUQxnZ\r\nYnBH/qcRZ0crfanGtRe1HWoRVs3jzxo8xX0JJUNzDC13kNHM0UdNUNaen5ZZ\r\nCvUwHR/E1pxDp/wJDdr2xD5iW7j80RZCHYe0gcxYsUQnNASR83Kxpw0628kY\r\nAAmbqEXExH/LDI4YOuDBYUAKwZok+s3DJUEpSnVxmz7VG4rV0cZqB4Hucc9d\r\nEboQ0TJ1ELbF2RqESwGj3GlQjYhhq2AMis0i+ChrXllbc8NzNQSMcpk+SA3V\r\nMiboTBRvWcJVbpom1o0KV8YMavaPBJ2QOmIKFEIqcr02f4Ny+Ba1LmAQUUjB\r\nDTzWgjJUIT+yk8gTosUSzgYJqvv3BL5bsTdh0y6V7LJvwbn2h9EEiTkCeSQO\r\nNiuQPvMNhY2CUAvPVVYpmYLE+vKotJvdXzIEBPGqL2ObWYACw6xc9ZMz1KD0\r\n8bTnS65nbVpgAI78SR8h6+Uy50S2kaGwxIQ=\r\n=C7BY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.10b8563e4.0_1683070951133_0.5561639164996495","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e74b7d4ae18d4aa6928306d1ae62b5371a3cc2ee","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.736b7fda4.0.tgz","fileCount":54,"integrity":"sha512-XgewczgEU8GFf4DFs98fNVoF4HlgkkRVeNE1IbETy/0WaysUe3mzPFrgO8jx0tLI9ZP+RKfaNAgx27jDYiv64g==","signatures":[{"sig":"MEUCIQDuO/tMxVjyG+0H11tJESavoA+t0GzW55MwIHmOLZGc8gIgQ/k6RW6JvKvPYPFYnR/7GchOgEna4T5FzWLDOPphcvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnlQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnhg/5AVkrGgZldf652DVEDaLHLeoxwm0k4GQDhBXSQ2QJb5WmBhOJ\r\nEkrNqPK8EVAtxEtCfLf8hkOW2uSxxm0FGPejFRMqvoXm0bgFa/Fbfd4CnfGA\r\nsNwoTMWMxUhMzERQH2z+XhnHaQCoXvsjpiKvUTLc1C6W4fwWWVDTIoaNfFWd\r\nQZ93uVgp9CajbozKI+sSlkvHaHhwDRHFHqyoEtjVGn+87t0JdutrYVA7iPIw\r\nDvJlafQtzGdvA0ky298RN4g4/Asy+WgoK2DyugsezaZ0ZNjqHHWKgIhXTjSs\r\nhjJJlYTh0h1j9TEPIdvL5JXTWyDpUHut77sCqtWg/hwseMORPfiGQLcfgJiV\r\nM3VoAljv1Hh4rsyzgaSZyPhVyOTgRaXWg8VBXDos86/95M6d4X2imIpzzAiM\r\nv+Kto3FXy/Dbh8F9leLlJmoaGudnF8EoEgQUqurajbwGRfnp0hVuiwPQXj2b\r\nvHNtq70Z0B591xmkLLwI9JkcK+civfMYk7py9EiGG92ez7FAvecguKQFKQ8V\r\nsGQtV7xWzqxZpllWz4K1+lkspIBGVU4lkeilc7MNFkR66NTN1ZzjoXj3lXkr\r\nEn1E4WdEcc/bguQa/ATnML0Wnb7koDVsITiG71NwjHOjXA/PKGgqql76SJmW\r\nwqwfAu2Daq+1x6PxzK9No6ikVCva9qrlOaM=\r\n=OM05\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.736b7fda4.0_1683126608610_0.5194449855905752","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d708282ae2d6cf5f35a205029a19471de7ae8ff7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0e533c5a1.0.tgz","fileCount":54,"integrity":"sha512-YA51A6IV/aXHxAuXs4IcwX5qEDg7jNxpe0fg7fNMgAii5fQyG60O97CeLozAywNUE+hsqYp1Kbc2neyumd2etw==","signatures":[{"sig":"MEUCICian7KtX6oOf0cnVx2uK0WLYE9UrJKnOTEGJ/3D83T5AiEAkwJZmr4GxNWUJ0IGVhJCeSGxYh4yzXyexJq2ULuobZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0e533c5a1.0_1683305830887_0.18223674398414924","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3dc0602ffba298eb7fbf17d0faea421a3c9e7694","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5f01c15a2.0.tgz","fileCount":54,"integrity":"sha512-9bN++U7Uol+3X6whces90IuGa2dPeUX+Z6icZ7g2AbZCt3x4nt5j56k0sawtKr7aTMJyilr4+IC5KMrPcgcB4w==","signatures":[{"sig":"MEYCIQCn0flAGa0llaWFFQEl2pi+y0/r6xcVfwKOKoevU17piwIhAJF4TeyxPKkHkvDelKahWSqzch231x19ZvEcBts0Mw3G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5f01c15a2.0_1683307618631_0.6585799324647306","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03d75a8fd9b270e1a155afdf35cacec5ee20e3b7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3b5b55e31.0.tgz","fileCount":54,"integrity":"sha512-62vr5OhWvf4MzVGx3L8D+wK7IzI+a5wAvW/wkcPOvm4FldTyPiey74zC84Wj8CK82UQqzYJj5jTV5KfOk/2t0w==","signatures":[{"sig":"MEUCIFApBKOU+AL+kL34Hykqc5elVmg66lY8pPCJ8k/q4e8XAiEAt7Ng26JNA6kYQcfPFjPMWWuE3xi3IWdGth8pV3UT9y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3b5b55e31.0_1683311998125_0.3979882574319187","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cde361ac65515c6b5e99dcd83b3cd3c8d8532951","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d0788120f.0.tgz","fileCount":54,"integrity":"sha512-L5/MTpLb7ENPXUX8sl0HCJdpfXIH246LwIPnoSs+dszL8/QswSyLRePP1fztKNg/Sjodrxy9dJs4J9F7pYjRpw==","signatures":[{"sig":"MEQCIFfzKezppA3/NRUShS1Zuq409BgzCK+VdAA964DDTKEaAiBAHsgoSfUJYc3EwJu+ylSxSKHTMg3mcBfrKVz4S6d3QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d0788120f.0_1683620635289_0.17188816470591917","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"af6aca2a05ee12f62e5d8be474fe3423161bc8a8","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f52358dd0.0.tgz","fileCount":54,"integrity":"sha512-p4wrYocpN7CX1p1Sc2HaEnDJPQ5xAueMdyVt7I/zcDBPmdoYFM8xk0JujgH4lBKtnqgG3fo8tcLNtURipKp9XA==","signatures":[{"sig":"MEYCIQDN3l/NeqTCvj9sRaHLs3v4FWYdcwEzqIQjPiWpu79+3AIhAPBUu/z6/K/3cqoKjsG07t1qB4ZFzTZRrnEAYfzQbeO0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f52358dd0.0_1683901871839_0.5221490256036896","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3373862d168e87d0e43da34c5770c2fd52db9ed5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":54,"integrity":"sha512-kQB+8wlvg9IGzxPt8AAiFxWCSCDH32EJQteD7ew0B26ofP11lXAJ8PuTIC07ZZzVqMeJQ+ahipGqEMtQ+qYSsw==","signatures":[{"sig":"MEYCIQD55aXFpsMOhRy5eTn0poKv30g8ruV2rsE8T7uvNGHBGAIhAIaR2JDK6SiZAqG/2ypM7WXL/Plb7K4yDoUEgkO2rMLN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/elevation":"15.0.0-canary.d3c3fbaa3.0","@material/typography":"15.0.0-canary.d3c3fbaa3.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d3c3fbaa3.0_1683914513932_0.5098865859475923","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ef254b5ac1813b5b3be4501a314747fa89f3c7b7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.576d3d2c8.0.tgz","fileCount":54,"integrity":"sha512-XGluudwIFds1XU+W+C+5pxTP5z8t4wn4UC24RCbMG2AhmeF3cP+iou1eL9gRT/OQ5YYG+E+tB7UeTQUXpxIVcA==","signatures":[{"sig":"MEQCIBnwRhV9+/Blgywp/iNruiYKE1Naj9RFXFOvdpXk21GoAiAfXLZR9kKdVOPBjkcsAcnN9+DiujVO1o/5f6eLRC4lVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.576d3d2c8.0_1684202443473_0.6179550240803193","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/segmented-button","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2074131fc2ab98e8d69a61a6f675b1ed139e033b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.19bb36a46.0.tgz","fileCount":54,"integrity":"sha512-mw00KBrfpDiBagLPeoMBp6h3yKgnJYUhVn4HRtC8NH7BbE0GagJeAFaTDJF3LKOjlii2UaIe8lUyGtpy1Tw0bg==","signatures":[{"sig":"MEUCIBBE7rdtcCt85bZjoODAGSTsdx1mxLRAOo6js03OgZ5RAiEAo5fXnIK0Vpjmqf1/yNd9TZ2MROhPgeKBUB/ne7V1090=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/touch-target":"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/segmented-button_15.0.0-canary.19bb36a46.0_1684266884021_0.33574307404760173","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"37a19972e33e38276db90341b6d2b615b07bbb55","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":54,"integrity":"sha512-/oYcZfiQgWbmcOlJyJZOeW0srH8+OSZEG/zg+NaOnJO+2XY23RnlsdWQfYYnwvc17zu96tJvBCQeHha5nwM6cw==","signatures":[{"sig":"MEQCIAx4ElcrXR0ReOLyL76CWE/cXeQoOuSIXUvBQyqhmTFMAiBiTUzpB7z734CkYg1tcwFQV09e2ay85p6l+r3OTFV16g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.aa5ac7fe5.0_1684776390873_0.6398728168141694","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/segmented-button","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"04659894c2206759f110e1261b7b446865593618","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.90291f2e2.0.tgz","fileCount":54,"integrity":"sha512-u1DF+jbysX6wCqt7dDnHgEo2XhNrwkqHq6YsMOFVCoo54PHt3gpwhD89DONqQJKspkdvZuxYHzpqRtV0GIzYDQ==","signatures":[{"sig":"MEYCIQCQfveN81aqFjjo2E1fZALkCi4Pu0O+IYwHgMFV4+qNcAIhANy50N78RdHzBu9bq+qtVWhaoqJtRTeKAK91DorDA1EN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/touch-target":"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/segmented-button_15.0.0-canary.90291f2e2.0_1684863807008_0.5881146365879926","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/segmented-button","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"626328ac48339b686002e913b4254d2961dd56dd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.446734f27.0.tgz","fileCount":54,"integrity":"sha512-eGtJgZRcmEXiyu2LShVkDLpDvitMjb3GWHqbavMMvAgOUU+y1Vt2yYA2byJqjMfwL6EEz5vii+ZH71q6rM29xQ==","signatures":[{"sig":"MEYCIQDKnWGWz4v76pT9sKz+9FJxDSzy+1/cILsttBQs2HDXwQIhAMqCEM2xmDh4dC3eLjsA33K/eeM47Fy8RZbo0OZUI+IQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/touch-target":"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/segmented-button_15.0.0-canary.446734f27.0_1685483336273_0.01831792658389486","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/segmented-button","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"3e83404635ea2105f937373ac7e92bbcefb71057","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.19de312d8.0.tgz","fileCount":54,"integrity":"sha512-P6NEB/9xWHfkxL6HGMqFm62z0Eccr6ZE08NX6V+BBxeDEM5x/82nw1KiIDQVXFZ5xb4G9e+NJEtFFxLyoma78Q==","signatures":[{"sig":"MEYCIQDZ6SLt+t3W80SLtO8hvRwJtxQ5MHoy4IWeR1iMKKyzJwIhAKUYwAGa9fZ4jgwjlg8bTP8vK4GhrYenwgumYV/oLTxe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/touch-target":"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/segmented-button_15.0.0-canary.19de312d8.0_1686071948983_0.7067228263182828","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e346805b2ec65176e31d4993086bdaab286917b0","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6081d829b.0.tgz","fileCount":54,"integrity":"sha512-pyLaKIa+EMAH8RIfMwIK9XJ4C70UmI7+hN90rgF7ebR4vg5sx5prfL2QeEFDSckaX8SGpUy9ytJAwrA5oWbNWg==","signatures":[{"sig":"MEQCIHrG/fUylqxcxhoSN7w3kIzi+/jpvEga/QoSn0aS7ixKAiBr7/aZcEwuGsQPnzWCqmJwZE32ZG8Xe/afAI9tRL545w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6081d829b.0_1686100484796_0.8364076338346549","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b03a64885e772d85a03865c3c36eceb96f2d966d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b26c34a68.0.tgz","fileCount":54,"integrity":"sha512-ojNKtPz6B8YV/MgJjXwDTh8l5FmT0otLGMOyw7DV1Wbnlj/qgrMb1TyU2e6b4mAm9iM+VeGVn/f3e2SK1Av1cw==","signatures":[{"sig":"MEQCIDsA3DUhMuXSWOJFxwi0dwIIRBSyLYGVudD1+YKBqL2uAiAI/ISwHGyXPUpgiSCJ8Guk8TYUGPfm8qFBIrgAH7xe+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b26c34a68.0_1686169145615_0.23669102376781148","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"014dbff3f31a3be9d8ea089758d80201c57d7dea","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4fe911371.0.tgz","fileCount":54,"integrity":"sha512-rtmdvFmA4qzKBEC9CyfFiyE6V3ZskzvbuYD80ebw1NpXscctmkI5kWksMq2+966bMmOuNUNGwmik7vGcxiPQIQ==","signatures":[{"sig":"MEYCIQD1D7PKPaGud+QjaAEi1LuHutygQm7eYRjbBb3+6FmOvQIhALsprJMGUmvoC4EDbObNHsvp9I5FkCcdvorqK4k9qwvv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4fe911371.0_1686179206522_0.8933975723134606","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"31f4ae96f14031c22e917b1db24f7260c7f32aa9","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a9ff9866f.0.tgz","fileCount":54,"integrity":"sha512-XzXnR2Vu+Rvzxjj8tzs0Tg0Gay9dYgAO0AWJ07fNyNj1qT+H2cLoAunYV3AXxosdOYPxCZlUM+HT1NAGjME2SQ==","signatures":[{"sig":"MEUCIDHNtOntmfco7cUDNk3EgZcHcXUnYkkXO+DBczn1DdnTAiEA6IAJQilApsEKaW6wP0FBGKk3Wp/n2e2OXi0bFc0V2os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a9ff9866f.0_1686656338040_0.9694648216458197","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fb4c18f2aef530d74b6195bd9560407af20bc416","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b994146f6.0.tgz","fileCount":54,"integrity":"sha512-jd+f4BTnU0tghxBpAM/XdVmruDXSoQ88TYSFWbrhulS+/c/ooCZURWvVC4mHNej+QR/fODkx4adbqkBiwwCtMw==","signatures":[{"sig":"MEUCIQD7NDIRObpgYkZQHccvQ+SlJEU5eP81veNU/dn6BVOgoQIgLUZHF4wl/fC60dxXU1mqNNUseaUVln043sV37xdxjN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b994146f6.0_1686776672865_0.9198236454219277","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"48fb52e597ae1b9f815984219b0b65ec544e1351","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":54,"integrity":"sha512-LglEwxQlVGFegOomCW+lNLh1KcPyTY/yMYc6LarJRPkYKzoAqO94g8Dz0mWYd/JDXjVlSIu4NoV/ATG/6yeMqQ==","signatures":[{"sig":"MEUCIApTqcedc7IH0vevuptW9FjdCbujj4WhoB3saxQ3DcGsAiEAlvgOK28bbxBZc+HDBKP6m2m3rZV4uw2O1UJwnG0ojiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1fb4b1a06.0_1687892281645_0.002672993239122068","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"196475a5c86581d5ae896ba8bdb98e77caa8d0eb","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c64a2776e.0.tgz","fileCount":54,"integrity":"sha512-pV/WPXt9xWn1pKkEqzLJ6Vv4x3sfoWog1tasBfjOBQ22vCbtU1DdDN9EEuRhG/up3sPdRnLlbO71qxLYO1ibQA==","signatures":[{"sig":"MEUCIGbr+w9MmPNJuY+ENZD2Z/Ch+HjEfqKg/Wq+4yl9H30GAiEAhzv0tDfG6mRHJHYDqKKZTOcN0pakBphJkojH6YToQtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c64a2776e.0_1687897050909_0.6675330205613155","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"133f9bce1846e3362abb63400a676d37dd75e615","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":54,"integrity":"sha512-amx9DxAeJLxbQ0VP2bvDdGUi7WE9BzkOhzCB+7yx7T379H8fcB0u30Y8AVScbRjdjDlfv5mzdMCO+049lyr4uw==","signatures":[{"sig":"MEUCIQCoLXLpUjYZaTBs85n8sWPvqvPUw9r7BPKakMmq/28rsQIgdAbZ6ZaL4wA7Yxdi/ZMzBDX1rGIxvb05p+wvgTz7fWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.b05d9eb7c.0_1688055868321_0.22155713708924285","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ca7287f4adb96d980e4cdaa5315705a93e8b833b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2a9697dc5.0.tgz","fileCount":54,"integrity":"sha512-xpvHNWX4nh4nc/EtH9KJ2ng0mJYahEt0dz1rbYWWljAp+jXuWIXnsJixpAjxtHXeIaeCyQjaXfXMvKP+HtGl+g==","signatures":[{"sig":"MEUCIQDODygvJufQ3gLV5FoJ3ppFy0Vxxwi+kzzd+pzBb9cVuAIgXN309KnYU593ITf496fluAF2QPhx/pIelAhsJCgvAuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2a9697dc5.0_1688163277023_0.7357566519669689","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"b7f33936afc22cde239645b2eb7a8c77092842ad","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0c52adeab.0.tgz","fileCount":54,"integrity":"sha512-YPSL7iTDyMJYpEbHcX9UUQ2/Ukxdtne4v+mGZEcgcBs+gGNj3WcsuAHlBphp48SKSwoHzTe5XAkDTI6KKpygVg==","signatures":[{"sig":"MEQCIFZ/G4hz6VjgOdNC1sCchMpSWjL0iggXPd5T4Arek+3MAiAuZKe+gw4z43JixfTAylEuPn/IiY9at1pdIXnmgUv26w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0c52adeab.0_1688574396943_0.5585522796042954","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/segmented-button","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"60b0bc1940e50eaa35a3607a44e95c5fbbc8f612","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.83355c322.0.tgz","fileCount":54,"integrity":"sha512-gFwAP8I42LIFPQkegrTv0pNSj8rc4jwnzfDeL2pAksl7zjOQgOrlplA50/Nsy5tcLn04qJ1qhB+UBHfRz4pkbw==","signatures":[{"sig":"MEYCIQDdYICJY6bXOJeeFR3UenmjEJLOzzLlIp9wxcqx97gjlwIhALp/09eHZSXpKycYfKHNAPWIb3QFTfDjv8f89/rhFUf0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/touch-target":"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/segmented-button_15.0.0-canary.83355c322.0_1689001589855_0.19459027048901612","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"635e5a7dee12163b08a78872a0cacd4121024abd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":54,"integrity":"sha512-YDwkCWP9l5mIZJ7pZJZ2hMDxfBlIGVJ+deNzr8O+Z7/xC5LGXbl4R5aPtUVHygvXAXxpf5096ZD+dSXzYzvWlw==","signatures":[{"sig":"MEUCIHB8OxkHYZ3tXlPOpK2P9i7GCYDg/IeBLOovVpBsW9kmAiEA+sh2ddeZdtj5Wp2CJ2sytm+/SUnbNy3FAk5Nd99mBwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.bc9ae6c9c.0_1691097737853_0.11588240123884508","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/segmented-button","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c065827045bf7123f27b3b9ad611a8aafba3c4e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.3c44cd956.0.tgz","fileCount":54,"integrity":"sha512-OqBdBO/nH+XMiBB2B1DD09nPLWQFeAdi5v6exGB6dXeH4AMGJSAqkDfEWjmDvsqIPqkESrxtHTPdbYGPIq1jfA==","signatures":[{"sig":"MEYCIQDMrRDE7xFwdgkUOYrTfGGRBsOqQCEkgp3kt5QzQSKqyAIhAIR6K5ddIr4V4ZE2kuMY0HzbinS5zasrcQmUXhhpJQmx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/touch-target":"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/segmented-button_15.0.0-canary.3c44cd956.0_1691430525672_0.9112329805401838","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/segmented-button","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"73b8ed0770451b162d0d765a9e4d7cf65b154a64","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.02702296e.0.tgz","fileCount":54,"integrity":"sha512-UYNo6M4cOxCFMJzpu6Hs5hAO3umuLn4jI4ItgGCH593w6G8ly7UCqsBIynbTaI61//ZhoY8iQ5K1y3ZtreF/Pg==","signatures":[{"sig":"MEUCIBvloAJj4+lAb/0CE1YKFUBfbGNpov66keJEAH9yxtC3AiEAz2vnmokK6PWKXENy4x/YypWZGj59pnIybjvvKzOS5Ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/touch-target":"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/segmented-button_15.0.0-canary.02702296e.0_1692965143155_0.24120430240506696","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/segmented-button","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"546d993b89f603c87fa707ca06b145fc94bf71f1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.872b65832.0.tgz","fileCount":54,"integrity":"sha512-6uVBhwlvq5l7upahbEH8bFiulzYoIAUpy3KqN3L1FHz1gjy6z6xM0Mrvb+npD02At9LQb5vOTIDvDRYpTsS+ow==","signatures":[{"sig":"MEUCIQD6DhdvsAqVtJDROke3AMaxT9WN0/7DCWUc2uhhHQWMgQIgJcLf0StqA6LuXcrE4Wa2VFEXVxG9tShVzxaH2VuZfwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/touch-target":"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/segmented-button_15.0.0-canary.872b65832.0_1693397654942_0.6205599128288413","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/segmented-button","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7fe6b92f9f26d0a3a8021668294e96124675cdbe","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.89b2e4122.0.tgz","fileCount":54,"integrity":"sha512-7z8LV+gwMj2YfnwMy8vFE7sQ5yBU+G9WFgj/52gDR5icraipNM9uYt4DrIR9cSdEMBI5sbaO2mYwOrwHNfgTwA==","signatures":[{"sig":"MEUCIQCB128XCWfZul1cocCXyNcFYckGk8ABS3gVnv1fxq1NPgIgL/95+mirfNWUk6/wfiM0ck2uV62RrfrxW/sOksJQe4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/touch-target":"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/segmented-button_15.0.0-canary.89b2e4122.0_1693498057460_0.36490573021003314","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"6bf9862b1ddb1e10159c41671071d8cc8bb5e8a1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7a3942e7a.0.tgz","fileCount":54,"integrity":"sha512-MgU4uGfobQJZeAssSGXCKSqFxCFaRyLbcRERxHT9EdNqCmWErkVTqZ00g4IzekX/r+Tdbi1NTEj2BEi2Tqt0gg==","signatures":[{"sig":"MEQCIGvMqzr8ShxYj0575PNlzMvpqoG6032dzzU+/Mwd/Ew1AiA+DG6rv99nWivfnwwqR3tCOT0yAIV84pPPr5PQmUAl8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7a3942e7a.0_1693507230965_0.8180386589579594","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/segmented-button","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"fb5f06bad52d19c7226643db6845973663d1671a","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.54feb3020.0.tgz","fileCount":54,"integrity":"sha512-vBTM83GA2EqiSkj9a++myUZxGlJNh2gFLt49jZVdQL9Tp+A9dNz438GgL98y8DZGl6bsayZZUmJcrppQ0P4NCg==","signatures":[{"sig":"MEUCIC0QU+mtlCv3YmQTwKkKqHouRqF5YlGy2tF3gPy0cqevAiEA6w0jH/T1FHTZoHEaOywXIiEenkV5mgjHd9JM+Y4ycjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/touch-target":"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/segmented-button_15.0.0-canary.54feb3020.0_1694466350742_0.8051228003147879","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"591051568d5b6e67c493cdc3423e6c597531cb6d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":54,"integrity":"sha512-lNiznAWH1lV1DnmjU8ZLty89wGI6A46pNlQPe0SJW6yaf09iix2ioqxwhFr0kAEqNejdkxKnQchas9150mQXGw==","signatures":[{"sig":"MEQCIHLosc+3EjLxnpiyyjGPtgcl/hMi3UCMIRQ23ts7mlTsAiB5J1dyGalJ6vG65LP3ZhH2eNZmAXroIuzt9RW7iPUYgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.6cda3ce8d.0_1694483163947_0.11476225215464808","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/segmented-button","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"02bb04bb417fc7de45f0a8654664ba4d8f09743e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.205b20b36.0.tgz","fileCount":54,"integrity":"sha512-QJHHwVsNpOSB1b9TafLRHi+YmfiytiHAQcczW+S6Xy5Lv2CWo0a0UIueX45+O36fKA0A5gdmU0Gdm/r2YbGnNQ==","signatures":[{"sig":"MEQCIBYnqRe5P2mDillXjsA2t/J59/drJPIsitukY+ny92mJAiA3kG7foSdTQZzzagcA2YeDJD/7Z76BzY/2AL7A8AqjmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/touch-target":"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/segmented-button_15.0.0-canary.205b20b36.0_1694625463914_0.908890768602582","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/segmented-button","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e667a90187a694825a6e3d6ac751413b71b11b01","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.22bf82024.0.tgz","fileCount":54,"integrity":"sha512-miNs2umj4qLuz2/7DM32i+K1ntXEhqZXL7XBRf72x47oDBEIc79+luNPWpfKTA00x6gGewxiJBhm933Q3MJFgg==","signatures":[{"sig":"MEUCIQDgiWmloFREQw4MPpm/HweI8ndf70E4P+GUkvzGJkIR1wIgZ080Ng2cCfoERtADiYuBMFbvIHOeGCY4x5IUudzJ4MQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916110},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/touch-target":"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/segmented-button_15.0.0-canary.22bf82024.0_1695028360941_0.5174569394082886","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"cdd13b33901c20459105c3120b0d3e02380fe930","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a246a4439.0.tgz","fileCount":54,"integrity":"sha512-oqGHs2C7C+yJW/xZf/wP8jBGLs6HcerhM3CsorLAEMH3MGuIlVC17WcisBewEWucsILYEWbySXy/7T4h6/psZA==","signatures":[{"sig":"MEUCIQD4A/8eQasBE2flbE7M7lI0DHpcOkrJJWc/cTOc1pa7kwIgTyAWO4I/FvjKGoOhz1zc10FuLvpCa7d1zkCkn9x0usE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916366},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a246a4439.0_1695059209057_0.7370812034124472","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c303dc04beabc148b0d1d7752dc6d205ec906d0b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d153db62b.0.tgz","fileCount":54,"integrity":"sha512-OYnq0Qor/NWDqSbwvSOP/qS2MUGrFdkoPdYicT4LmQG6qj4rS5UcnOlG5sUssdbl2xc82rElhlpl/6f1CTrWew==","signatures":[{"sig":"MEUCIQDyA6OcFtPu4OwP38tuUvQ6h1cSE19FRW0q/rBZj3zoDgIgd0gqxlqs7UBAYbyS0iV/LgJSXre1nlHdnha2jzh0E94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916366},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d153db62b.0_1695150948808_0.031820990441493","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"badc3cb3eca17d3b01a40fb688307bcb443abf57","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2528c1c3b.0.tgz","fileCount":54,"integrity":"sha512-r4DHejqjlFw0pUH44X2ORlSpsQD29UuoqCWBxBRD98XnfE0iLLYINyEK8HsCq8VTnZUghXIV4qL2fEfVDKA1Og==","signatures":[{"sig":"MEUCIQCJWZREl49ywL2bvLV9a6VjN1lGs0bCGF2MsrIXiVvIoAIgcPbEhZhyPhHBBWJVYrPv+nXTimSxYCWITGQDQ3Hgyx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916366},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2528c1c3b.0_1695233236812_0.5604779797189965","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/segmented-button","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2986cbdf6e5980eaeb796ef6ef09568fe8c579de","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.1728a6dcf.0.tgz","fileCount":54,"integrity":"sha512-WfNinFSYmnoySObwCV9KGhyf2MxNOFBkqJD4Zl98lsA9KQ2Dkn1JIdJN9ZnwPrLW751PojRTCKQdtO9Pgb1CZg==","signatures":[{"sig":"MEUCIDo6e7pN6fJ1eIgvCsn5+YtLaLSQK9h7f6ucBvbyqj9LAiEAzoDzelSspQ3XpeP9wIL1CWBaj+SfTy+hafBmdvi10tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917767},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/touch-target":"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/segmented-button_15.0.0-canary.1728a6dcf.0_1695691433986_0.7742402666889536","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/segmented-button","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"73b47560239336d3160b8bd03670b9a41d22191e","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.ebb636f3d.0.tgz","fileCount":54,"integrity":"sha512-sOUSURuAHKCLbvKFvTznOCwkYZNmWp5zk22DY4G60wcfiauSl2t/Xzep3HuzIwYUwUruBAz/r/ghg1C3RsksqQ==","signatures":[{"sig":"MEUCIQDJkkTwzvCR9AnMJJwqvRZ4nAxOe7kZFGNxmRvgti89qQIgMmSJm2haRaUlQypl34oMlc3+H/cC5nqoA4mvIvamg9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917767},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/touch-target":"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/segmented-button_15.0.0-canary.ebb636f3d.0_1696016703445_0.47068841344926793","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"e99dcb29fd61e006c3968bd1d6da093810686663","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":54,"integrity":"sha512-q16OhFuobxE32ySydXZAUPdQStZpq00OmKkaaUA3aHHLiNwnvQmUKpsBSqnV6DgNd4sSAyOZp7j6LSKMwNwl6g==","signatures":[{"sig":"MEUCIQDNJ8B4ItP/g1Wb0zVEGygfo573bXEKfnHx501mh40naQIgEunk5thbt9eq0ZDLZjuCYyfhbDHCQT32xVDEFwWjDAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":917767},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c0d21ecc9.0_1696880248780_0.9112540031775189","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/segmented-button","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"dea18fdb747374acbe4508d7e1a29bea4022c616","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.127a44b28.0.tgz","fileCount":54,"integrity":"sha512-S4cT4B/PMO1KPW1DYOdoCXwwo5SV6UgYlMmiD+hT6sqlKyBMC1LH568I/23skncu9OuJzb2k6kCFkmdTZONdkQ==","signatures":[{"sig":"MEQCIHtmATLjjjzn/LiC4gZKWjdXMm6LF9dYSeSa4+VFOe8iAiANzl0E5+Hoha9TTxKaA6fth13HqGcVNBmRfXqrdSzYkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/touch-target":"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/segmented-button_15.0.0-canary.127a44b28.0_1697140876642_0.36693513854137505","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/segmented-button","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"ef5c68dc203ce2e07b9981e7fc2e7a53a1c84bd1","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.0ad128337.0.tgz","fileCount":54,"integrity":"sha512-e4jEirVjYpWaKA8rj4lshICfZHTZJzsRmAASVeb5QYZqa0UP+bbpRyiMv3WAlMZHWQzvHJHcsKCWnGUfG8F3oQ==","signatures":[{"sig":"MEQCIDQEoBeCeoKcgEw7SZSDtz6ARAuUBstypiXREw3cL4K4AiBAOpzQMfPMELOWiSpmZFmjp/10jInxlU5bs8+swveolw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/touch-target":"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/segmented-button_15.0.0-canary.0ad128337.0_1697741567594_0.2609500865995138","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/segmented-button","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"7c51d1464bbf18a4adb35be3d07893ad4eb0b695","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.9cec94097.0.tgz","fileCount":54,"integrity":"sha512-D1o4xepE6jRCBGCntAYLtJ3nqB1bWVUjZCRAhfcRJfhWQN6O9FvoDpExWLQ/iTGFgXOtPPA1ApjB99t7GmzvYg==","signatures":[{"sig":"MEQCICyBeqrHHxILbOsA6ZY0xrX9785EvoMeOE+3XDkmR/9JAiALIhBR7nfTbg5hSV+muFQRd9BaGnxEmXdWhg1+T7iKGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/touch-target":"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/segmented-button_15.0.0-canary.9cec94097.0_1697757002221_0.3527426753053948","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"50cc07b83e6caa60eb44771f1ab0be66d163de8c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":54,"integrity":"sha512-35o2pcZGKHaVGPQP4By2/pDuvhmanrd/b0+QiQgOi01/qTWPjNnl+GlU/XQ3vrmr1UCB4VZBwaw55Elcyi96gw==","signatures":[{"sig":"MEUCIHZCPYixo7P8NTrzrf4yqzu+uDD6qSoR1l+XL6zNRs8nAiEAxdmbamHX0PAdd8zZi4SC0NhdycRTEXeFYw2Gh75CmBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c51a0bbcc.0_1700081935345_0.21681252787073113","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"8862587b8e311f811aefa1cd8d5ec4ea9efe696c","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.d76666ad4.0.tgz","fileCount":54,"integrity":"sha512-EPfAIWgvUBDysCToEqd4DYFSJ9hpB5ETTh3fqwA1v1DXnW6/d24lDUIxcI6aEOobueJhc/nck5Epb5oDiZ8mJA==","signatures":[{"sig":"MEYCIQDkuUzPhVTisQyfMwEjthkCkbxu51rzv22+SRqIqyrnowIhAM9GKxF4MV6lNnlxhEqUwbC6jDoUQjtMm4/mzvpYn9Y2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.d76666ad4.0_1701123200945_0.3371335825688817","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"91a986e8d790c9e4ba95f50342ff72a681852663","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.8656bf0e0.0.tgz","fileCount":54,"integrity":"sha512-wJ2ulMamvKn5y8IFg+MxGerP7wB9l8nSC7xBg/wbeT7QTB/LO3gy2Lukdxlq9z1QgS/CsXtzm4eD5aU+rZEyiQ==","signatures":[{"sig":"MEYCIQDRTGVbD6dbcOpDbf/mtD+tWnOq0L6gIaK0HAhyroCEmgIhAK2YUNqLrqPLWp8JdG+msgbO2kpZXDDDI2IcOGkLNdbx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.8656bf0e0.0_1702415931917_0.6286438478757075","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/segmented-button","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c36ca64ea8dfeb73bfdfdddb08b436e6c29f7071","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7f224ddd4.0.tgz","fileCount":54,"integrity":"sha512-LCnVRUSAhELTKI/9hSvyvIvQIpPpqF29BV+O9yM4WoNNmNWqTulvuiv7grHZl6Z+kJuxSg4BGbsPxxb9dXozPg==","signatures":[{"sig":"MEUCIQC4ib90YRFHsf6KU4NRkbldfzfBEy80yfJj+/mBvhAQKwIgIs4/jXm1ghsPdSXR0+LHhEYdluxWUyIfZAOAKFTLC0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/touch-target":"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/segmented-button_15.0.0-canary.7f224ddd4.0_1703743759526_0.6434013593509984","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"acc010e1a9bdd76ac5065ab98f0c2dc8324113a4","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":54,"integrity":"sha512-+VQ5tzU10HkQ5RJOCiP8HNib1FtAyAIU6KZZ4kGsQDhNpKHrbnAtslvDYoovvCvDiAHtHZszupyTBfqxz/Zw3Q==","signatures":[{"sig":"MEQCIHIdWq7u84zyr3vicc1MwsZTompeWSM93sk2+u3wr5nJAiAlZ4XnWLpuyUUmRAImlaRarOvqklYvR1RDzxiG1paxrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.a0b8a90c0.0_1707333584836_0.326975706665916","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/segmented-button","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2954f4f585f17565338d8d2ffb382f55b89f370b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.e50b478eb.0.tgz","fileCount":54,"integrity":"sha512-scbNbXqXnF/kGuY0u25h8BYFseLtvJawzX5sJVmA21H8k6l7VlSrX6rb1UmZ+Q3tCEkIWj4UTPttaQazIGwazQ==","signatures":[{"sig":"MEYCIQCGOPPMUEjRjPlR03X8YIA1RCbXyeeUCH0M0Zfoylmy1AIhAOL0fyDvLfK8a/BM+NEMzWwhAu+LwwzDuqovxyDFucN1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/touch-target":"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/segmented-button_15.0.0-canary.e50b478eb.0_1707415693943_0.07966174796243819","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/segmented-button","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"03bbd06869dd9b142ffa5349e843235c43ddb45b","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.c43b3438b.0.tgz","fileCount":54,"integrity":"sha512-CYp0hbNYmVxFb7JNvvSxg1spinj1mBQmp294eZnUxtmXcRPeDnXW1iKQemh6UUTamSsr5Lb2MhPIZ+yrxZaaLA==","signatures":[{"sig":"MEYCIQC3q8W5uUXvbiyNx5aVTB41nRsijVUFvWrYQdNjjrcLhgIhAJM1w29XBCze8cY84VAQNMIRtzKke6nb1CTqyxdd92Zh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/touch-target":"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/segmented-button_15.0.0-canary.c43b3438b.0_1708719469279_0.4846031596534264","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/segmented-button","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"eb5146854b7399dc294d12fcb35f04ab1b671685","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.819498d8c.0.tgz","fileCount":54,"integrity":"sha512-+ZcaH+LviTQEUaLO4AgX4qxlcektVuspFgkY5PRUdoFqt6V2P1n3SUuNKk0Y+7LMCHZXZt2AyoDZFnlgLqV+VQ==","signatures":[{"sig":"MEUCIQDtt4AGSPRdHCMoOj0QAopRrJ13wuy3EBh+hXxcw5eYhwIgLR26jNsGhMW3t2ULDb0bWEvD4+320EfpNtzHGxczDa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/touch-target":"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/segmented-button_15.0.0-canary.819498d8c.0_1710515712992_0.2778621960852594","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/segmented-button","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"2470b7c24e7506bbab57770a49c5f0d2202298dd","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.453a6248a.0.tgz","fileCount":54,"integrity":"sha512-kqY4+rHk3JCcxgrh3fElzLywbpE2H/K5eCwtP4s0Ez4fjPFv9Q/GGkOhNMCbOfTPXKZf/Hu6lbm8BvXdSW/jrA==","signatures":[{"sig":"MEUCICLadIjePWschSo1CZSyjWOzDkVD6wDjgFf8kw7bemHWAiEAqCevTRAGeV2XjPYXm5Ydp6At1NsvlmMi/eRAD/C/plI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/touch-target":"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/segmented-button_15.0.0-canary.453a6248a.0_1711386828570_0.16709998428308825","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/segmented-button","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"17143485187b55a2c4dea4b4a9b77456f8aecbe5","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.68edc03c6.0.tgz","fileCount":54,"integrity":"sha512-CdWVDcDNOKQEvnmjSYsKjEYlfoe2r/huJmpZ6MwtZQFhtkO3f0zOF7Yzxq2/Ro8CRryW8ChG0q+V+Uuox6bzjA==","signatures":[{"sig":"MEQCIAb4L7oYLj0NisvfyYOaAy+Ui13iswYQ60zUEAHxPwAKAiBtHinJpMpkvRmMak5Pgc+xhWYz8oxmBPJmXnb4D7iGKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/touch-target":"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/segmented-button_15.0.0-canary.68edc03c6.0_1712603185619_0.43388717190163617","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/segmented-button","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"686014a8b60262f054db9f1c40a82253ba5600b2","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.5bebc0064.0.tgz","fileCount":54,"integrity":"sha512-Xu2QNvGS53QMpj1lQ7wOroPWkuBq/m4AXWTtRnWxQxfXGNHIWdF8WoErJw9pEOXXdjoh2BfRt7/yDH+VOYZsHQ==","signatures":[{"sig":"MEUCIB8m55AQtBpbevk5zEzFvbFZz48Tl9q3QHqm4HIMZCQUAiEA26UjeLieD4WTnjgYOKHzPhsCTPm0M1wyLpVRQeAuhqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/touch-target":"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/segmented-button_15.0.0-canary.5bebc0064.0_1712871680232_0.6211904404166813","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/segmented-button","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"c47bd1f5fa60a60a5bfc15d1b3e0c1580ee5ef59","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.311f29a60.0.tgz","fileCount":54,"integrity":"sha512-N5PGQuOEVpFFvaEknABNHY+8txcqsnQGNbAWrQ+RnKHeF/jBkura1U0EmS+oFqzgY3MVFYTOrdLqq7QGgP0dfQ==","signatures":[{"sig":"MEUCIFA5Kqkl+gdQBQR9hB5XBhmeoVKINaroX6vjAz0ZM3nfAiEA3DWqJHDHX3IjIqOH7YYVdND5F2Ri2jdwUBLbe8q/sLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/touch-target":"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/segmented-button_15.0.0-canary.311f29a60.0_1713895218045_0.37989297458223414","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/segmented-button","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"d8a04c3b54054005c64cf0ffe496a5da2eec03e3","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.65c10a622.0.tgz","fileCount":54,"integrity":"sha512-Bm5MsIhZ6p1W3u4VhUL+YmGYssD/NNfpOuFB0kXGH7olbcitGX4BA26UjGGG3fGQABgKMnoEuYwRC696MmahJA==","signatures":[{"sig":"MEUCIQDCHV6CP7UwfSLr+YinUVsvWhPQdhB4LaJnBr/uxdBGKQIgKy9DFPt4MdcQzmMkdb2cxMyzePWJiIG4uuNN+q1A+vI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/touch-target":"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/segmented-button_15.0.0-canary.65c10a622.0_1714070948873_0.6946684359610267","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"da2ff667d3a74450b38345829ebf1f8aa66b1b80","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":54,"integrity":"sha512-aH9cYCucGY3OSRC5ZdsIoHkPBYXz6ookzhK2SV8GVMhbXImoROCgjNxCNepfw8fNVEQvxmhEl6f8K3W+6w3Xeg==","signatures":[{"sig":"MEUCIQDaJiUs+3GUe/iyfMiaXUpPgB5u0zhMWmztt4wumWS1jwIgIh+MbeNhgWbJf1/1IXjXm8sa0NL83efhlFvYmnrA1bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.4b35cb7d0.0_1714651393137_0.21794456838620047","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/segmented-button","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"654199bb0b5270b28fb39ec2cedc061f24f6b19d","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.f80ac92b0.0.tgz","fileCount":54,"integrity":"sha512-XLM7t0aXDFftYvNSAYIPncXnKkWcr+4/lUsTNfaDBvhmky2p5QzJtBR3RHVJ4P5BDF8fybE3Zqy2dj0Yw1L9yQ==","signatures":[{"sig":"MEUCIQC8XTzCwZzedaOgCNy7YV9DvoWtzHP5Hbs+usMTXFQp0wIgXmJH1iDWDld11Wl/pQAdepR+LtOdZdmcJT2lRzN5XAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/touch-target":"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/segmented-button_15.0.0-canary.f80ac92b0.0_1714652002624_0.4694477088885829","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"1e3761127846d25267a033fd5c75d5dde80bc8da","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.2f5b899bc.0.tgz","fileCount":54,"integrity":"sha512-TnssBgiG95Z52PeNmOmrGfrm6JK3ZgZekFFKXcESY0hqCRXWLbXQaZyiuYQXz7k8woOWN70lgvtQvFHXH58Czg==","signatures":[{"sig":"MEUCIQDDBOcvVhzii1pNO7d7dqw9/PrBk6krVtt9MxUWSOqSlwIgOPL0d1KDlUMFMkATX9e+741qdwIJYAv8F6BXMVxxG9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/touch-target":"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/segmented-button_15.0.0-canary.2f5b899bc.0_1716213336276_0.06559159472078546","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/segmented-button","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","segmented button"],"license":"MIT","_id":"@material/segmented-button@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":"326ac9092dfaa81591de90cad0c80b365465f643","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.cfec83c74.0.tgz","fileCount":54,"integrity":"sha512-wYxMMXu6PBR5RBNccKk+4Z81wOsqJlkRfOr8TOfUaw1JTkwkUQlS7vnPV09fnGqB2t8JLn1kHeE7aiQocutmRg==","signatures":[{"sig":"MEUCIQDDj5pXs8ujOrrwS46Gsx1Oulxm0o5LEJXooyQHkQTURAIgWc8v15YyAw1cUU8fRBxUmipcdlN1BQG+asISkXkLxiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":920400},"readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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-segmented-button"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web segmented button component","directories":{},"_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/ripple":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/touch-target":"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/segmented-button_15.0.0-canary.cfec83c74.0_1716231417490_0.14918030143126448","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/segmented-button","version":"15.0.0-canary.423edc3dc.0","description":"The Material Components for the web segmented button component","license":"MIT","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-segmented-button"},"keywords":["material components","material design","segmented button"],"publishConfig":{"access":"public"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/touch-target":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"# Segmented Buttons\n\n[Segmented buttons](https://material.io/components/buttons#toggle-button) allow users to toggle the selected states of grouped buttons.\n\n## Using segmented buttons\n\n## Installation\n\n```\nnpm install @material/segmented-button\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Styles\n\n```scss\n@use '@material/ripple/common';\n@use '@material/segmented-button/styles';\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSegmentedButton} from '@material/segmented-button';\nconst segmentedButtonEl = document.querySelector('.mdc-segmented-button');\nconst segmentedButton = new MDCSegmentedButton(segmentedButtonEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nThe MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [FontAwesome](https://fontawesome.com/), or any other icon library you wish.\n\n## Segmented Button\n\n### Multi select\n\nBy default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.\n\nFor accessibility, the segments are treated as toggle buttons. The segmented button is assigned `role=\"group\"` and each segment has the attribute `aria-pressed` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button\" role=\"group\">\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" aria-pressed=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Single select\n\nThe segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class `mdc-segmented-button--single-select`.\n\nFor accessibility, the segments are treated as radio buttons. The segmented button is assigned `role=\"radiogroup\"` and each segment is assigned `role=\"radio\"` and has the attribute `aria-checked` with a boolean value corresponding to its selected state.\n\n```html\n<div class=\"mdc-segmented-button mdc-segmented-button--single-select\" role=\"radiogroup\">\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n  <button class=\"mdc-segmented-button__segment\" role=\"radio\" aria-checked=\"false\">\n    <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n## Segment\n\nThe segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.\n\nThe segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.\n\n### Segment with text\n\nTo insert text inside of a segment, add the class `mdc-segmented-button__label`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Segment with an icon\n\nTo insert an icon inside of a segment, add the class `mdc-segmented-button__icon`.\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <i class=\"material-icons mdc-segmented-button__icon\">favorite</i>\n</button>\n```\n\n### Selected segment\n\nThe segment will remain in a visually toggled state while selected. To select the segment by default, add the class `mdc-segmented-button__segment--selected` and set the attribute `aria-pressed` or `aria-checked` (if the segmented button is multi or single select, respectively) to `true`.\n\n```html\n<button class=\"mdc-segmented-button__segment mdc-segmented-button__segment--selected\" aria-pressed=\"true\">\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n## Additional Information\n\n### Touch accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <button class=\"mdc-segmented-button__segment mdc-segmented-button--touch\">\n    <div class=\"mdc-segmented-button__touch\"></div>\n    <div class=\"mdc-segmented-button__label\">Sample Text</div>\n  </button>\n</div>\n```\n\n### Ripple\n\nTo include ripple effects when a segment is clicked add the following classes to the segment:\n\n```html\n<button class=\"mdc-segmented-button__segment\">\n  <div class=\"mdc-segmented-button__ripple\"></div>\n  <div class=\"mdc-segmented-button__label\">Sample Text</div>\n</button>\n```\n\n### Keyboard navigation\n\nEach segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-segmented-button` | Mandatory. Indicates the wrapper for child segments.\n`mdc-segmented-button__single-select` | Optional. Indicates the segmented button only allows one segment to be selected at a time.\n`mdc-segmented-button__segment` | Mandatory. Indicates a button element that can be selected.\n`mdc-segmented-button__icon` | Optional. Indicates an icon in the segment. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\n`mdc-segmented-button__label` | Optional. Indicates text in the segment.\n`mdc-segmented-button__segment--selected` | Optional. Indicates that the segment is selected.\n`mdc-touch-target-wrapper` | Optional. Indicates contained segment has touch target support.\n`mdc-segmented-button--touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__touch` | Optional. Indicates the segment has touch target support.\n`mdc-segmented-button__ripple` | Optional. Indicates the segment has a ripple effect when clicked.\n\n> _NOTE_: Every segment element must contain an icon with class `mdc-segmented-button__icon`, text with class `mdc-segmented-button__label`, or both.\n\n> _NOTE_: While `mdc-touch-target-wrapper`, `mdc-segmented-button--touch`, and `mdc-segmented-button__touch` are optional, if one is used then all three must be used.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`outline-color` | Customizes the border color around each segment.\n`unselected-ink-color` | Customizes the text and icon ink color for an unselected segment.\n`unselected-container-fill-color` | Customizes the background color for an unselected segment.\n`selected-ink-color` | Customizes the text and icon ink color for a selected segment.\n`selected-container-fill-color` | Customizes the background color for an selected segment.\n\n## `MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods\n\nThe MDC Segmented Button package is composed of two JavaScript classes:\n\n* `MDCSegmentedButton` defines the behavior of a set of segments.\n* `MDCSegmentedButtonSegment` defines the behavior of a single segment.\n\nTo use the `MDCSegmentedButton` and `MDCSegmentedButtonSegment` classes, [import](../../docs/importing-js.md) both from `@material/segmented-button`.\n\n### `SegmentDetail`\n\nThe `SegmentDetail` type contains only the actionable information about a specific `MDCSegmentedButtonSegment`.\n\nProperty | Value Type | Description\n--- | --- | ---\n`index` | `number` | The index of the segment.\n`selected` | `boolean` | The segment's selected state.\n`segmentId?` | `string \\| undefined` | The segment's segmentId, if provided.\n\n### `MDCSegmentedButton`\n\nMethod Signature | Description\n--- | ---\n`getSelectedSegments() => readonly SegmentDetail[]` | Proxies to foundation's `getSelectedSegments` method.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `selectSegment` method.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Proxies to foundation's `unselectSegment` method.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Proxies to foundation's `isSegmentSelected` method.\n\nProperty | Value Type | Description\n--- | --- | ---\n`segments` | `ReadOnlyArray<MDCSegmentedButtonSegment>` | Array of child `MDCSegmentedButtonSegment`s.\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\nMDCSegmentedButton:change | `SegmentDetail` | Indicates that a segment's selected value may have changed due to a click.\n\n### `MDCSegmentedButtonSegment`\n\nMethod Signature | Description\n--- | ---\n`setIndex(index: number) => void` | Sets segment's index.\n`setIsSingleSelect(isSingleSelect: boolean) => void` | Sets segment's isSingleSelect.\n`isSelected() => boolean` | Proxies to foundation's `isSelected` method.\n`setSelected() => void` | Proxies to foundation's `setSelected` method.\n`setUnselected() => void` | Proxies to foundation's `setUnselected` method.\n`getSegmentId() => string \\| undefined` | Proxies to foundation's `getSegmentId` method.\n\n#### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `SegmentDetail` | Indicates the segment's selected status just changed due to a click.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`\n\nSee [`segmented-button/component.ts`](segmented-button/component.ts) and [`segment/component.ts`](segment/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\n\n#### `MDCSegmentedButtonAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns true if segmented button has className, otherwise returns false.\n`getSegments() => readonly SegmentDetail[]` | Returns child segments represented as a readonly list of SegmentDetails.\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`notifySelectedChange(detail: SegmentDetail) => void` | Notifies the client about the changed segment with a `change` event.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).\n\n#### `MDCSegmentedButtonSegmentAdapter`\n\nMethod Signature | Description\n--- | ---\n`isSingleSelect() => boolean` | Returns true if wrapping segmented button is single select, otherwise returns false.\n`getAttr(attrName: string) => string \\| null` | Returns root element's attribute if it is set, otherwise returns null.\n`setAttr(attrName: string, value: string) => void` | Sets root element's attribute value to `value`.\n`addClass(className: string) => void` | Adds class to the root element.\n`removeClass(className: string) => void` | Removes class from the root element.\n`hasClass(className: string) => boolean` | Returns true if root element has class, otherwise returns false.\n`notifySelectedChange(selected: boolean) => void` | Notifies the Segmented Button that the segment's selected state has changed.\n\n>_NOTE_: `notifySelectedChange` must pass along a `SegmentDetail` representing the Segment, and must be observable by the `mdc-segmented-button` element (e.g. via DOM event bubbling).\n\n### Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`\n\n#### `MDCSegmentedButtonFoundation`\n\nMethod Signature | Description\n--- | ---\n`selectSegment(indexOrSegmentId: number \\| string) => void` | Sets identified segment to be selected.\n`unselectSegment(indexOrSegmentId: number \\| string) => void` | Set identified segment to be not selected.\n`getSelectedSegments() => readonly SegmentDetail[]` | Returns selected segments as readonly list of SegmentDetails.\n`isSegmentSelected(indexOrSegmentId: number \\| string) => boolean` | Returns true if identified segment is selected, otherwise returns false.\n`isSingleSelect() => boolean` | Returns true if segmented button is single select, otherwise returns false.\n`handleSelected(detail: SegmentDetail) => void` | Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.\n\n#### `MDCSegmentedButtonFoundation` Event Handlers\n\nWhen wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCSegmentedButtonSegment:selected` | `.mdc-segmented-button` (root) | `handleSelected`\n\n\n### `MDCSegmentedButtonSegmentFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => void` | Returns true if segment is currently selected.\n`setSelected() => void` | Sets segment to be selected.\n`setUnselected() => void` | Sets segment to be not selected.\n`getSegmentId() => string \\| undefined` | Returns segment's segmentId if it was provided, otherwise return undefined.\n`handleClick() => void` | Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.\n\n#### `MDCSegmentedButtonSegmentFoundation` Event Handlers\n\nWhen wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click` | `.mdc-segmented-button__segment` (root) | `handleClick`\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/segmented-button@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-ny5OaeS8TCYVjlRwtQeWUJJRtRMyZVH9wj2iB04YvDgGGaLAnOKcHm+oBuGmoU23TphTEvhN59r5UiwFugLW3g==","shasum":"7f911e13a423d181e5663437da78f48171a149f7","tarball":"https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.423edc3dc.0.tgz","fileCount":54,"unpackedSize":920400,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1S0vJCpYPb7LCnhlqyiPkc23DRYKog2PwpHiBB5KUBAiEA3u9BwcYqRuul2tZYGqy5RCCNOlYgszPxMzILU60WQkw="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/segmented-button_15.0.0-canary.423edc3dc.0_1719425519203_0.5832795233611112"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-26T21:47:36.899Z","modified":"2024-06-26T18:11:59.894Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:47:37.110Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:22:55.241Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:14:39.148Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:29:46.711Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:03.188Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:04:43.381Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:13:39.178Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:15.280Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:25.923Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:26:27.310Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:15.192Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:40:27.122Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:15.208Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:08.259Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:23.084Z","8.0.0-canary.d850de590.0":"2020-07-09T18:04:48.754Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:34:40.340Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:35:16.654Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:08.105Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:02.038Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:11:37.795Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:05.579Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:06:33.027Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:33:39.400Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:19.062Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:09:46.824Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:25.451Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:24.351Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:33:31.672Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:08:45.452Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:24.166Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:22.401Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:00.736Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:49:31.163Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:46:30.561Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:22:37.713Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:32:58.131Z","8.0.0-canary.12a109680.0":"2020-07-22T23:02:50.082Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:15.566Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:48:51.241Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:10.919Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:46:44.896Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:01.527Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:58:51.056Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:03.516Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:16.864Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:01.326Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:09.027Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:15.354Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:12:25.950Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:39.750Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:46.799Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:20.870Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:21.228Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:30.085Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:48.250Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:46.741Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:43.997Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:24.030Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:36.256Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:20.397Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:36.571Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:33.876Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:42.542Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:18.738Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:40.258Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:30.288Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:55.215Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:14.911Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:02.186Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:02.973Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:44.298Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:36.628Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:43.089Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:35.944Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:51.944Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:27.905Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:45.412Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:24.564Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:11.507Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:24.059Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:39.317Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:38.494Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:55.112Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:42.828Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:16.803Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:31.226Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:56.424Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:27.689Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:52.330Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:36.045Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:31.248Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:28.788Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:03.862Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:13.160Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:17.230Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:39.770Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:53.648Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:14.206Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:57.610Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:41.563Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:36.984Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:38.697Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:52.205Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:51.746Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:05.851Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:07.207Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:30.749Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:26.957Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:29.718Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:27.343Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:57.844Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:56.531Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:38.139Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:16.826Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:08.918Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:42.375Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:18.228Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:26.499Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:30:02.597Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:44.107Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:40.195Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:34.032Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:07.233Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:03.749Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:14.598Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:09.828Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:19.251Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:11.124Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:56.117Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:23.249Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:09.982Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:38.784Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:24.346Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:59.818Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:44.290Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:50.390Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:06.668Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:01.764Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:37.352Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:04.936Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:04.778Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:37.991Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:40.332Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:18.060Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:39.506Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:06.056Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:49.349Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:05.048Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:16.348Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:47.758Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:03.203Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:51.388Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:28.358Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:29.340Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:57.805Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:30:21.326Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:29:23.974Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:40.000Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:09.231Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:04.420Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:26:03.053Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:17.754Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:51.371Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:10.584Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:28.133Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:26.104Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:35.635Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:34.613Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:53.470Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:37.257Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:54.288Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:28.265Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:25.321Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:10.150Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:17.220Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:43.465Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:09.718Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:04.468Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:55.378Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:39.170Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:25.602Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:54.649Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:45.898Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:58.607Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:25.190Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:22.207Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:08.723Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:32.665Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:11.297Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:56.250Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:40.202Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:14.270Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:33.913Z","8.0.0":"2020-11-02T22:59:55.527Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:50.274Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:18.030Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:29.898Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:26.336Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:22.889Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:13.804Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:39.951Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:52.613Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:25.580Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:56.595Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:06.726Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:18.403Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:07.659Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:35.812Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:28.732Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:21.662Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:24.873Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:13.301Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:10.147Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:18.104Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:43.536Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:37.733Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:43.304Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:33.223Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:03.241Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:46.999Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:12.640Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:26.802Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:17.926Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:33:41.076Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:41.947Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:39.697Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:53.181Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:57.819Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:27.794Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:00.403Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:54.539Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:47.555Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:48.959Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:30:01.039Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:50.940Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:33.158Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:14.560Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:32.830Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:17.768Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:20.312Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:42.151Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:52.319Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:48.397Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:35.249Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:38.516Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:40.838Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:59.824Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:34.793Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:18.228Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:08.362Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:34.690Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:45:24.736Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:25.830Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:46.736Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:42.014Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:10.177Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:52.905Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:44.221Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:14.565Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:19.522Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:55.473Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:44.681Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:15.739Z","9.0.0":"2020-12-29T19:46:21.234Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:24.731Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:09.004Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:43.793Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:32.371Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:59.414Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:33.661Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:51.599Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:33.971Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:15.679Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:06.221Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:29.915Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:33.719Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:27.457Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:07.964Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:48.248Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:55.317Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:33.649Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:06.701Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:38.820Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:23.756Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:20.715Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:35.859Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:25.192Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:51.795Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:06.116Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:28.105Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:19.454Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:15.270Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:51.676Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:06.719Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:38.803Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:25.259Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:46.246Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:03.155Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:12.974Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:28.882Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:15.373Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:30.959Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:33:29.904Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:22.190Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:21.251Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:29.450Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:24.643Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:22.522Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:34.185Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:39.636Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:55.940Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:47.902Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:56.767Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:44.097Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:32.967Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:21.591Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:52.460Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:16.894Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:30.678Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:28.156Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:12.859Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:58.232Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:01.108Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:47.293Z","10.0.0":"2021-02-05T16:19:11.474Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:21.981Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:57.091Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:08.077Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:49.548Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:34:41.174Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:41.933Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:44.853Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:33.061Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:55.316Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:17:12.050Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:10.550Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:09.925Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:12.668Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:39.059Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:09.185Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:12:04.480Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:27.194Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:08.467Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:23.635Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:25.949Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:45:01.477Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:20.856Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:45.355Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:59.836Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:42.165Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:44.504Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:48.899Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:14.967Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:28.108Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:53.705Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:57.288Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:56.126Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:44.818Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:09.257Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:53.247Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:11.031Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:10.281Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:29.425Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:35:00.724Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:52.971Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:50.327Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:48:09.527Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:41.829Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:21.715Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:35.867Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:39:05.178Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:24.858Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:15.328Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:32:02.448Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:25.312Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:25.436Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:15.132Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:15.699Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:45.679Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:49.775Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:07.182Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:21.823Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:42.898Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:35.374Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:27.462Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:07.512Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:50:05.714Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:56.771Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:28.554Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:37:03.414Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:37.176Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:55.391Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:19.920Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:39.319Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:22.448Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:10.150Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:13.488Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:11.957Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:15.335Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:55.049Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:27.422Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:39.229Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:28.327Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:52.139Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:35.659Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:07.455Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:22.751Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:18.603Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:56.262Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:38:07.868Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:21.266Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:48.290Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:27.028Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:52.269Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:10.171Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:12.372Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:47.130Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:54.862Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:58.059Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:54:08.904Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:42.435Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:43.569Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:25.081Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:47.546Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:56:54.404Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:32.688Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:45.232Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:57.916Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:48.575Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:44.066Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:14.666Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:25.618Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:58.528Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:26.913Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:09.943Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:19.251Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:42.310Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:25.810Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:52.401Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:00.031Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:55.131Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:59.874Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:51.205Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:30.395Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:14.509Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:36.365Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:45.546Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:43.819Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:37.671Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:09.021Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:18.318Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:29.520Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:17.766Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:26.322Z","11.0.0":"2021-04-15T22:58:30.400Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:13.758Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:00.289Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:28.847Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:02.453Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:46.824Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:22.749Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:00.206Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:36.546Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:45.177Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:35.478Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:22.781Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:18.463Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:41.100Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:03.587Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:03.087Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:47.062Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:35.508Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:54.608Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:23.224Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:44.060Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:06.832Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:07.295Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:50.092Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:00.810Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:26.856Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:15.490Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:15.306Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:58.442Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:14.944Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:57.131Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:31.633Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:41.761Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:48.430Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:03.015Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:08.392Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:58.552Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:33.016Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:16.701Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:32.112Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:40.042Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:01.072Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:42.026Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:10.517Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:51.328Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:20.514Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:23.838Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:49.050Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:57.611Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:34.842Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:26.368Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:19.722Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:14.093Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:35.008Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:13.791Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:42.297Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:35.569Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:50.961Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:20.873Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:07.730Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:45.977Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:05.147Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:57:06.155Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:13.154Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:59.457Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:52.780Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:37.576Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:34.641Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:46.254Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:59.859Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:23.710Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:52.481Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:12.764Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:16.551Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:53.279Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:50.681Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:03.712Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:20.557Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:29.660Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:01.857Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:15.245Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:51.847Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:58.826Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:39.887Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:38.151Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:05.565Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:47.601Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:37.160Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:23.907Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:26.718Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:30.775Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:23.063Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:53.309Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:33.998Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:22.873Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:02.846Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:19.338Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:21.563Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:02.197Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:58.948Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:02.669Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:36.352Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:22.451Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:17.416Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:10.929Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:20.448Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:49.047Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:15.565Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:51.057Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:31.265Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:38.593Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:24.514Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:39.959Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:54.407Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:38.045Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:11.723Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:14.603Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:47.267Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:34.622Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:05.055Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:43.551Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:02.874Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:35.800Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:46.552Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:26.517Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:14.803Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:27.706Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:53.157Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:23.766Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:40.797Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:32.542Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:34.552Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:39.612Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:26.589Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:09.040Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:45.345Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:39.868Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:19.280Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:21.225Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:09.412Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:32.427Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:24.106Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:14.989Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:21.344Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:16.679Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:22.537Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:15.479Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:09:00.794Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:02.574Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:41.205Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:46.956Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:10.033Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:06.984Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:38.592Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:33.060Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:30.224Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:27.430Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:56:01.322Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:08.633Z","12.0.0":"2021-07-27T19:50:05.695Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:46.191Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:24.832Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:04.798Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:19.442Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:34.752Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:17.473Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:37.833Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:34.856Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:08.029Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:00:01.003Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:37.530Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:31.198Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:21.897Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:09.403Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:06.849Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:40.645Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:33.074Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:49.231Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:47.910Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:09.067Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:53.423Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:01.884Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:35.508Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:33.466Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:45.169Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:23.650Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:07.778Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:30.777Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:31.122Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:51.526Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:30.300Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:54.685Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:59.578Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:32.716Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:54.746Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:38.047Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:32.285Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:57.320Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:54.381Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:23.875Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:08.976Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:48.377Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:25.870Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:31.811Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:54:03.998Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:43.415Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:25.234Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:06:04.778Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:16.276Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:36.805Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:38.272Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:40.596Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:21.857Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:38:04.283Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:45:04.350Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:15.689Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:55.000Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:31.079Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:00.366Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:43:52.048Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:11.976Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:26.551Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:10.717Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:29.562Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:10.134Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:22.407Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:21.391Z","13.0.0-canary.864798678.0":"2021-09-09T18:37:48.654Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:22:44.440Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:35.569Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:15.984Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:17.100Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:15.681Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:02.531Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:18.515Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:24.654Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:54.329Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:32.744Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:08.930Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:16.174Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:30.105Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:29.206Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:04.229Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:30.757Z","13.0.0":"2021-09-24T19:46:26.226Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:10.671Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:36.329Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:52.578Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:36.410Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:29.654Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:53.847Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:06.521Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:30.601Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:39.551Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:15.050Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:25.298Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:21.316Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:55.919Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:25.947Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:08.279Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:36.383Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:29.241Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:41.905Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:23.544Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:20.512Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:06.011Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:06.913Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:01.134Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:21.697Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:25.129Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:54.461Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:50:50.391Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:29.522Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:14.856Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:03.864Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:08.026Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:25:49.110Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:10.869Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:58.609Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:25.489Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:07.808Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:09.583Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:15.788Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:32.828Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:55.005Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:10.317Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:18.349Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:30.938Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:18.280Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:05.501Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:02.459Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:40:43.583Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:13:54.089Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:36.038Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:16.999Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:46:47.971Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:06.528Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:09.346Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:15.337Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:56.681Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:34.357Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:19.589Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:05.874Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:38.941Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:25.858Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:17.810Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:16.908Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:32:52.225Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:05.016Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:59.703Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:18.745Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:50:43.698Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:23:44.302Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:06.097Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:39.862Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:37.985Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:11.784Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:27.544Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:25.346Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:54.117Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:05.048Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:52.108Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:45.884Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:50.743Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:53.242Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:05.331Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:27.789Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:03.655Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:18.641Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:17.645Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:44.031Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:16.436Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:32.706Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:55.640Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:54.829Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:52:45.522Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:45.857Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:28.029Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:14.668Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:36.169Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:15.968Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:37.883Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:58.486Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:37.953Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:56.941Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:54.080Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:04.340Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:24.865Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:24.530Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:00.927Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:36.172Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:04.428Z","14.0.0":"2022-04-28T16:56:41.779Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:57:44.237Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:23.045Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:14.775Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:45.047Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:02.642Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:35.052Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:03.874Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:11.563Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:57.364Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:37.782Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:11.932Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:43.931Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:25.379Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:28.589Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:33.801Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:30.822Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:40:53.654Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:21:51.733Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:17.828Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:28.559Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:06.279Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:14.720Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:46.009Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:06.501Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:40.278Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:10.687Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:45.989Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:44.610Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:22.246Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:09.440Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:22.505Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:59.781Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:46.818Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:48.177Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:39.634Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:41.292Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:58.629Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:49.353Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:04.160Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:52.591Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:49.655Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:50.289Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:53.343Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:24.650Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:20:32.298Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:25.380Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:31.400Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:47.316Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:47.167Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:55.288Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:18.969Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:17.963Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:14.458Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:25.381Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:21:31.481Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:23.575Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:35.420Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:14.809Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:36.661Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:58.502Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:22.535Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:45:18.764Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:38.634Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:56.938Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:24.777Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:21.885Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:37.916Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:33.936Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:38.134Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:50.625Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:28.746Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:19.478Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:06.387Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:39.883Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:04.323Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:19.474Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:43.118Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:56.003Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:12.408Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:23.896Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:44.203Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:50.618Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:35.307Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:13.094Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:07:28.710Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:16.356Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:42.165Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:18.953Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:34.372Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:40.528Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:54.936Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:15.079Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:24.989Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:23.767Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:17.266Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:52.028Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:29.259Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:30.013Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:50.355Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:48.365Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:04.435Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:17.209Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:59.154Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:17.267Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:55.361Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:35.688Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:52:13.827Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:41.558Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:59.531Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:17.527Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:45.347Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:41:06.819Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:00.197Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:03.428Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:26.235Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:04.278Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:48.967Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:49.723Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:33.917Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:22.562Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:26.425Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:48.635Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:48.241Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:42.234Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:18.512Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:59.641Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:08.351Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:50:12.004Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:57:05.789Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:31.889Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:25.145Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:35.326Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:52.194Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:46.234Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:42.818Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:38.614Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:44.179Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:14.647Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:03.738Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:35.217Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:13.657Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:40.137Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:13.284Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:56.465Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:32.712Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:48.414Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:31.377Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:37:11.412Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:32.233Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:55.873Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:15.864Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:42.602Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:08.359Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:50.208Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:53.899Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:34.154Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:14:01.870Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:15.175Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:18:16.758Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:42.315Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:00:06.601Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:06:02.062Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:33.223Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:37.023Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:51.501Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:42.368Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:38.049Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:26.063Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:52.439Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:17:02.244Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:32.143Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:49.680Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:54.740Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:38.197Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:31.089Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:03:10.489Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:47.809Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:29.734Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:43.515Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:17:10.187Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:40:11.493Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:32.181Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:39.539Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:31.704Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:07.148Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:24.491Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:22.290Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:30.214Z","15.0.0-canary.65c411674.0":"2022-11-29T17:39:21.434Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:15:01.092Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:08:22.725Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:30:02.073Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:13.941Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:25:02.430Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:17.449Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:49.749Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:40.696Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:25.278Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:31.994Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:26:10.997Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:41.127Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:50.560Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:42:08.118Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:45:15.862Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:39.239Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:47.890Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:03:08.137Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:56.308Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:43.058Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:33.942Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:44.052Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:58.462Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:24.901Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:25.778Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:58.529Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:38.177Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:57.158Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:13:04.019Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:06:00.877Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:47.257Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:32.927Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:03:04.069Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:48.068Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:49.737Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:32.100Z","15.0.0-canary.af490a848.0":"2023-01-03T15:58:29.139Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:38.704Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:00.045Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:00.813Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:37.626Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:50.314Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:35.662Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:41.837Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:10:12.492Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:21.224Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:55.520Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:49.387Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:48.725Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:29:01.971Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:25.580Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:25.348Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:18.044Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:13:02.203Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:55:05.383Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:36.926Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:34.140Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:37:10.024Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:28.297Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:50:27.169Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:40:02.709Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:38.521Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:26.344Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:49.996Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:23.570Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:55.357Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:45:02.968Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:27.817Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:14.718Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:35:03.597Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:39:10.431Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:43.967Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:19.118Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:38.212Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:24.435Z","15.0.0-canary.de38de758.0":"2023-02-09T15:43:15.987Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:52.869Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:39.410Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:35.823Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:57.059Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:20:17.913Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:42:16.483Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:37.604Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:24.260Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:15.475Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:37.921Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:42.115Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:08.746Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:33.188Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:25.463Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:19:01.827Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:45.272Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:48:03.656Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:29.673Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:39.921Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:48.734Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:48:11.759Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:46.213Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:43.990Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:58.753Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:42.027Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:58.100Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:20.358Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:43.796Z","15.0.0-canary.112715df5.0":"2023-03-13T18:40:01.188Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:32:13.686Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:51.364Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:44:11.340Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:25.963Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:17:11.025Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:48:05.691Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:37.729Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:55.481Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:45.726Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:34.203Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:28:10.907Z","15.0.0-canary.87809c710.0":"2023-03-14T18:44:09.990Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:31.372Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:32.367Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:14:12.555Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:12:01.051Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:42:08.927Z","15.0.0-canary.39e473690.0":"2023-03-21T17:52:17.108Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:59:13.739Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:50.628Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:35:28.096Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:43.010Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:49.612Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:34.616Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:30.128Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:56:04.016Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:31:01.218Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:05:04.826Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:43:12.293Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:59.665Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:36.467Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:23.238Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:39.730Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:16.986Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:20.495Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:32:06.268Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:23.853Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:31.423Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:10:08.899Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:57:11.088Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:58.850Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:58.341Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:55.497Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:31:12.214Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:54.163Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:43.701Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:44.247Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:31.041Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:43:27.248Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:56.596Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:19:09.220Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:45.127Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:19:05.922Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:46.732Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:58.253Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:33.205Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:58:01.817Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:31.207Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:28.608Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:37.279Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:37.194Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:30.103Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:22:18.079Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:48:45.912Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:43.399Z","15.0.0-canary.872b65832.0":"2023-08-30T12:14:15.197Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:37.824Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:31.288Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:50.889Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:46:04.267Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:44.207Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:41.133Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:49.364Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:49.120Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:07:17.052Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:54.308Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:45:03.821Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:29.125Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:01:17.085Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:47.794Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:10:02.650Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:55.661Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:21.184Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:52.249Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:19.760Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:45.135Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:14.220Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:49.497Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:13.148Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:48.835Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:25.811Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:20.464Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:18.352Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:09.096Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:13.424Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:22.867Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:55:36.455Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:57.732Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:59.430Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","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-segmented-button"},"keywords":["material components","material design","segmented button"],"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":""}